質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.91%

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

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,228

koro703

score 29

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

下記のような価格表があり、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の種類が多いので、なるべくファイル数も少なくしたいため。
(別ファイルから読み込むことが出来れば、<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>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2017/03/17 14:43

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

    キャンセル

  • kei344

    2017/03/17 15:07

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

    キャンセル

  • koro703

    2017/03/22 11:04

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

    キャンセル

回答 3

checkベストアンサー

+2

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

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

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

<style>
.gallery-hidden {
    display: none;
}
</style>
<table>
<tr><td><div class="gallery-button" data-gallery="A" data-imgcount="5"></div></td></tr>
<tr><td><div class="gallery-button" data-gallery="C" data-imgcount="3"></div></td></tr>
</table>
$( '.gallery-button' ).each( function() {
    var $_t      = $( this );
    var gallery  = $_t.attr( 'data-gallery' );
    var imgcount = parseInt( $_t.attr( 'data-imgcount' ), 10 );
    var $_d      = $( '<div></div>' );
    $_d.attr( 'id', 'gallery-hidden-items_' + gallery );
    $_d.addClass( 'gallery-hidden' );

    for ( var i = 1 ; i <= imgcount ; i++ ) {
        $_d.append( '<a href="https://placehold.jp/24/99cc99/339933/350x150.png?text=' + gallery + i + '.jpg" data-lightbox="' + gallery + '">' + gallery + '</a>' );
    }
    $( 'body' ).append( $_d );
    $_t.on( 'click', function() {
        $( '[data-lightbox="' + gallery + '"]' ).eq( 0 ).click();
    } );
} );

動くサンプル:https://jsfiddle.net/3uskrfac/


とりあえずデベロッパーツールでどういうHTMLを組んでいるかとか見てみるのが早いと思います。

【開発者ツールを使おう! カスタマイズするphpファイルを探す-その1 | RYUS blog】
http://ryus.co.jp/blog/customize-php-search-1/

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+2

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

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

<input type="button" value="toggle view" onclick="$('#group01').toggle();">
<div id="group01" style="display:none">

<script>
  $('#group01').load('group01.html');
</script>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/03/16 17:26

    早速お返事をいただきまして、ありがとうございます!
    desplay:none やってみます。

    「2」の方の価格表とは別HTMLからの読み込みも可能でしょうか?
    図々しく、申し訳ありません。

    キャンセル

  • 2017/03/16 17:36

    jQuery の load でできます。
    http://api.jquery.com/load/

    キャンセル

  • この投稿は削除されました

  • 2017/03/17 17:11

    別ファイルにする利点が文章からは分かりかねますが、回答に追記しました。

    キャンセル

+2

別ファイルから読み込む

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

var div = $('<div></div>')
.append(
  $('<a></a>', {
    href: 'A_02.jpg',
    'data-lightbox': 'group01'
  }).append(
    $( "<img>", {
      src: 'A_02.jpg'
    })
  )
)
.append(
  $('<a></a>', {
    href: 'A_03.jpg',
    'data-lightbox': 'group01'
  }).append(
    $( "<img>", {
      src: 'A_03.jpg'
    })
  )
)
.append(
  $('<a></a>', {
    href: 'A_04.jpg',
    'data-lightbox': 'group01'
  }).append(
    $( "<img>", {
      src: 'A_04.jpg'
    })
  )
)
.append(
  $('<a></a>', {
    href: 'C_02.jpg',
    'data-lightbox': 'group02'
  }).append(
    $( "<img>", {
      src: 'C_02.jpg'
    })
  )
)
.append(
  $('<a></a>', {
    href: 'C_03.jpg',
    'data-lightbox': 'group02'
  }).append(
    $( "<img>", {
      src: 'C_03.jpg'
    })
  )
)
.append(
  $('<a></a>', {
    href: 'C_04.jpg',
    'data-lightbox': 'group02'
  }).append(
    $( "<img>", {
      src: 'C_04.jpg'
    })
  )
)
;
$('body').append(div);


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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.91%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る