一页中有多个 JQuery 库答案

【问题标题】：Multiple JQuery gallery in one page一页中有多个 JQuery 库
【发布时间】：2014-06-16 11:43:07
【问题描述】：

我正在使用基于 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 函数以接受一个文本参数。我该怎么做？

【问题讨论】：

您不能对不同的元素使用相同的 ID。整个 html 页面的 ID 应该是唯一的。
同意。这就是为什么我要使用两个不同的 ID。但是如何修改 $rgGallery 以解决多个 ID 并识别页面中的多个画廊。
试试这个var $rgGallery = $('#rg-gallery1, #rg-gallery2')
这只是在页面上显示多个画廊。但是如果我在gallery1中滑动图片，同样的事情会在gallery2中自动发生
用更多信息和进度更新了问题。

标签： jquery html css image-gallery

【解决方案1】：

我解决了这个问题。现在我可以在单个页面上显示多个画廊。

在“响应式图片库”插件中找到 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>

【讨论】：