(我正在研究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我的幻灯片(与bootstrap一起使用)是:
<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步:添加PhotoSwipe(.pswp)元素到来自doc
答案 0 :(得分: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();
});