ウェブサイトの復旧作業の中で、ギャラリーのページをカスタマイズする作業の中で、jQuery不要なLightboxスクリプトLuminousを知りました。
jQueryを使わないので、小規模のHTMLを手入力で作ったようなウェブサイトのギャラリーページのカスタマイズに最適だと思いました。
でも、下記のコードを設置しても、動かないです。
<linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/luminous-lightbox@2.3.2/dist/luminous-basic.min.css"><script src="https://cdn.jsdelivr.net/npm/luminous-lightbox@2.3.2/dist/luminous.min.js"></script><script>newLuminousGallery(document.querySelectorAll('.luminous'));</script>複数の画像に対応するため、このコードを使いました。
このコードは、こちらの記事で見つけました。
jQuery不要なLightbox代替スクリプトLuminousが本当に軽量
こちらの記事を読んで、原因が分かりました。
Luminousを適用したいaタグの直下に、このコードを設置する必要があります。
理由は、他のCSSの影響を受けないように、最後にLuminousのCSSを適用させるためです。
設置例
<div><ul><li><aclass="luminous"href="./img/1_big.jpg"><imgsrc="./img/1.jpg"alt="image"/></a></li><li><aclass="luminous"href="./img/2_big.jpg"><imgsrc="./img/2.jpg"alt="image"/></a></li></ul><linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/luminous-lightbox@2.3.2/dist/luminous-basic.min.css"/><script src="https://cdn.jsdelivr.net/npm/luminous-lightbox@2.3.2/dist/luminous.min.js"></script><script>newLuminousGallery(document.querySelectorAll('.luminous'));</script></div>