スポンサーサイト
投稿日時 : -------- --:--
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
-------- --:-- | スポンサー広告
Lightboxをブログに導入する方法
投稿日時 : 2007-11-27 16:09
画像を画面遷移なしにポップアップ表示できるLightboxを導入してみました。
 
Lightbox JS
http://www.huddletogether.com/projects/lightbox/
 
Lightboxデモ(サムネイルクリックで実寸画像ポップアップ)
lightbox_demo
*ページのロードが完了する前にクリックすると画面遷移してしまいます。
 
FC2ブログで導入するには上記サイトでダウンロードできる「lightbox.css」と「lightbox.js」をちょっと編集する必要がある。まあ画像の参照先をFC2の仕様に合わせるだけなんですが。
 
各ファイルは以下のようにファイル名を変更してアップロードしてあります。lightbox.jsとlightbox.cssは編集後アップ。
lightbox.js → 変更なし
lightbox.css → 変更なし
overlay.png → lightbox_overlay.png
loading.gif → lightbox_loading.gif
close.gif → lightbox_close.gif
 
 
以下各ファイルの編集内容を示しますが、URLは各自の環境で読み替えてください。そのままコピペしても動くかもしれませんがやめてください。こちら側でファイル名変更したり削除すると動かなくなるだろうし。
 
■lightbox.cssの編集
lightbox.css : 18行目あたり
#overlay{ background-image: url(overlay.png); }
これを以下のように変更
#overlay{ background-image: url(http://blog-imgs-24.fc2.com/i/t/m/itmst/lightbox_overlay.png); }
 
 
lightbox.css : 24行目あたり
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
src="overlay.png", sizingMethod="scale"); }
これを以下のように変更
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src="http://blog-imgs-24.fc2.com/i/t/m/itmst/lightbox_overlay.png", sizingMethod="scale"); }
 
 
■lightbox.jsの編集
lightbox.js : 38行目あたり
var loadingImage = 'loading.gif';
var closeButton = 'close.gif';
これを以下のように変更
var loadingImage = 'http://blog-imgs-24.fc2.com/i/t/m/itmst/lightbox_loading.gif';
var closeButton = 'http://blog-imgs-24.fc2.com/i/t/m/itmst/lightbox_close.gif';
 
 
■テンプレートの<head>~</head>に以下を追加
<script type="text/javascript" src="http://blog-imgs-24.fc2.com/i/t/m/itmst/lightbox.js"></script>
<link rel="stylesheet" type="text/css" href="http://blog-imgs-24.fc2.com/i/t/m/itmst/i/itmst/lightbox.css">
 
 
■本文中に以下のように画像をリンクする。
<a href="http://blog-imgs-24.fc2.com/i/t/m/itmst/e19_lightbox_demo.jpg" rel="lightbox"><img src="http://blog-imgs-24.fc2.com/i/t/m/itmst/e19_lightbox_demos.jpg" border="0" /></a>
ポイントはAタグの中に「rel="lightbox"」を追加することだけです。
 
 
スポンサーサイト
2007-11-27 16:09 | Javascript | Comment(0) | Trackback(0)
Comment
コメントを書く
#

管理者にだけ表示
Trackback
Trackbak URL:http://itmst.blog71.fc2.com/tb.php/19-5bd9937b
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。