lightbox2で拡大表示をグループごとに表示したい

いつもお世話になっております。

lightbox2で複数枚の拡大表示をした際に、同じdiv内に囲まれているlightboxを一つのグループとして拡大表示をさせたいです。
少し文章で表現しにくいので、ソースを交えながら、、、

lang
1<!-- グループ1 -->
2<div class="box">
3  <a href="img/image-1.jpg" data-lightbox="roadtrip">Image1</a>
4  <a href="img/image-2.jpg" data-lightbox="roadtrip">Image2</a>
5  <a href="img/image-3.jpg" data-lightbox="roadtrip">Image3</a>
6</div>
7
8<!-- グループ2 -->
9<div class="box">
10  <a href="img/image-1.jpg" data-lightbox="roadtrip">Image4</a>
11  <a href="img/image-2.jpg" data-lightbox="roadtrip">Image5</a>
12  <a href="img/image-3.jpg" data-lightbox="roadtrip">Image6</a>
13</div>

上記のようなソースになっているのですが、このまま実行するとグループ1とグループ2の画像が一緒に拡大されて「次へ」のボタンを押すとimage1→2→3→4→5→6とループしてしまいます。

そうではなく、グループ1の画像をクリックすると「image1→2→3→1」と拡大され、グループ2の画像をクリックすると「image4→5→6→4」と表示させたいです。

このように実装するにはどう修正を加えたらよろしいでしょうか？

よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

lang
1<ul> 
2    <li data-group="sample1">sample1</li> 
3    <li data-group="sample2">Sample2</li> 
4</ul> 
5
6<div class="box">
7  <a data-groups="sample1" href="img/image-1.jpg" data-lightbox="roadtrip">Image1</a>
8  <a data-groups="sample1" href="img/image-2.jpg" data-lightbox="roadtrip">Image2</a>
9  <a data-groups="sample1" href="img/image-3.jpg" data-lightbox="roadtrip">Image3</a>
10</div>
11
12<!-- グループ2 -->
13<div class="box">
14  <a data-groups="sample2" href="img/image-1.jpg" data-lightbox="roadtrip">Image4</a>
15  <a data-groups="sample2" href="img/image-2.jpg" data-lightbox="roadtrip">Image5</a>
16  <a data-groups="sample2" href="img/image-3.jpg" data-lightbox="roadtrip">Image6</a>
17</div>