質問: いつもお世話になっております。 アドバイスを頂きましたので、内容を修正させていただきました。 下記のような価格表があり、4列目の「〇」ボタンをクリックすると、別ウィンドウにジャンプするのではなく、 画面上で該当グループ画像(複数)をスライドショーとして表示したいと考えています。 --- |列1 |列2 |列3 |列4| |あああ |WHITE |355,000 |〇 | ...[Aグループ画像スライド] |いいい |BLUE | 20,000 |〇 | ...[Bグループ画像スライド] |ううう |WHITE |300,000 |〇 | ...[Cグループ画像スライド] |えええ |BLACK | 10,000 |〇 | ...[Aグループ画像スライド] --- 1.各行の4列目(テキストか画像)をクリックすると、 複数画像(グループ化)のスライドショーをおこないたいのですが、 クリックする前には画像は表示したくない。(隠す事はできますか?) 2.可能であれば、価格表とは違うhtmlに各グループの画像を入れて、読み込む形にしたい。 (グループ・画像が多く、一緒になるとかなりhtmlが多くなってしまうため) お忙しいところ申し訳ございませんが、 宜しくお願い致します。 ココから追記--------------------------------- 教えて頂きまして、ありがとうございます。 ただ私が勉強不足のため、すぐに理解出来ずに申し訳ありません。 jQuery をきちんと勉強していないと難しいでしょうか...... --- やりたい事は、下記のように、「table」が載っているhtmlと別ファイルで、画像グループたちを表記して、読み込ませたいのです。 グループが多いのと、価格表table.htmlの種類が多いので、なるべくファイル数も少なくしたいため。 (別ファイルから読み込むことが出来れば、はいらないですね。) ■table部分(価格表) ``` 〇 〇 ・ ・ 中略 ・ ・ ``` ■別ファイルにまとめて、読み込ませたい部分 ``` ```
回答: 今使用されているのが Lightbox2 と仮定して、自分ならこう組むという案。 各テーブルには `data-gallery` にパス名、`data-imgcount` に枚数を設定し、それをもとにデータを組み、その後で Lightbox2 を読み込む感じ。(「jQuery」「table」「このスクリプト」「Lightbox2」の順にHTMLに記載する) ファイル名/パス構造さえきちんと作れば別htmlファイルを作る必要も無いので簡単かなと。 ``` 〇 〇 ``` ``` $( '.gallery-button' ).each( function() { var $_t = $( this ); var gallery = $_t.attr( 'data-gallery' ); var imgcount = parseInt( $_t.attr( 'data-imgcount' ), 10 ); var $_d = $( '' ); $_d.attr( 'id', 'gallery-hidden-items_' + gallery ); $_d.addClass( 'gallery-hidden' ); for ( var i = 1 ; i <= imgcount ; i++ ) { $_d.append( '' + gallery + '' ); } $( 'body' ).append( $_d ); $_t.on( 'click', function() { $( '[data-lightbox="' + gallery + '"]' ).eq( 0 ).click(); } ); } ); ``` **動くサンプル:** とりあえずデベロッパーツールでどういうHTMLを組んでいるかとか見てみるのが早いと思います。 【開発者ツールを使おう! カスタマイズするphpファイルを探す-その1 | RYUS blog】