Q&A
URLのモジュールというのは、CDNのことでしょうか？あと、lightboxを採用しないのは、CDNでないからでしょうか？
いつも大変お世話になっております。
ご存知の方、宜しくお願いします。
https://formstone.it/components/lightbox/demo/
Thumbnails -> Thumbnails Gallery
のような簡単に設置できる、かつサンプルがある
jqueryを探しています。
（サンプルソースやマニュアル）
ボタン（画像）を押すと、ギャラリーが表示され、
そのポップアップした画面には、サムネールも表示されると
いった感じのものです。
他のモジュール、例えば、、pretyphotoなどで近いことは
実現できています。でも、ボタン（画像）を押すと、その
ボタン（画像）までギャラリーに表示され・・・撃沈。
本当はURLのモジュールがいいのですが、ドキュメント等が
見当たらず、そして正常に動作せず、超絶苦戦しています。
ただ、このlightboxにこだわっているわけではなく、
同じ事が出来るのであれば、他でも構わないので、
ご存知の方に教えて頂こうとした次第です。
もしご存知であれば、教えていただけませんか？
当方が、jqueryやCSSをちゃんと理解していないのが
そもそもの原因は理解しておりますが・・・何卒・・
宜しくお願いします。
回答2件
0
ベストアンサー
FormstoneのLightboxのドキュメントは以下にあります。
https://formstone.it/components/lightbox/
別に見た目の調整は必要ですが、サムネイル付きライトボックスは以下のようなコードで可能です。
https://jsfiddle.net/takmatz/5y36awk3/
html
1<button>open</button> 2 3<div style="display: none;"> 4 <a href="https://spacehold.it/1200x900/1.jpg" class="lightbox" data-lightbox-gallery="gallery_name" title="Image caption text."> 5 <img src="https://spacehold.it/300x300/1.jpg" alt=""> 6 </a> 7 <a href="https://spacehold.it/1200x900/2.jpg" class="lightbox" data-lightbox-gallery="gallery_name" title="Image caption text."> 8 <img src="https://spacehold.it/300x300/2.jpg" alt=""> 9 </a> 10 <a href="https://spacehold.it/1200x900/3.jpg" class="lightbox" data-lightbox-gallery="gallery_name" title="Image caption text."> 11 <img src="https://spacehold.it/300x300/3.jpg" alt=""> 12 </a> 13</div>
javascript
1$(".lightbox").lightbox({ 2 thumbnails: true 3}); 4 5$('button') 6 .on('click', function () { 7 $(".lightbox").trigger('click'); 8 });
投稿2017/07/07 14:16
退会済みユーザー
総合スコア0
お世話になっております。
コードとマニュアルありがとうございます。
皆様は、このマニュアルで、実装できるのですか？
私は、さっぱり・・・どうやったらデモのようになるのかわからないので、
今回質問させてもらった次第です。
また、コードの方は、目からウロコでした。こんなことができるのですね。
prettyphotoでやってみました。
<a id="startPrettyPhoto">View all photos</a>
$("#startPrettyPhoto").click(function() {
$("a[rel^='prettyPhoto']:first").click()
});
検索してみたら、こういうコードを見つけてきて、試しましたが・・・
残念ながら動きませんでした。
何か足りないんだと思います。ただ、可能性が広がったので、もう少し
チャレンジしてみる気になりました。ありがとうございました。
0
「サムネイル表示が出来るLightBox系」なら「lightGallery」も同じようなことが出来ます。
【lightGallery: thumbnails】
https://sachinchoolur.github.io/lightgallery.js/demos/index.html
【lightGallery: API】
https://sachinchoolur.github.io/lightgallery.js/docs/api.html
【高機能画像ギャラリーを手軽に設置できるjQueryプラグイン「lightGallery」】
https://nelog.jp/jquery-lightgallery
投稿2017/07/09 06:44
総合スコア69407
kei344様
いつもお世話になっております。
返信遅くなりました。
また、詳細のページも、ありがとうございます。
こちらのも実装しましたが、私がやりたいことが、
結局どうしていいかわからず、、、
折角ヒントを頂いているのにすいません。
引き続き、よろしくお願いします。
Tak_Matzさんの回答へのコメントでも同じようなことを書いておられますが、今回提示した内容が実装できないということは他のどのライブラリでも同じく実装できないと思います。JavaScriptを勉強されるか、外注を検討されてはいかがでしょうか。
返信ありがとうございます。
そうですね。
もう少しもがいてみて、ダメなら、諦めます。
本当に、いつもありがとうございます。
助かっています。
あなたの回答
tips
プレビュー
