Q&A
「上手く動かない」「機能しない」だと何がおきているか見ている人には伝わりません。「こうなるべきなのに、こうなってしまう」と具体的な記述をお願いします。文章での表現が難しければスクリーンショットでも良いです。
luminousを使って、ライトボックスを作ろうとしたのですが、なぜか機能しません。
追記：クリックした際に拡大表示されると思うのですが、それが機能しないので、画像のリンク先に移動してしまう。
自動生成される画像のHTMLが以下の通りなので、.separator aを指定したいです。
HTML
1<div class="separator" style="clear: both; text-align: center;"> 2<a href="https://2.bp.blogspot.com/-lx7I3c6iQQA/WXTYn9V5vaI/AAAAAAAAuIQ/e5rEt0tnItAvOr3JcNbp7NXczRt9iQPJwCLcBGAs/s1600/%25E5%2590%258D%25E7%25A7%25B0%25E6%259C%25AA%25E8%25A8%25AD%25E5%25AE%259A.001.jpeg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"> 3<img border="0" src="https://2.bp.blogspot.com/-lx7I3c6iQQA/WXTYn9V5vaI/AAAAAAAAuIQ/e5rEt0tnItAvOr3JcNbp7NXczRt9iQPJwCLcBGAs/s450/%25E5%2590%258D%25E7%25A7%25B0%25E6%259C%25AA%25E8%25A8%25AD%25E5%25AE%259A.001.jpeg"> 4</a> 5</div>
luminousを見てみたところ、new Luminous(document.querySelector('.separator a'));で良さそうなのですが、全く機能しません。
試しに、1.0.0でも試してみたのですが、機能しませんでした。
何もわからない初心者ですが、教えてくださると嬉しいです。
#追記
scriptタグを閉じ忘れるというミスを犯しましたが、1枚目は動作しますが、二枚目以降が動作しません。
回答2件
0
ベストアンサー
与えられた CSS セレクタにマッチする文書中の最初の要素（※深さ優先の先行順走査によるもの）を返します。
document.querySelector - Web API インターフェイス | MDN
与えられた CSS セレクタにマッチする文書中の要素（※深さ優先の先行順走査によるもの）の全てのリスト (NodeList) を返します。
document.querySelectorAll - Web API インターフェイス | MDN
コメントを受けて追記
new LuminousGallery(document.querySelectorAll('.gallery-demo'));
GitHub - imgix/luminous: A simple, lightweight, no-dependencies JavaScript lightbox.
というサンプルコードがあるようです。
投稿2017/07/25 08:32
編集2017/07/25 09:59
総合スコア37421
というと、元からこのプラグイン自体が複数に対応してないということでしょうか。
追記しました。
ご丁寧にありがとうございます。
起動時の指定ですでに一つしか指定していなかったということですね（汗
ありがとうございました。
あなたの回答
tips
プレビュー
