Question

我在我的网站meetAnthony.com上将PortfolioJS.com用于水平摄影画廊。

这些画廊适用于我的iMac，但不适用于iPhone，iPad和其他设备。

奇怪的是，第一个画廊在手机上工作。您可以用一根手指轻扫以查看照片库末尾的照片。

问题

画廊2-6没有在移动设备上滑动。过了一会儿，我可以用两根手指轻扫图像。但是花了几分钟。

我希望摄影画廊能够在电脑上滚动并在移动设备上滑动（一根手指）。

解决方案？

我认为PortfolioJS JavaScript使用的是“#gallery”。我认为当我添加更多id（＃gallery-2，＃gallery-3等）时，JavaScript并不支持所有六个画廊。

所以我将第一个画廊从id“#gallery”改为“＃gallery-1”。我用“var gallery”创建了一个包含所有六个图库ID的数组。我不知道这是否有效。我没有iPhone，iPad或移动设备。

包括在头部：

<script>
$(document).ready(function() {
    var p = $("#gallery-1, #gallery-2, #gallery-3, #gallery-4, #gallery-5, #gallery-6").portfolio({
        logger: true,
        loop: false,
        autoplay: false,
        height: "540px",
        width: "100%",
        enableKeyboardNavigation: false,
        lightbox: false,
        showArrows: false

    });
    p.init();
});
</script>

包含在链接的JS中：

// Local variables
var gallery = new Array("#gallery-1", "#gallery-2", "#gallery-3", "#gallery-4", "#gallery-5", "#gallery-6");

var portfolio = this, gallery = this

http://meetanthony.com/script/portfolio.js
meetanthony.com/script/portfolio.pack.min.js

如果有人向PortfolioJS添加数组，有人可以告诉我吗？

感谢您的帮助！

Answer 1

你可以使用一个包含多个画廊的投资组合

<section class="wrapper" >
  <div id="gallery">....</div>                                                                          
  <div id="gallery1" style="display:none">.....</div>
  <div id="gallery2" style="display:none">.....</div>
  <div id="gallery3" style="display:none">.....</div>
  <div id="gallery4" style="display:none">.....</div>
</section>

然后在脚本中

 $("#gallery").html($('#gallery1').html()) //for instance

 var p = $("#gallery").portfolio();
 p.init();

我可以将一个数组添加到PortfolioJS以使用更多的库吗？

1 个答案: