单击按钮时初始化jQuery图库

Question

我正在使用此jQuery脚本在我的页面https://www.jqueryscript.net/gallery/Responsive-Gallery-Thumbnail-Nav-jQuery.html上包含图库

我有一个动态数量的画廊，除了一个页面加载外，所有的都是隐藏的。每个图库都有一个关联的“查看图库”按钮。当用户单击单个图库的视图按钮时，该图库将显示，所有其他图库将被隐藏。

一切正常，除了缩略图导航。页面加载时显示的初始库将正确显示。所有其他图库都可以使用，但导航中的缩略图只有25px宽。如果我调整浏览器的大小(即使是1px)，缩略图的大小也会调整到正确的宽度。

下面是我初始化图库的方法：

$('.service-slider').each(function(key, item) {
    var slideIdName = 'slider' + key;

    this.id = slideIdName;

    var sliderID = '#' + slideIdName;

    $(sliderID).gallery({
        singleLine: true,
        height: 650,
        items: 4,
        480: {
        items: 2,
        height: 400,
        thmbHeight: 100
        },
        768: {

        items: 4,
        height: 500,
        thmbHeight: 120
        },
        600: {

        items: 3
        },
        992 : {

        items: 5,
        height: 350
        }
    });
});

我还尝试将上面的代码设置为一个函数，并在每次单击“查看图库”按钮时运行该函数。这不管用。

Answer 1

$('.container-gallery').gallery({
  height: 650,
  items: 6,
  480: {
    items: 2,
    height: 400,
    thmbHeight: 100
  },
  768: {

    items: 3,
    height: 500,
    thmbHeight: 120
  },
  600: {

    items: 4
  },
  992 : {

    items: 5,
    height: 350
  }
});

$('.container-gallery').gallery({
  customControls: {
    prevButton: prevContent,
    nextButton: nextContent
  }
});

您必须单独使用它们，并且不能将它们嵌套在一起使用。

我让它在上工作