とろ～りとゆら～りと liteboxを使って写真をかっこよく表示

とろ～りとゆら～りと

風の吹くまま気の向くまま。。。

[PR]

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

2024/04/20 (Sat)

liteboxを使って写真をかっこよく表示

まずは下の写真をクリックしてみて下さい。

すてきでしょ～

ということで早速実装しました。

参考サイト記事
ニンブロラボ. LightBoxをいれてみました
小粋空間: Litebox 1.0 をブログに適用する

まずLitebox- Same great taste, less caloriesでサイト後方にある
Downloadのlitebox-1.0.zipのリンクをクリックしてダウンロードします。

つぎにダウンロードしたlitebox-1.0.zipを右クリックしてでてきたプルダウンメニューの中の「すべて展開」をクリック。解答ウィザードが立ち上がるので、次へ→次へ→完了すると解凍されます。

使うファイルは下の分だけ、後のものはサンプル画像だからいらない。

lightbox.css
blank.gif
closelabel.gif
loading.gif
nextlabel.gif
prevlabel.gif
litebox-1.0.js
moo.fx.js
prototype.lite.js

赤いファイル以外は自サイトにアップロードします。
残り　lightbox.css　litebox-1.0.js　は開いて中を少し変えます。

litebox-1.0.jsの修正

下のように書かれてるとこを探します。
（前回紹介したTeraPadかファイルの上で右クリックしてでてきたプルダウンメニュー内の「プログラムから開く→ワードパッド」で開くでもＯＫ）

//
// Configuration
//
var fileLoadingImage = "images/loading.gif";
var fileBottomNavCloseImage = "images/closelabel.gif";
var resizeSpeed = 6; // controls the speed of the image resizing (1=slowest and 10=fastest)
var borderSize = 10; //if you adjust the padding in the CSS, you will need to update this variable

赤いところを

//
// Configuration
//
var fileLoadingImage = "アップロードしたloading.gifのＵＲＬ";
var fileBottomNavCloseImage = "アップロードしたcloselabel.gifのＵＲＬ";
var resizeSpeed = 6; // controls the speed of the image resizing (1=slowest and 10=fastest)
var borderSize = 10; //if you adjust the padding in the CSS, you will need to update this variable

にします。
（アップロードした画像をクリックすると別ウィンドウが出てくるんで、でてきたウィンドウ内の画像を右クリックすると画像のＵＲＬが出てくるからそれをコピペ。）

できたら上書き保存して自サイトにアップロードします。

lightbox.cssの修正

下のように書かれてるとこを探します。

#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

赤いところを

#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(アップロードしたprevlabel.gifのＵＲＬ) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(アップロードしたnextlabel.gifのＵＲＬ) right 15% no-repeat; }

にします。
（アップロードした画像をクリックすると別ウィンドウが出てくるんで、でてきたウィンドウ内の画像を右クリックすると画像のＵＲＬが出てくるからそれをコピペ。）

できたら上書き保存して自サイトにアップロードします。

そして自サイトＨＴＭＬ内の<hard>～</hard>内に

<link rel="stylesheet" href="アップロードしたlightbox.cssのＵＲＬ" type="text/css" media="screen" />
　　　　　　　間に別のタグがはさまっててもＯＫの部分
<script type="text/javascript" src="アップロードしたprototype.lite.jsのＵＲＬ"></script>
<script type="text/javascript" src="アップロードしたmoo.fx.jsのＵＲＬ"></script>
<script type="text/javascript" src="アップロードしたlitebox-1.0.jsのＵＲＬ"></script>

にします。

もひとつ<body>と書かれてるところを

<body onload="initLightbox()">

にします。

以上で完成！

記事を書くときのタグは以下。

単一表示
<a href="http://domain/path/to/images/hogehoge.jpg" rel="lightbox"><img src="http://domainpath/to/images/hogehoge_thumb.jpg" border="0" /></a>

グループ
<a href="http://domain/path/to/images/hogehoge1.jpg" rel="lightbox[example]"><img src="http://domainpath/to/images/hogehoge1_thumb.jpg" border="0" /></a>
<a href="http://domain/path/to/images/hogehoge2.jpg" rel="lightbox[example]"><img src="http://domainpath/to/images/hogehoge2_thumb.jpg" border="0" /></a>
<a href="http://domain/path/to/images/hogehoge3.jpg" rel="lightbox[example]"><img src="http://domainpath/to/images/hogehoge3_thumb.jpg" border="0" /></a>

赤いとこはサンプル画像のＵＲＬなので、アップした画像ＵＲＬに書き換えて使う。

これで画像入りの記事書くときはよさげになる～。