我正在使用基于JQuery的“响应式图像库”。
链接到实际的画廊代码：
http://tympanus.net/Tutorials/ResponsiveImageGallery/
http://tympanus.net/codrops/2011/09/20/responsive-image-gallery/
我试图在单个页面中包含两个图库，并使用一个按钮切换这两个画廊。
假设gallery1和gallery2，其中gallery1具有活动类，因此gallery2具有display：none;属性。
如何使用此特定插件完成此操作？
gallery.js文件具有以下代码：
// gallery container
var $rgGallery = $('#rg-gallery')
其中其地址为图库的ID块。因此，如果我使用：
<div id="rg-gallery">
//gallery code here
</div>
<div id="rg-gallery">
// gallery code here
<div>
那就行不通了
所以我尝试了上课。但是有了这个：
<div class="rg-gallery">
//gallery code here
</div>
<div class="rg-gallery">
// gallery code here
<div>
只有第二个画廊有效，第一个画廊无效。
因此，我认为我需要为不同的图库块赋予不同的ID，如下所示：
<div id="rg-gallery1">
//gallery code here
</div>
<div id="rg-gallery2">
// gallery code here
<div>
但是，然后我如何调整gallery.js代码以解决多个画廊块。
现在仅使用以下代码处理单个画廊：
var $rgGallery = $('#rg-gallery')
我是JQuery的初学者。任何帮助表示赞赏。
编辑：
我有一个解决这个问题的想法。在Gallery.js的末尾有此函数调用：
Gallery.init();
我认为，解决问题的一种方法是传递参数，如下所示：
Gallery.init("#rg-gallery1");
Gallery.init("#rg-gallery2");
但是我该如何修改init函数，如下所示：
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
}
我想修改INIT函数以现在接受一个文本参数。我怎么做？
最佳答案
我解决了问题。现在，我可以在单个页面上显示多个画廊。
在“响应式图库”插件中找到gallery.js文件（链接到问题中的插件）。
步骤1）删除$ rgGallery
var $rgGallery = $('#rg-gallery'),
$esCarousel = $rgGallery.find('div.es-carousel-wrapper'),
$items = $esCarousel.find('ul > li'),
itemsCount = $items.length;
因此它将显示如下：
//var $rgGallery = $('#rg-gallery'),
var $esCarousel = $rgGallery.find('div.es-carousel-wrapper'),
$items = $esCarousel.find('ul > li'),
itemsCount = $items.length;
第2步）剪切这部分代码（请不要粘贴）。
第3步：从
Gallery =（function（）到Gallery.init（）;
在名为SelectRgGallery的新函数中，该函数接受一个参数，如下所示-
SelectRgGallery = function(rgTemp) {
Gallery = (function() {
//existing code
})();
Gallery.init();
}
步骤4）在打开SelectRgGallery函数之后，粘贴复制的代码。
并在粘贴的代码上方添加一个新代码，以声明$ rgGallery变量。我们将接受的参数存储在$ rgGallery变量中。
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();
}
步骤5）在index.html中，将以下脚本添加到页脚中。 （考虑到index.html中有两个图库）。
<script>
jQuery(document).ready(function ($) {
SelectRgGallery("#rg-gallery1");
SelectRgGallery("#rg-gallery2");
});
</script>