Magnific-popup: Multiple grouped galleries on the same page

Created on 8 May 2013  路  2Comments  路  Source: dimsemenov/Magnific-Popup

Hello,
i have multiple wordpress posts on the same page.

<article class="hentry" id="post-1234">
  <h1><a href="http://example.com/post/">Title</a></h1>
  <div class="entry-content">
    <a href="http://google.com/">Normal link</a>
    <a href="http://example.com/img1.jpg"><img src="http://example.com/img1_thumb.jpg"></a>
    <a href="http://example.com/img2.jpg"><img src="http://example.com/img2_thumb.jpg"></a>
  </div>
</article>

Actually I'm trying to replace the following code:

$('.hentry').each(function() {
      var $this = $(this);
      $thisID = $this.attr('id');
      $this.find('a[href$=".jpg"], a[href$=".jpeg"], a[href$=".gif"], a[href$=".png"]').attr('rel','shadowbox['+$thisID+']');
      Shadowbox.init();  
    });    

I tried to use the following to add Magnific-Popup to image links Wordpress posts

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

But the gallery is spread over "all links" on the page, across all .hentry. But i want a post specific gallery (multiple gallerys for each .hentry) only for image links.

Most helpful comment

$('.hentry').each(function() {
    $(this).magnificPopup({
        delegate: 'a', 
        type: 'image',
        gallery:{enabled:true}
    });
});   

All 2 comments

$('.hentry').each(function() {
    $(this).magnificPopup({
        delegate: 'a', 
        type: 'image',
        gallery:{enabled:true}
    });
});   

Thanks it works for me too.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

softshape picture softshape  路  4Comments

wojto picture wojto  路  4Comments

samholmes picture samholmes  路  5Comments

alexcroox picture alexcroox  路  4Comments

influxweb picture influxweb  路  4Comments