(i'm working on symfony 2.3 for information purpose)
When loading my page, photoswipe launch itself with my images without being activated by myself. So the screen goes dark, the picture pops up in the middle, I can swipe left and right but I can't see my page at first. The picture just hide everything when opening the page.
I would like to be able to activate it by touching the image just like in the example
I have set up photoswipe for my project and followed the doc accordingly regarding the implementation of the files
I initialized my JS this way (note that I didn't add my imgs in the JS, I use a twig loop to add them as they are in my database)
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();
and here is my html where my slideshow (used with bootstrap) is:
<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>
At last, in order to make that work, I implemented the pswp
code in the html.twig
of the carousel code shown above: Step 2: add PhotoSwipe (.pswp) element to DOM from the doc
Ok I finally found an answer to the problem. I added this line in order to make that work.
$('.fiche-vehicule-image').on('click', function () {
so the full js is like that
$('.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();
});