1枚の画像をクリックすると複数の画像が表示されるモーダルウィンドウプラグインを探しています。

解決済

質問者：モリサワDIN太郎
質問日時：2018/07/02 19:50
回答数：2件

下記Fancyboxサイトの「Image gallery」が理想です。
http://fancybox.net/home

ただ、Fancyboxは商用有料という事なので、新しいプラグインを探しています。

【元から複数画像が並んでいる→クリックするとモーダル表示→次の画像へ切り替え】
というLightbox系のプラグインは多いのですが、
【1枚の単体画像→クリックするとモーダル表示→次の画像へ切り替え】
というプラグインを探しても中々見つかりません。
使用用途としてはバナーをクリックするとパンフレット画像がモーダルで見れるようにしたいです。

当方jquery初心者でして、自力で書く事はできません…。
どなたか近いものや参考になるプラグインお教えいただけませんでしょうか？

何卒よろしくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

参考程度に

No.2ベストアンサー

回答者： fujillin
回答日時：2018/07/06 11:25

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が公開されているようなタイプであれば、大抵同様のことが可能と想像します。

- 0
- 件

通報する

この回答へのお礼

お返事遅くなり、大変大変申し訳ございません…。
fujillinさんのご回答参考にさせていただき、無事に思い描いていたモーダルを実装する事が出来ました。
jqueryが少し読めるくらいで書く事は出来ない初心者の私に優しく教えていただき、本当に感謝いたします。

また、お忙しい中テストまでしていただきありがとうございます！
今後同様のケースに出会った場合は、無事に解決できるかと思います。

とても参考になるコメント頂いておりましたのに、お返事遅くなり本当に申し訳ございません。
fujillinさんのおかげで無事に解決し、ホッとしております。
ありがとうございました。

勝手で恐縮ですが、また別件で何かあればお教えいただければ大変嬉しく思います。
よろしくお願いいたします。

通報する

お礼日時：2018/07/23 14:00

参考程度に

No.1

回答者： fujillin
回答日時：2018/07/03 09:24

こんにちは

試してはいませんが・・・

＞【元から複数画像が並んでいる→クリックするとモーダル表示→次の画像へ切り替え】
＞というLightbox系のプラグインは多いのですが、
その手のライブラリのほとんどは、「画像のグループ化」に対応しているものが多いと思います。
ご質問のように、
＞【元から複数画像が並んでいる】
を一つだけ表示するようにするとか、多少の工夫で実現できるように思います。
トリガー（モーダル表示のきっかけ）を別に設定できるようになっているタイプのものであれば、画像でなくとも単なるリンクをクリックしたら、画像表示することも可能なはずです。

例えば、lightboxでもそのままで実現できるみたい。（←未確認ですが）
https://teratail.com/questions/11505

FancyboxでもAPIが公開されていますので、仮にそのままの機能にはなかったとしても、比較的簡単に実現できそうに思います。
http://fancybox.net/api