Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Dec 2010
    Location
    SoCal
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need help with simple slideshow crossfade

    Hi,

    I'm creating a simple slideshow. I have it working, but now I also want the photos to crossfade. I can't find any jquery plugin that I can get to work (and I have tried many). Any suggestions?

    I'm really new to this, so as simple as possible would be great!
    Thanks.

    Here's my current code:

    Code:
    <style>
    
    #slideshow {
        position:relative;
        height:525px;
     width: 950px;
    }
    #slideshow img {
        position:absolute;
        top:0px;
        left:0px;
    }
    .style32 {color: #333333
    }
    </style>
    <script src="jquery.js"></script>
    <script>
    function init() {
    $('#slideshow img').hide();

    $('#slideshow img:first').show();
    }
    function slide() {
    var $top = $('#slideshow img:visible');

    var $next;
    if($top.next().length > 0)
    $next = $top.next();

    else
    $next = $('#slideshow img:first');

    $top.hide();

    $next.show();
    }

    $(document).ready(function() {
    init();
    setInterval( "slide()", 3000 );
    });
    </script>
    Code:
    <div class="style32" id="slideshow">
        <img src="images/slides/1.jpg" width="950" height="525" />
    	<img src="images/slides/2.jpg" width="950" height="525" />
    	<img src="images/slides/3.jpg" width="950" height="525" />
    	<img src="images/slides/4.jpg" width="950" height="525" />
    	<img src="images/slides/5.jpg" width="950" height="525" />
    	<img src="images/slides/6.jpg" width="950" height="525" />
    	<img src="images/slides/7.jpg" width="950" height="525" />
    </div>

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,951
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Have a look here for one approach.


  •  

    Posting Permissions

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