スライドショー画像を別ファイルから読み込みたい

いつもお世話になっております。
アドバイスを頂きましたので、内容を修正させていただきました。

下記のような価格表があり、4列目の「〇」ボタンをクリックすると、別ウィンドウにジャンプするのではなく、
画面上で該当グループ画像（複数）をスライドショーとして表示したいと考えています。

|列1 |列2 |列3 |列4|

|あああ |WHITE |355,000 |〇 | …[Ａグループ画像スライド]
|いいい |BLUE | 20,000 |〇 | …[Ｂグループ画像スライド]
|ううう |WHITE |300,000 |〇 | …[Ｃグループ画像スライド]
|えええ |BLACK | 10,000 |〇 | …[Ａグループ画像スライド]

1.各行の4列目（テキストか画像）をクリックすると、
複数画像（グループ化）のスライドショーをおこないたいのですが、
クリックする前には画像は表示したくない。（隠す事はできますか？）

2.可能であれば、価格表とは違うhtmlに各グループの画像を入れて、読み込む形にしたい。
（グループ・画像が多く、一緒になるとかなりhtmlが多くなってしまうため）

お忙しいところ申し訳ございませんが、
宜しくお願い致します。

ココから追記---------------------------------

教えて頂きまして、ありがとうございます。
ただ私が勉強不足のため、すぐに理解出来ずに申し訳ありません。
jQuery をきちんと勉強していないと難しいでしょうか……

やりたい事は、下記のように、「table」が載っているhtmlと別ファイルで、画像グループたちを表記して、読み込ませたいのです。
グループが多いのと、価格表table.htmlの種類が多いので、なるべくファイル数も少なくしたいため。
（別ファイルから読み込むことが出来れば、<div style="display:none;">はいらないですね。）

■table部分（価格表）

<table>
<tr>
<td><a href="A.jpg" data-lightbox="group01"><img src="A.jpg" style="display:none;" />〇</a></td>
</tr>
<tr>
<td><a href="C.jpg" data-lightbox="group02"><img src="C.jpg" style="display:none;" />〇</a></td>
</tr>

<tr>
・
・
中略
・
・
</table>

■別ファイルにまとめて、読み込ませたい部分

<div style="display:none;">

<a href="A_02.jpg" data-lightbox="group01"><img src="A_02.jpg" /></a>
<a href="A_03.jpg" data-lightbox="group01"><img src="A_03.jpg" /></a>
<a href="A_04.jpg" data-lightbox="group01"><img src="A_04.jpg" /></a>

<a href="C_02.jpg" data-lightbox="group02"><img src="C_02.jpg" /></a>
<a href="C_03.jpg" data-lightbox="group02"><img src="C_03.jpg" /></a>
<a href="C_04.jpg" data-lightbox="group02"><img src="C_04.jpg" /></a>

</div>

ykws

2017/03/16 06:16

具体的にコーディングでつまずいているならソースコードを載せると良いと思います。

kei344

2017/03/16 16:27

具体的にHTML/JavaScriptや、使用しているフレームワークなどを提示されたほうが、より具体的な回答が得られると思います。

koro703

2017/03/17 05:25

何度も申し訳ありません。少し追加しましたので、宜しくお願い致します。

kei344

2017/03/17 05:27

こちらの環境では質問本文の変更／修正が確認できませんでした。すみませんが、もう一度確認してもらえませんか？最近teratailで修正が保存されない事がたまにあるようなので･･･。

koro703

2017/03/17 05:40

すみません！間違えてコメントで返信してしまっているようです…。修正にして、下の方に追加すればいいでしょうか？

kei344

2017/03/17 05:43

