自动启动照片滑动答案

【问题标题】：Photoswipe automatically initiated自动启动照片滑动
【发布时间】：2017-11-27 09:01:27
【问题描述】：

（我正在开发 symfony 2.3 以供参考）

加载我的页面时，photoswipe 会自动启动我的图像，而不会被我自己激活。所以屏幕变暗了，图片在中间弹出，我可以左右滑动但我一开始看不到我的页面。打开页面时，图片只是隐藏了所有内容。

我希望能够像在example 中一样通过触摸图像来激活它

我已经为我的项目设置了photoswipe，并相应地遵循了有关files实施的文档

我以这种方式初始化了我的 JS（请注意，我没有在 JS 中添加我的 imgs，我使用 twig 循环将它们添加到我的数据库中）

var items = [];
var images = $('.fiche-vehicule-image img');

$.each(images, function () {
    items.push({
        src: $(this).attr('src'),
        w: 200,
        h: 200
    });
});
var options = {};
var pswpElement = document.querySelectorAll('.pswp')[0];
var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
gallery.init();

这是我的 html，其中我的幻灯片（与引导程序一起使用）是：

<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <div class="fiche-vehicule-image carousel-inner">
        {% for photo in vehicule.photos %}
            <div class="item {% if loop.first %}active{% endif %}">
              <img src="{{ photo.imgLarge }}" class="img-responsive">
            </div>
        {% endfor %}
    </div>
</div>

最后，为了完成这项工作，我在上面显示的轮播代码的html.twig 中实现了pswp 代码：第 2 步：将 PhotoSwipe (.pswp) 元素添加到 DOM 来自doc

【问题讨论】：

也许它会自动启动，因为您的网址包含哈希值，例如/#&gid=1&pid=1？顺便说一句，作为替代方案，您可以尝试 fancyBox，设置和使用更容易，请参阅 - codepen.io/fancyapps/pen/qVNXrZ?editors=1010
@Janis 嗨，实际上它包含 # 值是的，我猜是 photoswipe 实现了它们。另外那不是你的产品fancyBox吗？它看起来不错，但它不是免费的，因为 photoswipe 是
是的，我是。抱歉，我可能应该提到这一点。
@janis 没关系。这对我没有多大帮助^^'
好吧，如果我理解正确的话，你必须手动构建自定义js文件，不包括hash模块。

标签： javascript photoswipe

【解决方案1】：

好的，我终于找到了问题的答案。我添加了这一行以使其正常工作。

$('.fiche-vehicule-image').on('click', function () {

所以完整的js是这样的

$('.fiche-vehicule-image').on('click', function () {
        var items = [];
        var images = $('.fiche-vehicule-image img');

        $.each(images, function () {
            items.push({
                src: $(this).attr('src'),
                w: 200,
                h: 200
            });
        });
        var options = {};
        var pswpElement = document.querySelectorAll('.pswp')[0];
        var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
        console.log(gallery);
        gallery.init();
    });

【讨论】：