StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Give your <code><div></code> elements a "class", and have the script apply itself to all elements with that class.</p> <pre><code><div id="galleria2" class='galleria' interval="1000"> </code></pre> <p>Then in the script:</p> <pre><code>$('div.galleria').each(function() { // whatever }); </code></pre> <p><s>You didn't post the JavaScript code so the actuality might be a little different.</s></p> <p><em>edit</em> — OK now that the code has been posted, I'd restructure it like this:</p> <pre><code>$(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(); }); </code></pre> <p>By nesting the functions inside the ".each()" iterator, they'll operate on their own assigned "galleria" instance.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload