LightBox2のついて
ホームページ上で画像やギャラリーをクリックした際に、ポップアップウィンドウで画像が拡大されて表示されるスクリプトです。
LightBox2の設置方法 – cdnより
google で検索 『 lightbox2 cdn 』
または、
lightbox2 - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers
Lightbox is small javascript library used to overlay images on top of the current page. It's a snap to setup and works o...
cdnjs.com
上のサイトよりコピペしたものが以下になります。
Lightbox2 の css (lightbox.css)
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.1/css/lightbox.min.css" integrity="sha256-tBxlolRHP9uMsEFKVk+hk//ekOlXOixLKvye5W2WR5c=" crossorigin="anonymous" />
こちらを、ヘッダー内に貼り付けます。
wordpressの場合は、使っているテーマによってテーマオプションやヘッダー内に記入したいことなどの部分に貼り付けても下さい。または、header.php 等
jQuery
jQueryは、他でjavascript等つかっていればもうすでにどこかに記入されている場合がありますが、もしなかった場合は、jQuery CDN より 使いたいバージョンのものの、minified の方をコピペする。
jQuery CDN
Worldwide distribution of jQuery releases.
code.jquery.com
lightbox2のjs (lightbox.min.js)
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.1/js/lightbox.min.js" integrity="sha256-CtKylYan+AJuoH8jrMht1+1PMhMqrKnB8K5g012WN5I=" crossorigin="anonymous"></script>
lightbox2のスクリプト本体は、body要素の最後の方に(</body>)に記入する。
LightBox2を使って画像を拡大させる方法
Lightbox2を使ってその場でクリックしたら拡大で表示させるには、画像のリンクのソースコードに以下のものを記入する。
<a href="img-1.jpg" data-lightbox="aaabbbccc" data-title="img-1の拡大写真">
<img src="imag-1.jpg" alt="img-1の写真">
</a>
上記のように拡大させたいリンク要素に『data-lightbox=”aaabbbccc” 』をコピペする。
また、”aaabbbccc” の部分は、グループになりますので、同じ値のものはカルーセルで表示できるようになります。
こちらは、DEMOのものになります。
