JQueryのLightBoxプラグインでは、1枚の画像をクリックしたら、他の並べてある画像も見れてしまうと思います。
今回、1枚の画像をクリックして複数の画像と詳細を入れられるLightBoxのプラグインを探しています。
何がしたいかと言いますと、例としましては、一覧の商品画像が並んでいて、その画像をクリックすると、その商品の他の画像も見れて、そこには、簡単な商品情報を写真の下にHTMLで記載できるようなタイプを探しています。
最初は、ポップアップのみ実装して、そこにスライドショーをはめ込み、下に詳細をHTML・CSSで作成していたのですが、どうしてもポップアップしてからのスライドショーがうまく動かず、ブラウザのウィンドウの横幅をずらずと、スライドショーが正常に動くのですが、色々CSSなどをいじってみたのですが、解決しなかったため、LightBoxのプラグインならやりたいことができるかと思い、探しているんですが、詳細情報をHTML・CSSで実装できないものばかりです。
そこで良いJQueryのプラグインを知っている方がいれば教えていただきたいです。
宜しくお願いします。
No.1ベストアンサー
- 回答日時:
こんにちは
少し調べてみただけなので、ヒントにでもなれば程度ですが・・・
>一覧の商品画像が並んでいて、その画像をクリックすると、
>その商品の他の画像も見れて、そこには、簡単な商品情報を
>写真の下に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要素など)を指定できるなら、同様に実現できそうに思えます。
ただし、このタイプの書式の説明がサイト内をざっと見ても見当たらなかったので、残念ながら可能なのかどうかがわかりません。
※ 簡単に調べてみただけなので、とてもお役には立たないと思いますが、少しはご参考にでもなれば・・・
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
このQ&Aを見た人はこんなQ&Aも見ています
-
【大喜利】【投稿~11/1】 存在しそうで存在しないモノマネ芸人の名前を教えてください
【お題】 ・存在しそうで存在しないモノマネ芸人の名前を教えてください
-
人生最悪の忘れ物
今までの人生での「最悪の忘れ物」を教えてください。 私の「最悪の忘れ物」は「財布」です。
-
ホテルを選ぶとき、これだけは譲れない条件TOP3は?
ホテルを探す時、予約サイトで希望条件の絞り込みができる便利な世の中。 あなたは宿泊先を決めるとき「これだけは譲れない」と思う条件TOP3を教えてください。
-
【大喜利】【投稿~10/21(月)】買ったばかりの自転車を分解してひと言
【お題】 ・買ったばかりの自転車を分解してひと言
-
ギリギリ行けるお一人様のライン
おひとり様需要が増えているというニュースも耳にしますが、 あなたが「ギリギリ一人でも行ける!」という場所や行為を教えてください
-
lightboxを使用してサムネイルなしでポップアップさせたい
ホームページ作成・プログラミング
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・【大喜利】【投稿~11/1】 存在しそうで存在しないモノマネ芸人の名前を教えてください
- ・好きなおでんの具材ドラフト会議しましょう
- ・餃子を食べるとき、何をつけますか?
- ・あなたの「必」の書き順を教えてください
- ・ギリギリ行けるお一人様のライン
- ・10代と話して驚いたこと
- ・家の中でのこだわりスペースはどこですか?
- ・つい集めてしまうものはなんですか?
- ・自分のセンスや笑いの好みに影響を受けた作品を教えて
- ・【お題】引っかけ問題(締め切り10月27日(日)23時)
- ・大人になっても苦手な食べ物、ありますか?
- ・14歳の自分に衝撃の事実を告げてください
- ・架空の映画のネタバレレビュー
- ・「お昼の放送」の思い出
- ・昨日見た夢を教えて下さい
- ・ちょっと先の未来クイズ第4問
- ・【大喜利】【投稿~10/21(月)】買ったばかりの自転車を分解してひと言
- ・メモのコツを教えてください!
- ・CDの保有枚数を教えてください
- ・ホテルを選ぶとき、これだけは譲れない条件TOP3は?
- ・家・車以外で、人生で一番奮発した買い物
- ・人生最悪の忘れ物
- ・【コナン30周年】嘘でしょ!?と思った○○周年を教えて【ハルヒ20周年】
- ・10秒目をつむったら…
- ・人生のプチ美学を教えてください!!
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・都道府県穴埋めゲーム
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
PC設定に依存しない曜日判定JS...
-
textareaに画像を表示したい
-
Javascript シャッフル
-
画像の右端の座標
-
Netscapeで反応しない
-
embed要素のsrc属性の値を変更...
-
IFRAMEの表示/非表示を切り替え...
-
MAX関数を使ってからLEFT JOIN...
-
もう一度onclickを利用した伸縮...
-
onclickとonmouseoverを同時に...
-
HPに複数の画像をクリックで切...
-
取得した要素がインライン要素...
-
jQuery「jplayer」プレイリスト...
-
印刷ボタンがIE6で動かない
-
HPB_SCRIPT_ROV_50
-
jQuery bxSlider でのアニメー...
-
Slick.jsのオプションrtlについて
-
JS:画像を繰り返しランダム読...
-
iframe内のリンクが飛ばないの...
-
IEの半角スペースの連続とinner...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
textareaに画像を表示したい
-
1枚の画像をクリックすると複数...
-
画像の重なりの順序を代える方...
-
透過pngの透明部分以外をクリッ...
-
WEBページ立ち上げ時に1回のみ...
-
Javascriptで指定した日付と時...
-
Gifアニメ、最後のコマに行った...
-
画像をフォルダに入れれば表示...
-
1枚の画像をクリックして複数の...
-
JavaScript スライドの画像にリ...
-
画像のランダム表示、及び画像...
-
画像ランダム表示、しかしダブ...
-
表と裏がある1枚の画像を回転す...
-
オンマウスで画像が切り替わっ...
-
オンマウスで、画像切り替え+...
-
jQueryスライドショー画像への...
-
画面の表示位置を指定させて表...
-
画像の切り替えの方法について
-
javascriptで毎月替わる画像
-
javascriptで、一枚の画像を、...
おすすめ情報
さらに、ポップアップした写真をクリックすると、外部リンクへいき、矢印をクリックすると次の画像が見れる仕様にできるものを探しています。
宜しくお願いします。