T-style.com
default blue gray orange pinkRSS1.0
 姫路発。地域情報、ブログ・Web関連、サッカーなど気ままに更新中
 
BLOG TOP > スポンサー広告 > スポンサーサイト> [weblog] カスタマイズ > Lightbox js v2.0でサムネイル画像をオーバレイ表示

arrow-list-red.gif北海道エリアarrow-list-red.gif東北エリアarrow-list-red.gif関東エリア
arrow-list-red.gif北陸・甲信越エリアarrow-list-red.gif関西エリアarrow-list-red.gif中国エリア
arrow-list-red.gif四国エリアarrow-list-red.gif九州エリアarrow-list-red.gif沖縄エリア

スポンサーサイト

--'--.--.--  コメント : -  トラックバック : -  
このエントリーをはてなブックマークに追加 Save This Page to del.icio.us このエントリーをlivedoorクリップに追加 newsing it! このエントリーをGoogleBookmark に追加 このエントリーをBuzzurlに追加 このエントリーをTechnorati に追加 このエントリーをFC2ブックマークに追加タグで記事を検索するタグ検索
- カテゴリ:スポンサー広告

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



ブログランキング・にほんブログ村へ人気ブログランキングへ[参考になりましたらクリックよろしくお願いします。]

あなたも容量1GBでデザイン・カスタマイズ自由なFC2ブログをはじめませんか?開設はこちら>>>

Lightbox js v2.0でサムネイル画像をオーバレイ表示

2006'09.08.Fri    0    0  
このエントリーをはてなブックマークに追加 Save This Page to del.icio.us このエントリーをlivedoorクリップに追加 newsing it! このエントリーをGoogleBookmark に追加 このエントリーをBuzzurlに追加 このエントリーをTechnorati に追加 このエントリーをFC2ブックマークに追加タグで記事を検索するタグ検索

テーマ:カスタマイズ - カテゴリ:[weblog] カスタマイズ

(あわじ花さじき[はばタン])サムネイル画像をオーバレイで表示してくれる何ともおしゃれなLightbox。色んなサイトを参考にして何とか導入出来ました。試しに左の画像をクリックしてみてください。(Javascriptがオフになっている場合は動作しないので注意)
使ってみようかなと思う方は良かったら参考にしてみて下さいね。
※基本的にはこのツールはMovable Type用で下の説明はFC2ブログ用のカスタマイズ方法です。各レンタルブログの場合は改造が必要とのこと。
準備
Lightbox JS v2.0でファイルをダウンロード。[解凍ソフトはこちら]

設置方法

<head>~</head>への記述
<script type="text/javascript" src="<%url>file/prototype.js"></script>
<script type="text/javascript" src="<%url>file/scriptaculous.js"></script>
<script type="text/javascript" src="<%url>file/lightbox.js"></script>
<link rel="stylesheet" href="<%url>file/lightbox.css" type="text/css" media="screen" />
lightbox.cssの修正(青字の部分…/file/にアップしたファイルを挿入)
#prevLink, #nextLink{
width: 49%;
height: 100%;
background: transparent url(…/file/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(…/file/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(…/file/nextlabel.gif) right 15% no-repeat; }
lightbox.jsの修正(青字の部分)
// Configuration //
var fileLoadingImage = "…/file/loading.gif";
var fileBottomNavCloseImage = "…/file/close.gif";
var borderSize = 10;
以上の設定が終わればダウンロードした全てのファイル・画像をアップロード。[ツール→ファイルアップロード]。あとは画像表示させるだけです。

リンクの設定(画像表示)
Lightbox JS を利用したい画像リンクやテキストリンクに、青色で示すように rel 属性を与えます。またオーバレイ表示させる元の画像も用意しておいてください。(fc2の場合画像をアップロードする場合にサムネイルも作成する(jpg,png)にチェックを入れる)
サムネイル画像のサイズ設定方法[環境設定の変更]→[ブログの設定]→[サムネイル設定]
<a href="…/file/image-1.jpg" rel="lightbox" title="ここに写真のタイトル"><img src="…/file/thumb-1.jpg" alt="…" ></a>
あとは画像をクリックしてちゃんと動くか確認して下さい。複数の写真をスライドショーにすることも可能。色々試してみてくださいね。

リンク
参考リンク
スポンサーサイト



ブログランキング・にほんブログ村へ人気ブログランキングへ[参考になりましたらクリックよろしくお願いします。]

あなたも容量1GBでデザイン・カスタマイズ自由なFC2ブログをはじめませんか?開設はこちら>>>

スポンサードリンク


非公開コメント(管理者のみ閲覧)

トラックバックURL
http://tomytaku.blog14.fc2.com/tb.php/394-b1876a07

--[TB:注意点]---------------------------------------------------------------------------------------------------
※記事に関係のないものは即削除、同内容でも有効ではないと管理人が判断した場合、削除させて頂きます。
※迷惑トラックバックが多いので承認制にしています。承認するまでは「管理人の承認待ち」という表示が出ます。

  トップへ戻る   

Total  Tday  Yday  Online: RSS feed meter for http://tomytaku.blog14.fc2.com/
Copyright© 2006 T-style.com ALL Rights Reserved.
アイコンカウンター
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。