【Lightbox】画像を拡大表示させる機能を実装方法
モーダ複数の画像をタイル状に並べたギャラリーやブログなどでも幅広く使える画像拡大機能をLightboxで実装させる方法。
Lightbox
まずはLightbox公式サイトでzipファイルでテータを一式ダウンロードする。
ダウンロード：Lightbox公式
使用するのは
- lightbox.js
- lightbox.css
- 画像(close.png/loading.gif/next.png/prev.png)
の3つ。
上記の3つとは別にjQuery本体(jQuery.js)も使用する。
ダウンロード：jQuery
以上の4つで準備完了。
設定方法
次にHTMLの<head>~</head>内にこれを記述する。
<link rel="stylesheet" href="css/lightbox.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
拡大したい画像にをaタグでで囲んで画像と同じファイルパスを指定。rel属性を追加して値にLightboxと記入。
<a href="img/sample.jpg" rel="lightbox"><img src="/img/sample.jpg" alt=""></a>画像のタイトルを変更したい場合はdata-title属性を追加し値を指定
<a href="img/sample.jpg" data-title="サンプル画像"><img src="/img/sample.jpg" alt=""></a>複数の画像をグループ化したい場合は[*****]に指定したい名前を付ける。
<a href="img/sample.jpg" rel="lightbox[group-name]"><img src="/img/sample.jpg" alt=""></a>以上がLightboxの設定方法です。ちなみにLightboxは画像だけでなくテキストでも同じ動作が可能です。
令和4年(2022年)最新版!本書は『ITパスポート』試験に、短期間で一発合格するための試験対策本です。「試験に合格すること」のみを目的に企画・構成されています。
NEW POST
-
HEX, CMYK, RGB 変換出力
-
403エラー｜海外からWordPressのアクセスできない時の対処（ロリポップ）
-
スクショでHP全体を撮る方法（Mac）
