lightboxで、複数グループの表示と1枚目画像の非表示

Question

lightboxを使い、複数画像をグループ化して表示しています。
（設置は完了しており、動作確認も大丈夫です。）

「slideshow.html」に各グループの画像をまとめて表示して、
「index.html」で呼び出しています。

やりたい事は、下記の通りです。
「index.html」の「group01」「group02」が「〇」箇所にリンクさせている
「image01.jpg」「image02.jpg」も「slideshow.html」にまとめたい。
「〇」は、テキストではなく「input type="button"」とかでも
大丈夫です。

「index.html」にgroup01がまた出てきたりするため、
このままだと「image01.jpg」が何枚も表示されてしまうため。

難しい場合は、data-lightbox名を「group01-2」などに変更する形も考えたのですが、
「slideshow.html」にも同じ量のコードを書きたくないのです……。
cssのクラスのように複数書けるといいのですが。。

■index.html

<table><tr>
<td><a href="image01.jpg" data-lightbox="group01">〇</a></td>
<td><a href="image02.jpg" data-lightbox="group02">〇</a></td>
</tr></table>

<?php include 'slideshow.html'; ?>

■slideshow.html

<a href="image01-2.jpg" data-lightbox="group01">〇</a>
<a href="image01-3.jpg" data-lightbox="group01">〇</a>
<a href="image01-4.jpg" data-lightbox="group01">〇</a>


<a href="image02-2.jpg" data-lightbox="group02">〇</a></td>
<a href="image02-3.jpg" data-lightbox="group02">〇</a></td>
<a href="image02-4.jpg" data-lightbox="group02">〇</a></td>

宜しくお願い致します。

Answer 1

index.htmlのdata-lightboxを変えるだけでは？また、index.htmlで書かれているものでスライドショーを起動したいだけであれば、下記のようにすれば動くような気がします。

<a href="image01.jpg" data-target="group01">〇</a>

$( '[data-target]' ).on( 'click', function() {
	var tgt = $( this ).attr( 'data-target' );
	if ( tgt ) {
		$( '[data-lightbox="' + tgt + '"]' ).eq( 0 ).click();
	}
	return false;
} ); // 未テスト

Comments

[orange_drop]

早速ありがとうございます！

こちらの方法で無事に解決しました。
これで分散しているデータをまとめることが出来そうです。ありがとうございました。