以前から導入は考えていたが、面倒でやってなかったlightbox。
いい加減、手を付けることにした。
スクリプトファイルをダウンロード
http://lokeshdhakar.com/projects/lightbox2/
今回ダウンロードしたのは「lightboxlightbox-2.7.1」というものだった。
lightboxの導入方法は色々なサイトに載っているが、旧バージョンの場合が多く指定されたファイルが無かったりしてあまり参考にならなかった。
スクリプトでファイル同士のリンク等考えられるので、なるべくディレクトリを変えずにアップロードすることにした。
とりあえずlightbox-2.7.1.zipを展開してlightboxフォルダの中身をそのまま自分のレンタルサーバーへアップロード。
明らかに消しても問題無いと思うindex.htmlやそのページで使われているサンプル画像等は削除。
lightboxを導入したいWEBサイトの<head></head>内に以下のコードを入力。
<script src="自分のURL/lightbox/js/lightbox.js" type="text/javascript"></script>
<script src="自分のURL/lightbox/js/lightbox.min.js"></script>
<script src="自分のURL/lightbox/js/jquery-1.11.0.min.js"></script> |
赤字の部分は分かりやすくhttpから始まるフルパスでやりました。
外部リンクでもOKっぽいです。
後は記事の編集時に以下のように編集すればOK！
<a rel="lightbox" href="ポップアップする大きい画像URL"><img src="サムネイルの小さい画像URL" /></a>
サンプル画像はこちら、クリックしてみてください。
画像をポップアップさせるだけではなく、スライドショーにさせたりとか応用技も結構あるようですがソースを解読するのが面倒で試してはいません。
ググれば結構出てくるのでやりたい人は色々と試してみてください。
PR
