Photoswipe自动启动

问题描述 投票:0回答:1

(我正在研究symfony 2.3以供参考)

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

example

我希望能够像触摸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>

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

javascript photoswipe
1个回答
0
投票

好的,我终于找到了问题的答案。我添加了这一行,以使这项工作。

$('.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();
    });
© www.soinside.com 2019 - 2024. All rights reserved.