スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

2006.01.10

lightbox.js でカッチョよく画像表示

OpenStratus で紹介されていた Lightbox JS を導入してみました。下の画像をクリックすると、どんな感じかわかるかと思います。

lightbox.png

詳しい導入方法は OpenStratus に在りますが、FC2ブログの場合も書いてみました。

  1. Lightbox JS の下の方にリンクされているファイル四個(lightbox.js, lightbox.css, loading.gif, overlay.png)をダウンロードします。
  2. lightbox.js の中の loading.gif のパスを修正します。

    var loadingImage = 'loading.gif';
    ↓
    var loadingImage = 'file/loading.gif;
    
  3. lightbox.css の中の overlay.png のパスを修正します。lightbox.css をアップロードする場合は、下記の修正は必要ありません。テンプレートのCSSに付け加える場合にのみ、パスの修正を行ってください。

    #overlay{ background-image: url("overlay.png"); }
    ↓
    #overlay{ background-image: url("../../file/overlay.png"); }
    
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale");
    ↓
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../../file/overlay.png", sizingMethod="scale");
    
  4. lightbox.js, lightbox.css, loading.gif, overlay.png をFC2にアップロードします。
  5. 「テンプレートの編集」の「HTML の編集」で、HTML のヘッダ部分に次を付け加えます。なおtitle 属性は必要ありせん。勘違いしてました。

    <link href="file/lightbox.css" type="text/css" rel="stylesheet" title="Lightbox JS" />
    <script type="text/javascript" src="file/lightbox.js"></script>
    
  6. 後は画像へのアンカータグに値が lightbox な rel 属性を付け加えるだけです。

    <a href="images/image-1.jpg" rel="lightbox">image #1</a>
    

上記の手順でうまく行かない場合は、パスをすべて絶対パスにするとうまく行くと思います。

追記

内容に誤りがあったので訂正しました。lightbox.css をアップロードする場合はファイルの修正の必要は無く、CSSを読み込む為の LINK 要素に title 属性は必要ありません。思いっきり勘違いしてました。

また上記の設定はFC2の場合で、他のサービスではまた異なってくると思うのでその辺りは適宜変更してください。

関連記事

この記事へのトラックバックURL
http://wildlifesanctuary.blog38.fc2.com/tb.php/23-a26123d1
この記事へのトラックバック
lightboxというものの使い方を見つけました。カッコイイので早速実験。相対パスを使うと、なぜかオーバーレイ用のpngを読み込んでくれないので、白バックになってしまいました。こ
lightbox実験 | drumn' at 2006.01.09 20:14
ホームページを作成していて、サムネイル画像を拡大表示させることがあるかと思います。この場合、別ウィンドウに拡大表示画像を出していませんか?紹介するLightbox JSを使用してみてください。結構クールに拡大表示が実現できますよ。■概要Lightbox JS is
サムネイル画像をかっこよく拡大表示する方法 | のりぞーTV - システムデザイナーレビュー at 2006.01.10 14:05
予てより、やりたかったんです。 ←左の画像をクリックすると、画面が暗くなり真ん中にその画像を表示するというギミックが働きますが、他...
画像のポップアップ | t2\'s stupidly thinks at 2008.02.09 15:40
この記事へのコメント
 
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。