【備忘録】LightBox2の設置方法と使い方

スポンサーリンク

LightBox2のついて

ホームページ上で画像やギャラリーをクリックした際に、ポップアップウィンドウで画像が拡大されて表示されるスクリプトです。

LightBox2の設置方法 – cdnより

google で検索 『 lightbox2 cdn 』

または、

lightbox2 - cdnjs.com - The best FOSS CDN for web related libraries to speed up your websites!
lightbox2 - Lightbox is small javascript library used to overlay images on top of the current page. It's a snap to setup and works on all modern browsers. - cdn...

上のサイトよりコピペしたものが以下になります。

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

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のものになります。

 

タイトルとURLをコピーしました