title: Magnific-Popup, Limit items to direct siblings
body: <p>How can I limit magnific-popup gallery to direct siblings? When I open an image from the first .child, I don’t want the images from the second .child to be in the gallery.</p>
  
  <p>The html structure:</p>
  
  <pre><code>&lt;div class="parent"&gt;
      &lt;div class="child"&gt;
          &lt;a class="image-link" href="img/red1.jpg"&gt;&lt;img src="img/red1.jpg"&gt;&lt;/a&gt;
          &lt;a class="image-link" href="img/red2.jpg"&gt;&lt;img src="img/red2.jpg"&gt;&lt;/a&gt;
          &lt;a class="image-link" href="img/red3.jpg"&gt;&lt;img src="img/red3.jpg"&gt;&lt;/a&gt;
          &lt;a class="image-link" href="img/red4.jpg"&gt;&lt;img src="img/red4.jpg"&gt;&lt;/a&gt;
          &lt;a class="image-link" href="img/red5.jpg"&gt;&lt;img src="img/red5.jpg"&gt;&lt;/a&gt;
      &lt;/div&gt;
  
      &lt;div class="child"&gt;
          &lt;a class="image-link" href="img/city1.jpg"&gt;&lt;img src="img/city1.jpg"&gt;&lt;/a&gt;
          &lt;a class="image-link" href="img/city2.jpg"&gt;&lt;img src="img/city2.jpg"&gt;&lt;/a&gt;
          &lt;a class="image-link" href="img/city3.jpg"&gt;&lt;img src="img/city3.jpg"&gt;&lt;/a&gt;
          &lt;a class="image-link" href="img/city4.jpg"&gt;&lt;img src="img/city4.jpg"&gt;&lt;/a&gt;
          &lt;a class="image-link" href="img/city5.jpg"&gt;&lt;img src="img/city5.jpg"&gt;&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>how I initialize Magnific-Popup:</p>
  
  <pre><code>$('.child').magnificPopup({ 
      delegate: '.image-link',
      type:'image', 
      gallery: {
          enabled: true
      }
  });
  </code></pre>