Question

I’ve been having some issues with a pagination widget that I wrote in jQuery. Basically as the slideshow switches images and captions the pagination shifts moves an indicator along. The code works perfectly in FireFox but not in chrome, IE, Opera. Here’s the jQuery.

function autoSlideshow(mode) {
        var currentImage = $('#gallery li.visible');                                      //Determine which slide is visible
        var currentCaption = $('#caption li.visible');
        var currentSlide = $('#controls a.pagination.visible');     

        if(mode == -1){
            var nextImage = currentImage.next().length ? currentImage.next() :              //Determine the next slide
                        currentImage.siblings(':first');        
            var nextCaption = currentCaption.next().length ? currentCaption.next() :         
                        currentCaption.siblings(':first');
           var nextSlide = currentSlide.next().length ? currentSlide.next() :         
                        currentSlide.siblings(':eq(1)');
        }
        else{
            var nextImage = $('#gallery li:eq('+mode+')');
            var nextCaption = $('#caption li:eq('+mode+')');
            var nextSlide = $('#controls a.pagination:eq('+mode+')');
        }  

        currentImage.fadeOut(250).removeClass('visible');
        nextImage.fadeIn(250).addClass('visible');  
        currentCaption.fadeOut(250).removeClass('visible');
        nextCaption.fadeIn(250).addClass('visible');
       currentSlide.css('background-image','url(images/controls/page.png').removeClass('visible');
        nextSlide.css('background-image','url(images/controls/current.png').addClass('visible');

    }

And here’s the html to go with it.

<div id="slideshow">
            <ul id="gallery">
                <li><img src="images/slideshow/waves.png" alt="Sunset"/></li>
                <li><img src="images/slideshow/whale.jpg" alt="Whale" /></li>
                <li><img src="images/slideshow/maldives.jpg" alt="Maldives" /></li>
                <li><img src="images/slideshow/birdflock.jpg"  alt="Flock of Birds" /></li>
                <li><img src="images/slideshow/bugatti.jpg" alt="Bugattis" /></li>
                <li><img src="images/slideshow/dumbanddumber.jpg" alt="Dumb and Dumber" /></li>
            </ul>
            <ul id="caption">
                <li class="visible">
                    <h2>Stuff!!</h2>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel magna purus. Suspendisse porttitor velit id leo 
                        bibendum ac commodo odio tincidunt. 
                    </p>
                    <a href="#" class="button">Let's Go</a>
                </li>
                <li>
                    <h2>More Stuff</h2>
                    <p>
                        Suspendisse id libero vel neque faucibus blandit et in eros.Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                        Integer vel magna purus.
                    </p>
                    <a href="#" class="button">Let's Go</a>
                </li>
                <li>
                    <h2>Benefits of Stuff</h2>
                    <p>
                        Sed hendrerit, quam et hendrerit faucibus, mauris arcu ultrices erat, ac placerat risus nulla nec risus.
                        Lorem ipsum dolor sit amet.
                    </p>
                    <a href="#" class="button">Let's Go</a>
                </li>
                <li>
                    <h2>Other Stuff</h2>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel magna purus. Suspendisse porttitor velit id leo 
                        bibendum ac commodo odio tincidunt. 
                    </p>
                    <a href="#" class="button">Let's Go</a>
                </li>
                <li>
                    <h2>Interresting Stuff</h2>
                    <p>
                        Sed hendrerit, quam et hendrerit faucibus, mauris arcu ultrices erat, ac placerat risus nulla nec risus.
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                    </p>
                    <a href="#" class="button">Let's Go</a>
                </li>
                <li>
                    <h2>Heading</h2>
                    <p>
                        Suspendisse id libero vel neque faucibus blandit et in eros.Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                        Integer vel magna purus.
                    </p>
                    <a href="#" class="button">Let's Go</a>
                </li>

            </ul>
            <ul id="controls">
                <a href="#" class="playpause"></a>
                <a href="#" class="pagination"></a>
                <a href="#" class="pagination"></a>
                <a href="#" class="pagination"></a>
                <a href="#" class="pagination"></a> 
                <a href="#" class="pagination"></a> 
                <a href="#" class="pagination"></a>                     
            </ul>

There is a /div to end the slideshow div but I was too lazy to recopy it :p. Thanks for all the help guys!

Mo

Answer 1

alright I figured it out. Instead of directly changing the css I just used the visible class to change the image…the simplest solution really is always the best solution :p. Thanks for your help guys.