Question

Right now I have this on my page:

<section class="image_slider grid_4">
<nav class="slider_nav"> <a href="#" class="left">&nbsp;</a> <a href="#" class="right">&nbsp;</a> </nav>
<div class="slides">
    <a href="/images/placeholders/800x600/7.jpg" rel="fancybox_gallery1"><img src="/images/placeholders/300x200/7.jpg" alt="" /></a>
    <a href="/images/placeholders/800x600/8.jpg" rel="fancybox_gallery1"><img src="/images/placeholders/300x200/8.jpg" alt="" /></a>
</div>

The js that controls that is this:

/* Sidebar image slider */
$('.image_slider').each(function () {

    /* Functions */
    function resetInterval () {
        clearInterval(imageSliderInterval);
        imageSliderInterval = setInterval(next, 4000);
    }
    function next () {
        $('.image_slider .slides').children(':last').fadeOut(1000, function () {
            $(this).prependTo('.image_slider .slides').fadeIn(1);
        });
    }
    function previous () {
        $('.image_slider .slides').children(':last').fadeOut(1000, function () {
            $(this).prependTo('.image_slider .slides').fadeIn(1);
        });
    }

    /* Initialize */
    var imageSliderInterval;
    resetInterval();

    /* Controls */
    $('.image_slider .left').click(function () {
        next();
        resetInterval();
    });
    $('.image_slider .right').click(function () {
        previous();
        resetInterval();
    });

});

Any ideas how I can have multiple instances of the image slide show, with separate controls on each image gallery?

The original code came from this template if you want to take a look in the flesh – scroll down to the header “Nam imperdiet lacinia”:

http://travel.equiet.sk/hotel.html

Answer 1

Following should insulate instances. The key for situations like this is defining the current main element using this within the each loop and using find() within main element to localize search for other elements to current instance only.

/* Sidebar image slider */
$('.image_slider').each(function () {

    var $slider=$(this), $slides= $slider.find('.slides'), imageSliderInterval;

    /* Functions */
    function resetInterval () {
        clearInterval(imageSliderInterval);
        imageSliderInterval = setInterval(next, 4000);
    }
    function next () {
        $slides.children(':last').fadeOut(1000, function () {
            $(this).prependTo($slides).fadeIn(1);
        });
    }
    function previous () {
        $slides.children(':last').fadeOut(1000, function () {
            $(this).prependTo($slides).fadeIn(1);
        });
    }

    /* Initialize */

    resetInterval();

    /* Controls */
    $slider.find('.left').click(function () {
        next();
        resetInterval();
    });
    $slider.find('.right').click(function () {
        previous();
        resetInterval();
    });

});