Question

I have the following question:

I am working on a JQuery script that turns some HTML into a “Slider”. No problem so far, everything’s working smoothly.

The thing is is, if I want to run two or more “sliders” at the same time, of course they all “act” the same.

If I want them to act differently at the same time, can I “add” the script several times in the HTML-Code (, or do I have to add a “.each()” function, to the script?

HTML-Code:

<div id="galleria1" interval="1000">
            <a href="#" class="show" >
                <img width="640" height="450" rel="Slider-Image"src="a.jpg" />
            </a>
            ...
</div>

<div id="galleria2" interval="1000">
            <a href="#" class="show" >
                <img width="640" height="450" rel="Slider-Image"src="b.jpg" />
            </a>
            ...
</div>

Would be cool of any of you knows a solution to this!

Thanks, Mario.

EDIT:

Here the Script:

$(document).ready(function()
{
    //checks if page is completely loaded
    slideshow();
});


function slideshow()
{
    //Sets all pictures opacity to 0
    $('#galleria a').css({opacity:0.0});
    //Sets the first picture's opacity to 1
    $('#galleria a:first').css({opacity:1.0});
    //Calls the gallery() function to run the slideshow, number gives time till next 'slide' im milliseconds
    setInterval('nextPicture()', 1000);
}

function nextPicture()
{
    //If no image hast the class 'show', takes the first picture
    var current = ($('#galleria a.show')? $('#galleria a.show') : $('#galleria a:first'));
    //Get next image, if reached the end of slideshow, starts from the begining
    var next = ((current.next().length == 0) ? $('#galleria a:first') : current.next()); 
    //Runs Animation and makes next picture visible, number gives fade in time
    next.css({opacity: 0.0})
        .addClass('show')
        .animate({opacity: 1.0}, 1000);
    //Hides last picture
    current.animate({opacity: 0.0},1000)
        .removeClass('show');
}

-> used the same id=”galleria” for both so far. (already changed this in the html above)

Thanks for the answers so far!

Answer 1

Give your <div> elements a “class”, and have the script apply itself to all elements with that class.

<div id="galleria2" class='galleria' interval="1000">

Then in the script:

$('div.galleria').each(function() {
  // whatever
});

You didn’t post the JavaScript code so the actuality might be a little different.

edit — OK now that the code has been posted, I’d restructure it like this:

$(document).ready(function() {
  $('.galleria').each(function() {
    var $galleria = $(this), $anchors = $galleria.find('a'), current = 0;

    function slideshow() {
      //Sets all pictures opacity to 0
      $anchor.css({opacity:0.0});
      //Sets the first picture's opacity to 1
      $anchors.eq(0).css({opacity:1.0});
      //Calls the gallery() function to run the slideshow, number gives time till next 'slide' im milliseconds
      setInterval(nextPicture, 1000);
    }

    function nextPicture() {
      var $prev = $anchors.eq(current);

      //If no image hast the class 'show', takes the first picture
      current = (current + 1) % $anchors.length;

      //Get next image, if reached the end of slideshow, starts from the begining
      var next = $anchors.eq(current);

      //Runs Animation and makes next picture visible, number gives fade in time
      next.css({opacity: 0.0})
        .addClass('show')
        .animate({opacity: 1.0}, 1000);

      //Hides last picture
      $prev.animate({opacity: 0.0},1000)
        .removeClass('show');
    }

    slideshow();
});

By nesting the functions inside the “.each()” iterator, they’ll operate on their own assigned “galleria” instance.