Lightbox JSでサムネイルポップアップをしよう

サムネイルポップアップとは、どういうものかご存知ですか？
　
※サムネイル=多数の画像を一覧表示するために縮小された画像。
※ポップアップ=Webページがスクリプトを使って新しいブラウザウィンドウを自動的に開き、別の内容を表示させること。

まずは、下のサムネイルをクリックしてください。



拡大表示しましたか？

それでは、早速seesaa blogでの設置方法を紹介します。
※今回はすべて花華花だよりプラスα（http://taesho.seesaa.net/）として設置しています。変更箇所は、自身のURLに変換して実行してください。

Lightbox JSをダウンロードしましょう。

ダウンロードするファイルは次の5つです。
※「close.gif」は別にダウンロードする必要はありません。



Lightbox JSダウンロードはこちら

ダウンロードした「lightbox.js」を次のように変更します。
※変更にはMKEditorを使用しました。



38〜39行目

var loadingImage = 'loading.gif';
var closeButton = 'close.gif';
↓↓↓
var loadingImage = 'http://taesho.up.seesaa.net/lightbox/loading.gif';
var closeButton = 'http://taesho.up.seesaa.net/lightbox/close.gif';

※[UP]を入力するのを忘れないでください。


ダウンロードした「lightbox.css」を次のように変更します。



18行目と24行目

#overlay{ background-image: url(overlay.png); }
* html #overlay{
background-color: #333;
back\ground-color: transparent;
background-image: url(blank.gif);
filter: progid:DXImageTransform.
Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale");
}
↓↓↓
#overlay{ background-image: url(http://taesho.up.seesaa.net/lightbox/overlay.png); }
* html #overlay{
background-color: #333;
back\ground-color: transparent;
background-image: url(blank.gif);
filter: progid:DXImageTransform.
Microsoft.AlphaImageLoader(src="http://taesho.up.seesaa.net/lightbox/overlay.png", sizingMethod="scale");

ファイルをアップロードします。
まず、ファイルマネージャで
http://taesho.up.seesaa.net/lightboxのディレクトリを作成し、ダウンロードした全てのファイルをアップロードしましょう。



スタイルシートの編集
デザイン→デザイン一覧で現在使用しているスタイルシートにで変更した「lightbox.css」をコピーして一番最後へ貼り付けてください。


HTMLの編集
デザイン→HTMLへ以下の文を〜内の直前に追加してください。

<script type="text/javascript" 
src="http://taesho.up.seesaa.net/lightbox
/lightbox.js">
</script>

　


最後に、画像を今までどおりhttp://taesho.up.seesaa.net/imgへアップロードして、サムネイルとして貼り付けましょう。
その際、

<a href= "拡大画像URL"rel="lightbox"><img src="サムネイル画像URL" alt="○○○" /></a>

とrel="lightbox"を上記場所に付け加えてあげれば完了です。





⇒もっと詳しい関連記事[ﾌﾞﾛｸﾞﾗﾝｷﾝｸﾞ]

【Sponsored Link】

関連するおすすめ書籍