Lightbox 2
|
Lightbox v2.0の設置方法を紹介します。 ★ Lightboxとは Lightboxとは画像のサムネイルをクリックすると画面上に画像の実サイズを表示させるツールです。 実際にはJavaScriptとスタイルシート(CSS)で動いています。 言葉で言うよりも動作を確認してもらった方がいいと思います。 下記をクリックしてください、こんな感じです。  ★ 設置方法 ① ファイルをダウンロードする。 http://www.huddletogether.com/projects/lightbox2/にアクセスし、左メニューの DownloadからLightboxの最新バージョン（現時点では v2.03.3）をダウンロードする。 ② ファイルを加工、選別する。 １.予期される不具合を解消しておくために、相対パスを絶対パスに書き換えます。 jsフォルダ内のlightbox.jsの６２・６３行目（現在）を下記のように書き換えます。 （サーバーにアップロードする絶対パスに書き換えてください）
書き換え前
var fileLoadingImage = "images/loading.gif"; var fileBottomNavCloseImage = "images/closelabel.gif";
書き換え後 var fileLoadingImage = "http://●●●●/images/loading.gif"; var fileBottomNavCloseImage = "http://●●●●/images/closelabel.gif"; ２.同じ要領でCSSフォルダ内のlightbox.cssの画像（gif）相対パスも絶対パスに書き換えておきます。 （現時点では３ヶ所） ３.imagesフォルダ内のイメージ（image-1.jpgとthumb-1.jpg）は不要ですので削除しておいてください。 ★ アップロード js・css・imagesの各フォルダを記述した絶対パスの位置にアップロードします。 ★ HTMLへのコードの記述 <HEAD>～</HEAD>の中に下記を記述します。
<script type="text/javascript" src="http://●●●●/js/prototype.js"></script>
（パスは絶対パスで記述）<script type="text/javascript" src="http://●●●●/js/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="http://●●●●/js/lightbox.js"></script> <link rel="stylesheet" href="http://●●●●/css/lightbox.css" type="text/css" media="screen" /> ★ リンクの設定 基本的にはアンカータグ<A>内にrel="lightbox"を記述します。 （複数枚をスライドショーするにはrel="lightbox[▲▲▲▲]"とし、▲▲▲▲を統一された半角英数字で記述しグループ化します） また、title="■■■■"を設定する事でLightbox上で文章を表示する事も出来ます。
<A href="画像のパス" rel="lightbox" title="■■■■"><IMG SRC=""></A>
（もちろんリンク対象は文字等でもかまいません）<A href="画像のパス" rel="lightbox[▲▲▲▲]" title="■■■■"><IMG SRC=""></A> <A href="画像のパス" rel="lightbox[▲▲▲▲]" title="■■■■"><IMG SRC=""></A> <A href="画像のパス" rel="lightbox[▲▲▲▲]" title="■■■■"><IMG SRC=""></A> <A href="画像のパス" rel="lightbox[▲▲▲▲]" title="■■■■"><IMG SRC=""></A>
（以上は全て自己責任において行ってください） | ||||||||||||
| 2007/11/07 | ||||||||||||
