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

姫路発。地域情報、ブログ・Web関連、サッカーなど気ままに更新中

スポンサードリンク

COMMENT

TRACKBACK

2009 / 11	▼	▲
日	1	8	15	22	29
月	2	9	16	23	30
火	3	10	17	24	-
水	4	11	18	25	-
木	5	12	19	26	-
金	6	13	20	27	-
土	7	14	21	28	-

Ads by Google

--'--.--.-- コメント : - トラックバック : -

タグ検索

- カテゴリ：スポンサー広告

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

FX Online Japan創業5周年キャンペーン実施中

[参考になりましたらクリックよろしくお願いします。]

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

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

2006'09.08.Fri

タグ検索

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

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

準備
Lightbox JS v2.0でファイルをダウンロード。[解凍ソフトはこちら]

設置方法

<head>～</head>への記述

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)にチェックを入れる)
サムネイル画像のサイズ設定方法[環境設定の変更]→[ブログの設定]→[サムネイル設定]

あとは画像をクリックしてちゃんと動くか確認して下さい。複数の写真をスライドショーにすることも可能。色々試してみてくださいね。

リンク

Lightbox JS v2.02

参考リンク

Lightbox JS で画像を表示する [小粋空間]

FX Online Japan創業5周年キャンペーン実施中

スポンサードリンク

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