jQuery、Lightboxを使ったページ
-
必要なファイル
当サイトでは、古いパソコンでも正しく表示できるよう、今までJavaScriptは全く使わないで作成してきたが、
写真を格好よく表示するためのプログラム、Lightboxを実験的に使用してみることにする。
写真をクリックすると画面が暗くなり、ブラウザにうまく収まるように大きさが調整された写真が表示される。
JavaScriptライブラリ jQuery、Lightbox
http://www.yoshi-systemservice.com/js/jquery.min.js
http://www.yoshi-systemservice.com/js/jquery.lightbox-2.6.min.js
スタイルシートとボタンなどの画像
http://www.yoshi-systemservice.com/css/lightbox_loading.gif
http://www.yoshi-systemservice.com/css/lightbox_close.png
http://www.yoshi-systemservice.com/css/lightbox_prev.png
http://www.yoshi-systemservice.com/css/lightbox_next.png
http://www.yoshi-systemservice.com/css/jquery.lightbox.css
設置方法
- HTMLファイルがあるディレクトリにcssとjsというフォルダを作り、スタイルシートとボタンなどの画像、JavaScriptライブラリを保存する
- <HEAD> と </HEAD> の間に以下ような記述を入れて必要なファイルを呼び出す
-
<link type="text/css" rel="stylesheet" href="css/jquery.lightbox.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-2.6.min.js"></script>
- 画像のaタグについて data-lightbox という属性を与える。属性名はこのページでは tuboi20140903 とつけた
-
<a href="image/2014_09/img_2014_09_03_tuboi_l.jpg" data-lightbox="tuboi20140903"><img alt="坪井町定点観測2014年09月03日 ２" WIDTH="200" HEIGHT="150" src="image/2014_09/img_2014_09_03_tuboi_s.jpg"></a>
- 呼び出す画像とそのサムネイルを必要なフォルダに保存する