Simple slideshow question

JavaScript
1

i used this code for a slideshow

and it works great. snook.cs uses this code:


<div class="fadein">
  <img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg">
  <img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg">
  <img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg">
</div>



$(function(){
    $('.fadein img:gt(0)').hide();
    setInterval(function(){
      $('.fadein :first-child').fadeOut()
         .next('img').fadeIn()
         .end().appendTo('.fadein');},
      3000);
});

worked great!

then i wanted to overlay text on the img. so i wanted the slideshow to transition over divs with imgs inside. so i thought all i had to do is change the html and js to the below example, but it blew up on screen. What did i miss?


<div class="fadein">
   <div>
       <img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg">
   </div>
   <div>
        <img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg">
    </div>
    .
    .
    .
</div>



$(function(){
    $('.fadein div:gt(0)').hide();
    setInterval(function(){
      $('.fadein :first-child').fadeOut()
         .next('div').fadeIn()
         .end().appendTo('.fadein');},
      3000);
});
2

Hm, the script is creating extra, empty div elements that it then scrolls through. I don’t know enough jQuery to fix that (though I tried a few experiments). In lieu of someone fixing that for you, a CSS alternative might be to put the text to be displayed in the title attribute and then display the title over the top of the image using something like


img:after {
   content: attr(title);
   position: absolute;
}

The image would need position: relative; and the above can be extended to color the text, position it etc.

Edit:

Actually, just tried using content: attr(title) on the images and discovered it didn’t work, as it’s not designed to work on replaced elements like images. Bummer.

3

thanks for doing your own tests!

Yeah that’s what i meant by ‘it blew up on screen’.

it’s such a simple script. i must be over thinking the problem…