JQuery の画像スライドショウでグループ化したい

Question

「Magnific Popup」というスライドショウプラグインを利用しようとしています。
http://dimsemenov.com/plugins/magnific-popup/documentation.html
を参考にして設定をしようとしています。
例えば
ブログみたいな感じで数ブロックにわたって個別のスライドショウを複数設定する場合に

<div class="parent-container">
  <a href="path-to-image-1.jpg">Open popup 1</a>
  <a href="path-to-image-2.jpg">Open popup 2</a>
  <a href="path-to-image-3.jpg">Open popup 3</a>
</div>
$('.parent-container').magnificPopup({
delegate: 'a', 
  type: 'image',
  gallery: { 
    enabled:true
  }
});

とすれば良いと考えました。
しかし

<div class="block">
  <div class="parent-container">
    <a href="path-to-image-1.jpg">Open popup 1</a>
    <a href="path-to-image-2.jpg">Open popup 2</a>
    <a href="path-to-image-3.jpg">Open popup 3</a>
  </div>
</div>
<div class="block">
  <div class="parent-container">
    <a href="path-to-image-4.jpg">Open popup 1</a>
    <a href="path-to-image-5.jpg">Open popup 2</a>
    <a href="path-to-image-6.jpg">Open popup 3</a>
  </div>
</div><div class="block">
  <div class="parent-container">
    <a href="path-to-image-7.jpg">Open popup 1</a>
    <a href="path-to-image-8.jpg">Open popup 2</a>
    <a href="path-to-image-9.jpg">Open popup 3</a>
  </div>
</div>

としたとき。
全ての画像がまとまって取り込まれて
１つのギャラリーとして表示されてしまいます。
:eqとかを利用して個別のブロックを識別しながら
表示できればと考えていますが、うまくいきません。
宜しくお願いいたします。

（追記）
例えば、ブロック（領域）が5つあるとします。各々の領域に複数の画像ギャラリー用の写真が設定されています。
ブロックAに3枚 →3枚のギャラリー作成
ブロックBに4枚 →4枚のギャラリー作成、
ブロックCに5枚 →5枚のギャラリー作成、
ブロックDに4枚 →4枚のギャラリー作成、
ブロックEに7枚 →7枚のギャラリー作成、
のように5種類のスライドショウを設定するというのが、目標になります。

Comments

[m.ts10806]

私の理解不足かもしれませんが、質問内容のみではどう動けばゴールになるのかがちょっと見えませんでした。その辺りを追記いただけますか？

[hidepon]

すみません。記述中に誤って中途半端に投稿されてしまいました。例えば、ブロック（領域）が5つあるとします。各々の領域に複数の画像ギャラリー用の写真が設定されています。ブロックAに3枚、ブロックBに4枚、ブロックCに5枚、ブロックDに4枚、ブロックEに7枚とします。5種類のスライドショウを設定するというのが、ゴールになります。説明がうまくいっているか不安ですが・・・よろしくお願いいたします

[m.ts10806]

なるほど、なんとなく分かりました。ただ、こちらでは埋もれてしまう可能性があるので質問本文に追記願います。

[hidepon]

有難うございます。追記の件、了解です。いろいろ試行錯誤しているんですが・・・よろしくお願いいたします。

Answer 1

結果は同じですが下記のような方法で実現可能と思います。
（ひとまず思いつくもの2パターン）

Classをそれぞれに振る

Class名を１スライド１つにしてそれぞれに直で指定します。

<div class="block">
  <div class="parent-container1">
    <a href="path-to-image-1.jpg">Open popup 1</a>
    <a href="path-to-image-2.jpg">Open popup 2</a>
    <a href="path-to-image-3.jpg">Open popup 3</a>
  </div>
</div>
<div class="block">
  <div class="parent-container2">
    <a href="path-to-image-4.jpg">Open popup 1</a>
    <a href="path-to-image-5.jpg">Open popup 2</a>
    <a href="path-to-image-6.jpg">Open popup 3</a>
  </div>
</div><div class="block">
  <div class="parent-container3">
    <a href="path-to-image-7.jpg">Open popup 1</a>
    <a href="path-to-image-8.jpg">Open popup 2</a>
    <a href="path-to-image-9.jpg">Open popup 3</a>
  </div>
</div>

$('.parent-container1').magnificPopup({
delegate: 'a', 
  type: 'image',
  gallery: { 
    enabled:true
  }
});
$('.parent-container2').magnificPopup({
delegate: 'a', 
  type: 'image',
  gallery: { 
    enabled:true
  }
});
$('.parent-container3').magnificPopup({
delegate: 'a', 
  type: 'image',
  gallery: { 
    enabled:true
  }
});

この方法だとIDでも良いかなと思いました。

eachでブロック内のスライドをそれぞれに。

.block -> .parent-container という構成に必ずなっていることが前提
ブロックをループしてそれぞれにmagnificPopupを当てます。

※提示のHTMLと同じです

<div class="block">
  <div class="parent-container">
    <a href="path-to-image-1.jpg">Open popup 1</a>
    <a href="path-to-image-2.jpg">Open popup 2</a>
    <a href="path-to-image-3.jpg">Open popup 3</a>
  </div>
</div>
<div class="block">
  <div class="parent-container">
    <a href="path-to-image-4.jpg">Open popup 1</a>
    <a href="path-to-image-5.jpg">Open popup 2</a>
    <a href="path-to-image-6.jpg">Open popup 3</a>
  </div>
</div><div class="block">
  <div class="parent-container">
    <a href="path-to-image-7.jpg">Open popup 1</a>
    <a href="path-to-image-8.jpg">Open popup 2</a>
    <a href="path-to-image-9.jpg">Open popup 3</a>
  </div>
</div>

    $(".block").each(function(){
        $(this).children('.parent-container').magnificPopup({
        delegate: 'a', 
          type: 'image',
          gallery: { 
            enabled:true
          }
        })
    })

Comments

[hidepon]

有難うございます。うまくいきました。同じように考えてやってみてはいたんですが、やはりレベルの差を感じます。本当に有難うございました。