Jquery - append image to auto slide

Question

Hey there i created a little slider :

http://jsfiddle.net/Jtec5/379/

When you hover throw "STOP SLIDE", the autoslide stop´s:

var stopped=false;
$("#slideshow > div:gt(0)").hide();      
setInterval(function() { 
  if(!stopped){
    $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
  }
},  2000);

$('#stopSlide').mouseover(function(){
  stopped=true;
  // how to append new picture here?
})
$('#stopSlide').mouseout(function(){
  stopped=false;
})

My question is how to append a new image to #stopSlide while there is a mousover, like i wrote in my code.. anybody could help me in this case?

Greetings!!

Answer 1

Check out the updated fiddle at http://jsfiddle.net/Jtec5/381

I've added the following in the mouseover callback

template = $('<div></div>')
  .hide()
  .append(
      $('<img>').attr({ src : imageUrl })
  )

$("#slideshow").append(template);

The code creates a div and appends an img element with src=imageUrl to it. You'd need to set imageUrl variable to the url of the image you want to insert just before the template assignment. The image is added right before the current element and would show up in the following loops.