Multiple JQuery gallery in one page

Question

I am using "Responsive Image Gallery" based on JQuery.

Links to the actual Gallery Code: http://tympanus.net/Tutorials/ResponsiveImageGallery/ http://tympanus.net/codrops/2011/09/20/responsive-image-gallery/

I am trying to have two gallery in single page and toggle these two galleries using a button. Lets say gallery1 and gallery2 where gallery1 has active class and thus gallery2 is with display:none; property.

How do I accomplish that with this particular plugin?

The gallery.js file has this code:

// gallery container
    var $rgGallery = $('#rg-gallery')

Where its addressing an ID block of gallery. Thus if I use:

<div id="rg-gallery">
//gallery code here
</div>

<div id="rg-gallery">
// gallery code here
<div>

then it won't work.

So I tried with classes. But with this:

<div class="rg-gallery">
//gallery code here
</div>

<div class="rg-gallery">
// gallery code here
<div>

only the second gallery works and the first one doesn't.

Therefore I think that I need to give different ID to different gallery blocks as follows:

<div id="rg-gallery1">
//gallery code here
</div>

<div id="rg-gallery2">
// gallery code here
<div>

But then how do I adjust the gallery.js code to address multiple gallery blocks. It's just addressing a single gallery at the moment with this code:

var $rgGallery = $('#rg-gallery')

I am a beginner at JQuery. Any help is appreciated.

EDIT:

I have an idea to deal with this problem. At the end of Gallery.js there is this function call:

Gallery.init();

I think, one way to solve the problem would be to pass parameters as follows:

Gallery.init("#rg-gallery1");
Gallery.init("#rg-gallery2");

But how do I modify the init function which is as follows:

Gallery = (function() {
    // index of the current item
    var current = 0, 
    // mode : carousel || fullview
    mode            = 'carousel',
    // control if one image is being loaded
    anim = false,
    init = function() {

       // init code here
    }

I want to modify INIT function to accept one text parameter now. How do I do that?

Answer 1

I solved the problem. Now I can display multiple galleries on single page.

Find gallery.js file in the "Responsive Image Gallery" Plugin (Link to plugin in the question).

Step 1) Remove $rgGallery

var $rgGallery = $('#rg-gallery'),

$esCarousel = $rgGallery.find('div.es-carousel-wrapper'),

$items = $esCarousel.find('ul > li'),

itemsCount = $items.length;

So it will appear as follows:

//var $rgGallery = $('#rg-gallery'),

var $esCarousel = $rgGallery.find('div.es-carousel-wrapper'),

$items = $esCarousel.find('ul > li'),

itemsCount = $items.length;

Step 2) Cut this part of code (don't paste it yet).

Step 3) Wrap the code from

Gallery = (function() to Gallery.init();

inside a new function called SelectRgGallery which accepts one parameter as follows -

SelectRgGallery = function(rgTemp) {

Gallery = (function() {

//existing code

})();

Gallery.init();

}

Step 4) Paste the copied code just after opening the SelectRgGallery function.

And add a new code just above the pasted code to declare $rgGallery variable. We will store the accepted parameter inside $rgGallery variable.

SelectRgGallery = function(rgTemp) {

var $rgGallery = $(rgTemp); // store accepted parameter

var $esCarousel = $rgGallery.find('div.es-carousel-wrapper'),

$items = $esCarousel.find('ul > li'),

itemsCount = $items.length;

Gallery = (function() {

//existing code

})();

Gallery.init();

}

Step 5) In index.html, add the following script in the footer. (considering we have two galleries in index.html).

<script>

jQuery(document).ready(function ($) {

SelectRgGallery("#rg-gallery1");
SelectRgGallery("#rg-gallery2");

});

</script>