Create a Slideshow using jQuery

Create a Slideshow using jQuery

Designing a slideshow using jQuery requires less effort and less code size. This slideshow has been made with jQuery. CSS style also needed for the image container and HTML code for the number of images.

From CSS to javascript, all are shared here

        <style type="text/css">
        div#slideshow
        {
            position: relative;
            width: 510px !important; /*width500*333*/
            height: 343px !important; /*height*/
        }
        div#slideshow div
        {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 100;
            filter: alpha(opacity=0);
            text-align: center;
        }
        div#slideshow div.active
        {
            z-index: 102;
            filter: alpha(opacity=100);
        }
        div#slideshow div.last-active
        {
            z-index: 101;
        }
    </style>
    <body>
    <div id="slideshow">
        <div class="active">
            <img src="../gallery/flower/four.jpg" alt="" /></div>
        <div>
            <img src="../gallery/flower/one.jpg" alt="" /></div>
        <div>
            <img src="../gallery/flower/three.jpg" alt="" /></div>
        <div>
            <img src="../gallery/flower/two.jpg" alt="" /></div>
    </div>

    <script type="text/javascript">
    function slideSwitch() {
        var _active = $('#slideshow div.active');
        if ( _active.length == 0 )_active = $('#slideshow div:last');
        var _next = _active.next().length ? _active.next(): $('#slideshow div:first');
        _active.addClass('last-active').animate({opacity : 0.0}, 2500);
        _next.css({opacity: 0.0}).addClass('active').animate({opacity: 1.0}, 1500, function() {
            _active.removeClass('active last-active');
        });
    }
    $(function() {
        playSlideshow =  setInterval( slideSwitch,6000 );
    });
    </script>
    </body>
    
Please note that
  1. all these images are under crative common license. These images are copied from http://www.flickr.com/photos/courtneymcgough/3684050699/in/photostream/.
  2. If the number of images are huge, it will be not wise to load all images in the memory. In that scenario, the code need to be modified.
  3. For reference, you can go http://jonraasch.com/blog/a-simple-jquery-slideshow.

No  Responses to "Create a Slideshow using jQuery "

Leave a Reply