下記Fancyboxサイトの「Image gallery」が理想です。
http://fancybox.net/home
ただ、Fancyboxは商用有料という事なので、新しいプラグインを探しています。
【元から複数画像が並んでいる→クリックするとモーダル表示→次の画像へ切り替え】
というLightbox系のプラグインは多いのですが、
【1枚の単体画像→クリックするとモーダル表示→次の画像へ切り替え】
というプラグインを探しても中々見つかりません。
使用用途としてはバナーをクリックするとパンフレット画像がモーダルで見れるようにしたいです。
当方jquery初心者でして、自力で書く事はできません…。
どなたか近いものや参考になるプラグインお教えいただけませんでしょうか?
何卒よろしくお願い致します。
No.2ベストアンサー
- 回答日時:
No1です。
反応が何も無いようなので、もうとっくに解決済みなのかも知れませんが・・・
適当に探して、APIが公開されている「Magnific Popup」というもので試してみました。
(ライセンスは、MIT licenseと記されています。)
http://dimsemenov.com/plugins/magnific-popup/
オプションでいろいろと設定できるようですが、最小限でテストしいます。
ご質問の内容は以下のようなイメージではないかと・・・
表示スタイル等はオプションで設定可能と思います。(ほとんど調べていませんが)
http://dimsemenov.com/plugins/magnific-popup/doc …
オプションで、
modal: true
に設定するとモーダル表示になるとの説明がありますが、多分、質問者様のおっしゃっている「モーダル表示」とは違う意味ではないかと想像します。
以下はテストしてみた全文です。
(表示画像をクリックすると、A、B、Cの画像がグループで順に表示される)
<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2. …
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific- …
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific- … />
</head>
<body>
<p>
<img id="trigger" src="test.jpg" style="cursor:pointer;" />
</p>
<script type="text/javascript">
$('#trigger').on('click', function(){
$.magnificPopup.open({
items: [{ src:'A.jpg' },{ src:'B.jpg' },{ src:'C.jpg' }],
type: 'image',
gallery: { enabled:true }
}, 0);
});
</script>
</body>
</html>
※ この掲示板ではURL(CDNのURL)が、リンク表示に変えられて、省略表示されてしまいますのでご注意。
※ No1にも記しましたが、他のライブラリでもAPIが公開されているようなタイプであれば、大抵同様のことが可能と想像します。
お返事遅くなり、大変大変申し訳ございません…。
fujillinさんのご回答参考にさせていただき、無事に思い描いていたモーダルを実装する事が出来ました。
jqueryが少し読めるくらいで書く事は出来ない初心者の私に優しく教えていただき、本当に感謝いたします。
また、お忙しい中テストまでしていただきありがとうございます!
今後同様のケースに出会った場合は、無事に解決できるかと思います。
とても参考になるコメント頂いておりましたのに、お返事遅くなり本当に申し訳ございません。
fujillinさんのおかげで無事に解決し、ホッとしております。
ありがとうございました。
勝手で恐縮ですが、また別件で何かあればお教えいただければ大変嬉しく思います。
よろしくお願いいたします。
No.1
- 回答日時:
こんにちは
試してはいませんが・・・
>【元から複数画像が並んでいる→クリックするとモーダル表示→次の画像へ切り替え】
>というLightbox系のプラグインは多いのですが、
その手のライブラリのほとんどは、「画像のグループ化」に対応しているものが多いと思います。
ご質問のように、
>【元から複数画像が並んでいる】
を一つだけ表示するようにするとか、多少の工夫で実現できるように思います。
トリガー(モーダル表示のきっかけ)を別に設定できるようになっているタイプのものであれば、画像でなくとも単なるリンクをクリックしたら、画像表示することも可能なはずです。
例えば、lightboxでもそのままで実現できるみたい。(←未確認ですが)
https://teratail.com/questions/11505
FancyboxでもAPIが公開されていますので、仮にそのままの機能にはなかったとしても、比較的簡単に実現できそうに思います。
http://fancybox.net/api
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
このQ&Aを見た人はこんなQ&Aも見ています
-
天使と悪魔選手権
悪魔がこんなささやきをしていたら、天使のあなたはなんと言って止めますか?
-
フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
あなたが普段思っている「これまだ誰も言ってなかったけど共感されるだろうな」というあるあるを教えてください
-
映画のエンドロール観る派?観ない派?
映画が終わった後、すぐに席を立って帰る方もちらほら見かけます。皆さんはエンドロールの最後まで観ていきますか?
-
海外旅行から帰ってきたら、まず何を食べる?
帰国して1番食べたくなるもの、食べたくなるだろうなと思うもの、皆さんはありますか?
-
天使と悪魔選手権
悪魔がこんなささやきをしていたら、天使のあなたはなんと言って止めますか?
-
モーダルウィンドウ内で複数の画像を表示
JavaScript
-
1枚の画像をクリックして複数の画像と詳細を入れられるJQueryのLightBoxプラグイン
JavaScript
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
画像のランダム表示、及び画像...
-
WEBページ立ち上げ時に1回のみ...
-
表と裏がある1枚の画像を回転す...
-
onmouseで画像の切り替えについて
-
CSSで背景をランダム表示さ...
-
jQueryで特定のURLの時のみ表示
-
ページを更新しないで・・・
-
<EMBED>タグのSRCの値のみ変更
-
java scriptで現在のURLで条件分岐
-
オンマウスで画像が切り替わっ...
-
サムネイルをクリックすると画...
-
javaを使ってマウスオンでの画...
-
Javascriptで指定した日付と時...
-
オンマウスで、画像切り替え+...
-
2つの別ウインドウの表示
-
リンク先がそれぞれ別の画像の...
-
キャッシュされた画像を使わず...
-
FancyZoom (javascriptで画像拡...
-
表示する画像をファイル名を受...
-
画像の重なりの順序を代える方...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
textareaに画像を表示したい
-
Gifアニメ、最後のコマに行った...
-
JavaScript スライドの画像にリ...
-
bxsliderにて読み込み後に内容...
-
透過pngの透明部分以外をクリッ...
-
JavaScriptとチェックボックス...
-
クリッカブルマップの一部分だ...
-
innerHTMLで、表示すると、一部...
-
Javascriptで指定した日付と時...
-
画像をフォルダに入れれば表示...
-
1枚の画像をクリックすると複数...
-
WEBページ立ち上げ時に1回のみ...
-
image.onload = .. の後に imag...
-
美人時計風JAVAスクリプトが上...
-
曜日と時間を指定して表示画像...
-
決まった曜日で一定時間だけ表...
-
画面の表示位置を指定させて表...
-
jQuery FlexSliderのカルーセ...
-
特定の画像を非表示にする方法
-
iframe内のリンク文字のマウス...
おすすめ情報