コメント欄ではコードブロックが使えないため、質問本文のほうが適していると思います。コードブロックは```（バッククオート3つ）＋改行でコード囲むか、コードを選択して「<code>」ボタンを押すとコードブロックになります。記入エリアの右部分あたりにリアルタイムに結果が表示されていると思うので、そこを見ながら調整してください。

kei344

2017/03/17 06:07

コードブロックはその名の通りコードを入れるものなので、HTML部分（「table部分」「別ファイルにまとめて、読み込ませたい部分」の下の部分）のみそれぞれ囲むのが一番読みやすいです。

koro703

2017/03/22 02:04

言葉足らずばかりの質問でしたのに、みなさん、丁寧に教えて頂きありがとうございます！

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

回答3件

ベストアンサー

今使用されているのが Lightbox2 と仮定して、自分ならこう組むという案。

各テーブルには data-gallery にパス名、data-imgcount に枚数を設定し、それをもとにデータを組み、その後で Lightbox2 を読み込む感じ。（「jQuery」「table」「このスクリプト」「Lightbox2」の順にHTMLに記載する）

ファイル名／パス構造さえきちんと作れば別htmlファイルを作る必要も無いので簡単かなと。

HTML
1<style>
2.gallery-hidden {
3	display: none;
4}
5</style>
6<table>
7<tr><td><div class="gallery-button" data-gallery="A" data-imgcount="5">〇</div></td></tr>
8<tr><td><div class="gallery-button" data-gallery="C" data-imgcount="3">〇</div></td></tr>
9</table>

JavaScript
1$( '.gallery-button' ).each( function() {
2	var $_t      = $( this );
3	var gallery  = $_t.attr( 'data-gallery' );
4	var imgcount = parseInt( $_t.attr( 'data-imgcount' ), 10 );
5	var $_d      = $( '<div></div>' );
6	$_d.attr( 'id', 'gallery-hidden-items_' + gallery );
7	$_d.addClass( 'gallery-hidden' );
8	
9	for ( var i = 1 ; i <= imgcount ; i++ ) {
10		$_d.append( '<a href="https://placehold.jp/24/99cc99/339933/350x150.png?text=' + gallery + i + '.jpg" data-lightbox="' + gallery + '">' + gallery + '</a>' );
11	}
12	$( 'body' ).append( $_d );
13	$_t.on( 'click', function() {
14		$( '[data-lightbox="' + gallery + '"]' ).eq( 0 ).click();
15	} );
16} );
17```**動くサンプル：**[https://jsfiddle.net/3uskrfac/](https://jsfiddle.net/3uskrfac/)
18
19---
20
21とりあえずデベロッパーツールでどういうHTMLを組んでいるかとか見てみるのが早いと思います。
22
23【開発者ツールを使おう！ カスタマイズするphpファイルを探す-その1 | RYUS blog】
24[http://ryus.co.jp/blog/customize-php-search-1/](http://ryus.co.jp/blog/customize-php-search-1/)

投稿2017/03/17 18:31

kei344

総合スコア69407

別ファイルから読み込む

こんな感じではいかがでしょうか。

javascript
1var div = $('<div></div>')
2.append(
3  $('<a></a>', {
4    href: 'A_02.jpg',
5    'data-lightbox': 'group01'
6  }).append(
7    $( "<img>", {
8      src: 'A_02.jpg'
9    })
10  )
11)
12.append(
13  $('<a></a>', {
14    href: 'A_03.jpg',
15    'data-lightbox': 'group01'
16  }).append(
17    $( "<img>", {
18      src: 'A_03.jpg'
19    })
20  )
21)
22.append(
23  $('<a></a>', {
24    href: 'A_04.jpg',
25    'data-lightbox': 'group01'
26  }).append(
27    $( "<img>", {
28      src: 'A_04.jpg'
29    })
30  )
31)
32.append(
33  $('<a></a>', {
34    href: 'C_02.jpg',
35    'data-lightbox': 'group02'
36  }).append(
37    $( "<img>", {
38      src: 'C_02.jpg'
39    })
40  )
41)
42.append(
43  $('<a></a>', {
44    href: 'C_03.jpg',
45    'data-lightbox': 'group02'
46  }).append(
47    $( "<img>", {
48      src: 'C_03.jpg'
49    })
50  )
51)
52.append(
53  $('<a></a>', {
54    href: 'C_04.jpg',
55    'data-lightbox': 'group02'
56  }).append(
57    $( "<img>", {
58      src: 'C_04.jpg'
59    })
60  )
61)
62;
63$('body').append(div);

わかりやすさのために冗長に書いてますので、ご了承ください。

投稿2017/03/17 06:31

Lhankor_Mhy

総合スコア36115

display:none を指定すれば非表示にできます。
クリックされたら JavaScript で表示することもできます。
スライドショーは JavaScript のライブラリがいくつかあるので好みのものを選ぶと良いと思います。

別ファイルからの読み込みと表示切り替えは load と toggle を組み合わせて実現可能です。

html
1<input type="button" value="toggle view" onclick="$('#group01').toggle();">
2<div id="group01" style="display:none">
3
4<script>
5  $('#group01').load('group01.html');
6</script>