SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2010
    Posts
    193
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    simple slideshow question

    i used this code for a slideshow

    http://snook.ca/archives/javascript/...uery-slideshow

    and it works great. snook.cs uses this code:
    Code HTML4Strict:
    <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>

    Code JavaScript:
    $(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?

    Code HTML4Strict:
    <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>

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

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    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

    Code:
    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. #3
    SitePoint Zealot
    Join Date
    Aug 2010
    Posts
    193
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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..


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •