Question

我正在使用＆＃34;响应式图片库＆＃34;基于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函数以接受一个文本参数。我该怎么做？

Answer 1

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

在＆＃34;响应式图片库中找到 gallery.js 文件＆＃34;插件（链接到问题中的插件）。

步骤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）从

中包装代码

图库=（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>

一个页面中有多个JQuery库

1 个答案: