サムネイルをクリック＝カッコいい演出でフル画像
何はともあれ下のサムネイル画像をクリックして
感動を味わって下さい！！
画像を グループ化 してます ( [ 簡単に設置できる手順 ] ８．参照 )
マウス・カーソルを
有効画像上 の "右半分" に移動すると "NEXT" ボタン
有効画像上 の "左半分" に移動すると "PREV" ボタン
がそれぞれ現れるような仕様のようです
[ ちょっと訂正！]
ボタンと思いきや実際はボタンではなく "ガイド" が現れるだけで
有効画像のどちらか 半分の領域 を クリック すればよかったのだ
( /css/lightbox.css 参照 )
画像を グループ化 してます ( [ 簡単に設置できる手順 ] ８．参照 )
どうですか 我が家のお犬様 "おっとりシャンプー君" です
機会があれば "リンスお嬢" と子供の "トリートメント君" も紹介しますね
当サイトの Favicon は生後50日目の "トリートメント君" なんですよ
そろそろ二歳半になりますがまだまだ「やんちゃ盛り」なのです
そうだ、愛犬の自慢話ではないですね
これは
Litebox 1.0 をブログに適用する
で紹介されてました Litebox 1.0 を使ってます
いつも情報のご提供ありがとうございます
[ 簡単に設置できる手順]
１．ダウンロードした litebox-1.0.zip を 解凍
２．解凍したファイルの /js/litebox-1.0.js, /js/moo.fx.js, /js/prototype.lite.js,
の各ファイルを ルートディレクトリー(ブログURL) に アップロード
３．解凍したファイルの /css/lightbox.css を /css/ に アップロード
(cssデレクトリーがなければ新規作成)
４．/images/*.* 全てのファイルを /images/ に アップロード (お試し用画像付き)
(imagesデレクトリーがなければ新規作成)
５．lightbox.css を自身の環境に合わせ 修正 ( ../ → http://ブログURL/ )
修正前
#prevLink, #nextLink{修正後
width: 49%;
height: 100%;
background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
display: block;
}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }
#prevLink, #nextLink{
width: 49%;
height: 100%;
background: transparent url(http://ブログURL/images/blank.gif) no-repeat; /* Trick IE into showing hover */
display: block;
}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(http://ブログURL/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(http://ブログURL/images/nextlabel.gif) right 15% no-repeat; }
６．litebox-1.0.js を自身の環境に合わせ 修正(削除) ( /path/to 削除 )
修正前
//修正後
// Configuration
//
var fileLoadingImage = "/path/to/images/loading.gif";
var fileBottomNavCloseImage = "/path/to/images/closelabel.gif";
//
// Configuration
//
var fileLoadingImage = "/images/loading.gif";
var fileBottomNavCloseImage = "/images/closelabel.gif";
７．属性に rel="lightbox" を 追加
ex) <a href="http://〜/images/image-1.jpg" rel="lightbox"><img src="http://〜/images/thumb-1.jpg" /></a>
８．グループ化する場合は rel 属性値に "[]" を 付与 (グループごとに分ける)
ex) <a href="http://〜/images/image-1.jpg" rel="lightbox[ex1]"><img src="http://〜/images/thumb-1.jpg" /></a>
<a href="http://〜/images/image-2.jpg" rel="lightbox[ex1]"><img src="http://〜/images/thumb-2.jpg" /></a>
<a href="http://〜/images/image-3.jpg" rel="lightbox[ex1]"><img src="http://〜/images/thumb-3.jpg" /></a>
９．表示させるページ (メイン, カテゴリー・アーカイブ, 日付アーカイブ, etc) の
body に onload 属性 を 追加
修正前
<body class="layout-three-column">修正後
<body class="layout-three-column" onload="initLightbox()">
なにげに気に入ってます