Question

I'm using the following tool for my gallery and I've created the following HTML code:

 <div class="galerie">
   <div><a class="popup" href="path-to-large-image"><img src="path-to-thumb"><p>legend</p></a></div>
   <div><a class="popup" href="path-to-large-image"><img src="path-to-thumb"><p>legend</p></a></div>
   <div><a class="popup" href="path-to-large-image"><img src="path-to-thumb"><p>legend</p></a></div>
 </div>

Now I'd like to group these elements into one gallery. I've tried with this JavaScript code:

 $('.popup').magnificPopup({
     delegate: 'a',
     type: 'image'
 });

Unfortunately this doesn't work. Can anyone help?

Was it helpful?

Solution 2

Try

 $('.galerie').magnificPopup({
 delegate: 'a',
 type: 'image'
 });

You should call the all gallery not a single image.

OTHER TIPS

If anyone wants to know how to set up groups in magnific popup you need to use the 'gallery' option:

$('.images').magnificPopup({
    type: 'image',
    gallery{
        enabled: true
    }
});

Source: http://dimsemenov.com/plugins/magnific-popup/documentation.html#gallery

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top