Member Avatar for Surfsup

I have this simple slideshow script and just need to make the divs fade in/out when the user clicks 'prev' and 'next' arrow. Currently there is no effect atall which looks a bit harsh. I'm sure this can't be too difficult - however, I'm new to this stuff - Thanks.

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>A Basic Slideshow</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <style type="text/css">
    #slideshow {
        border: 1px solid #ccc;
        padding: 10px;
        width: 600px;
        height: 280px;
        }

        #slideshow ul {
            position: relative;
            list-style: none;
            padding: 0;
            margin: 0;
            }

            #slideshow ul li {
                position: absolute;
                top: 0;
                left: 0;
                display: none;
                }

                #slideshow ul li.current {
                    display: block;
                    }

            #slideshow li img {
                float: left;
                margin-right: 20px;
                }


        #slideshow #controls {
            width: 100%;
            text-align: right;  
            }

    </style>
    </head>

    <div id="slideshow">

        <div id="controls">
    <a href="javascript:void(0)" id="prev">&laquo;</a> <span id="num">1</span> of <span id="total"></span> <a href="javascript:void(0)" id="next">&raquo;</a>
        </div>

        <ul>
            <li><img src="img/1.jpg" width="387" height="258" alt="" /><p>Phasellus</p></li>
            <li><img src="img/2.jpg" width="387" height="258" alt="" /><p>Fusce libero quam</p></li>
            <li><img src="img/3.jpg" width="387" height="258" alt="" /><p>Aliquam at semper nisi.</p></li>
        </ul>

    </div>



    <script type="text/javascript">
    (function($) {
        var len = $("#slideshow li").length;
        var x = 0;
        $("#slideshow #total").text(len);
        $("#slideshow li:eq(0)").addClass("current");
        $("#slideshow li").each(function() {
            $(this).attr('rel', x);
            x++
        }); 
        $("#next").click(function() {
            var current = $("#slideshow .current");
            var next = parseFloat(current.attr('rel'))+1;
            if(next==len) {
                return false;
            }
            $("#num").text(parseFloat(next)+1);
            current.removeClass('current');
            $("#slideshow li").each(function() {
                if($(this).attr('rel')==next) {
                    $(this).addClass('current');
                }
            });                                 
        });
        $("#prev").click(function() {
            var current = $("#slideshow .current");
            var prev = parseFloat(current.attr('rel'))-1;
            if(prev<0) {
                return false;
            }
            $("#num").text(parseFloat(prev)+1);
            current.removeClass('current');
            $("#slideshow li").each(function() {
                if($(this).attr('rel')==prev) {
                    $(this).addClass('current');
                }
            });                                 
        });                 
    })(jQuery)
    </script>
    </body>
    </html>

Thanks

Dan

  • 2 Contributors
  • 1 Reply
  • 270 Views
  • 3 Hours Discussion Span
  • Latest Post Latest Post by Member #905211

Dani AI

Generated

— the simplest, least-invasive change is to swap the class-only toggle in your next/prev handlers for a short fade sequence. was correct to point to jQuery’s fading helpers; the key details that make the UX smooth are (1) stopping queued animations, (2) doing the hide and show in callbacks so classes update at the right time, and (3) keeping the slides absolutely stacked so fades overlap.

Example (replace the part that simply removes/adds current):

// inside your next/prev handlers
var $items = $('#slideshow li');
var $current = $items.filter('.current');
var $next = $items.eq( desiredIndex ); // compute desiredIndex as you already do

if (!$next.length) return; // guard boundaries

$current.stop(true,true).fadeOut(300, function(){
  $(this).removeClass('current');
});
$next.stop(true,true).fadeIn(300).addClass('current');

// update counter:
$('#num').text( $items.index($next) + 1 );

Notes and troubleshooting:

  • Use .stop(true,true) to prevent animation queues when users click rapidly.
  • Since your slides are position:absolute, fades will overlap correctly; if any jump occurs, ensure the slideshow container has fixed width/height and the lis share the same top/left.
  • For simultaneous crossfade, set the incoming slide’s opacity to 0, show() it, then animate its opacity to 1 while fading out the current.
  • If clicks still produce glitches, gate the controls with an animating flag (set true at fade start, false in the final callback) or disable the controls until the animation completes.

These changes keep your existing structure and only replace the class swap with smooth fades for a much nicer transition.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.