1枚の画像をクリックして複数の画像と詳細を入れられるJQueryのLightBoxプラグイン

JQueryのLightBoxプラグインでは、1枚の画像をクリックしたら、他の並べてある画像も見れてしまうと思います。

今回、1枚の画像をクリックして複数の画像と詳細を入れられるLightBoxのプラグインを探しています。

何がしたいかと言いますと、例としましては、一覧の商品画像が並んでいて、その画像をクリックすると、その商品の他の画像も見れて、そこには、簡単な商品情報を写真の下にHTMLで記載できるようなタイプを探しています。

最初は、ポップアップのみ実装して、そこにスライドショーをはめ込み、下に詳細をHTML・CSSで作成していたのですが、どうしてもポップアップしてからのスライドショーがうまく動かず、ブラウザのウィンドウの横幅をずらずと、スライドショーが正常に動くのですが、色々CSSなどをいじってみたのですが、解決しなかったため、LightBoxのプラグインならやりたいことができるかと思い、探しているんですが、詳細情報をHTML・CSSで実装できないものばかりです。

そこで良いJQueryのプラグインを知っている方がいれば教えていただきたいです。

宜しくお願いします。

質問者からの補足コメント

• さらに、ポップアップした写真をクリックすると、外部リンクへいき、矢印をクリックすると次の画像が見れる仕様にできるものを探しています。
  
  宜しくお願いします。

    補足日時：2016/03/22 00:09

No.1 ベストアンサー 回答者： fujillin 回答日時： 2016/03/22 16:00

こんにちは

少し調べてみただけなので、ヒントにでもなれば程度ですが・・・


＞一覧の商品画像が並んでいて、その画像をクリックすると、
＞その商品の他の画像も見れて、そこには、簡単な商品情報を
＞写真の下にHTMLで記載できるようなタイプを探しています。
LightBox系のプラグインは数多くあるので種々様々ですが、画像のグループ化ができて、キャプションを付けられるものが多くあります。
画像グループの一つだけを表示して（残りは非表示）おいて、利用すれば似たようなことが実現可能と思います。
ただし、大抵の場合、キャプション部分はtitle属性やrel属性を利用していると思いますので、テキストになってしまいます。

＞ポップアップのみ実装して、そこにスライドショーをはめ込み、
＞下に詳細をHTML・CSSで作成していたのですが、どうしても
＞ポップアップしてからのスライドショーがうまく動かず～
この方法もありのように思います。
ポップアップの実装はライブラリを利用したのでしょうか？
LightBox系のライブラリの多くは、背景レイヤや表示レイヤなどの構成があるので、先にこれらの要素を作成しておいて、その中に表示する要素の『コピー』を作成して表示しているものが多いと思います。
それなので、最初のHTML要素にスライドショーを設定しても、コピーには反映されないということが起こっていたりしませんか？
表示の際のイベントを取得できるAPIを用意しているプラグインを利用すれば、セット後に表示用の要素に対してスライドショーの初期設定を行うようにすれば実装可能ではないかと想像します。
ただし、この場合は画像ではなくコンテンツを表示できるタイプのプラグインである必要がありますね。

＞詳細情報をHTML・CSSで実装できないものばかりです。
上にも述べましたが、画像専用ではなく、コンテンツを表示できるタイプのものを選べばHTML、CSSともに利用可能と思います。
ただし、要素のコピーが表示される可能性があるので、CSSの要素指定には少しだけ注意が必要かもしれません。

＞ポップアップした写真をクリックすると、外部リンクへいき、
＞矢印をクリックすると次の画像が見れる仕様にできるものを探しています
通常のLightBox系のものでは、対象の指定が
　<a href="one.jpg" title="Image Caption">
　　<img src="one_thumb.jpg" alt="">
　</a>
のような構造になっているものが多いと思いますので、これに対してさらにリンクを設定しようとすると、別途工夫が必要になりそうです。
それよりも、インラインコンテンツなどを表示可能なプラグインを利用なさる方が、HTMLでのリンク設定が可能になるので、扱いは楽になりそうですね。

数は少ないかも知れませんが、コンテンツ表示でグループ化できそうなものもあるようです。
配布サイトの雰囲気を見ただけで、実際にはテストしていませんので明言できませんが、例えば・・・
http://www.no-margin-for-errors.com/projects/pre …
下の方にある「Inline content」の例を見ると、複数のコンテンツをページングしていますので、このような利用方法で実現の可能性があるのではないかと推測します。

あるいは、
http://fancybox.net/home
fancyboxもコンテンツ表示が可能なプラグインですが、一番下の「manual call 」で、manual2の指定では直接に複数の画像を指定しています。
exampleは画像なのですが、対象の指定にインラインコンテンツ（またはjQuery オブジェクトやHTML要素など）を指定できるなら、同様に実現できそうに思えます。
ただし、このタイプの書式の説明がサイト内をざっと見ても見当たらなかったので、残念ながら可能なのかどうかがわかりません。

※ 簡単に調べてみただけなので、とてもお役には立たないと思いますが、少しはご参考にでもなれば・・・

この回答へのお礼

ありがとうございます！
とても参考になりました＾ ＾

お礼日時：2016/03/26 13:23