FC2ブログ

スポンサーサイト

--年--月--日 スポンサー広告

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

はてなRSSに追加 このエントリーを含むはてなブックマーク

固定リンク Tb:- Res:- [edit] 

カッコ良くサムネイル画像を表示させる・Lightbox JS v2.02

2006年06月11日 情報

 
ひまわり
画像をクリックしてみて。

これ結構有名なスクリプトで紹介しなくてもいいかな?って思ってたんだけどサイトデザイン変更に合わせてLightbox JSLightbox JS v2.02に変更したらメールで数名の方に「教えろ~!」って問い合わせがあったので紹介するよ。(Lightbox JSのサンプル

Lightbox JS v2.02をダウンロードすると中にスクリプト・スタイルシート・画像のファイルが入ってます。その全てのファイル・画像を index.html と同じディレクトリにアップロードすればOK。
FC2ブログの場合<head>~</head>内を
<script type="text/javascript" src="file/prototype.js"></script>
<script type="text/javascript" src="file/scriptaculous.js?
load=effects"></script>
<script type="text/javascript" src="file/lightbox.js"></script>
と変更してください。


CSSファイルはブログのデザイン設定内に追加すればOKですが"prev.gif"と"next.gif"の前にもfile/を追加しないと駄目です。

lightbox.jsファイル内の"loading.gif"と"close.gif"も同様にfile/を追加しないと駄目です。

最後にLightbox JS を利用したい画像リンクやテキストリンクに
"rel" 属性を与えます。またオーバレイ表示させる元の画像も
用意しておいてください。
<a href="---.jpg" rel="lightbox" title="タイトル名">リンク</a>

こんな感じでFC2ブログの場合は出来たはずです。(たぶん間違ってないと思いますが責任は取りませんw
この他にもLightbox JS v2.02は複数の画像をスライドショー風にup出来ますがその辺は翻訳して解読してください。

[オマケ]

僕の場合"loading.gif"をloading gifジェネレーターで変更してます。微妙に分かり難い所で他のと差をつけてるつもりですwww
←コレを↓にしただけ。

やっぱ微妙~~~w

はてなRSSに追加 このエントリーを含むはてなブックマーク

固定リンク Tb:0 Res:2 [edit] 

Comment

かっこいいので使わせてもらいます><;

2006年06月17日 王子 URL 編集

どうぞ。っていうか僕が作ったわけじゃないし…w

2006年06月18日 tongari URL 編集

The comment is written







管理者にだけ公開する

TOP


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