電脳化空間 - Liteboxで画像表示

Home > スポンサー広告 > Liteboxで画像表示

Newer
Older

Ads by Google

--------
スポンサー広告

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

Newer: iPodで動画を見よう
Older: Windows版Safari

Comments:-

Trackback+Pingback:-

TrackBack URL for this entry: http://wintosh.blog109.fc2.com/tb.php/6-d523d90f
Listed below are links to weblogs that reference: Ads by Google from 電脳化空間

Home > スポンサー広告 > Liteboxで画像表示

Home > Script > Liteboxで画像表示

Newer
Older

Liteboxで画像表示

2007-07-22
Script

とりあえず上のサムネイル画像をクリック。
ローディング画像が表示された後、元画像が表示されるという、中々おされなスクリプ㌧。
今回はFC2ブログでの表示の仕方を紹介するよ～。
他のブログもやり方は変わらないと思うから参考に_ρ(^^ )ノサァドーゾ!! 他にもこれと同じようなモノでてるよ～。
それが知りたい方はググって調べて下さい。レッツチャレンジ！！

DL:Litebox
URL:http://www.doknowevil.net/litebox/
上記のサイトでファイル（スクリプト・スタイルシート・画像）をダウンロード汁。
ページの後方にある「DOWNLOAD」の「litebox-1.0.zip」より下記ファイルをダウンロードできるようになってるぉ。
（IEであれば右クリックして「対象をファイルに保存」できるぉ）。

ファイルを解凍したら使うファイルは下記のこれ
1.litebox-1.0/css/lightbox.css（liteboxのcssファイル）
2.litebox-1.0/images/blank.gif（ブランク画像）
3.litebox-1.0/images/closelabel.gif （クローズボタンの画像）
4.litebox-1.0/images/loading.gif （ローディングイメージ）
5.litebox-1.0/images/nextlabel.gif （nextリンクの画像）
6.litebox-1.0/images/prevlabel.gif （previewリンクの画像）
7.litebox-1.0/js/litebox-1.0.js （liteboxのスクリプトファイル）
8.litebox-1.0/js/moo.fx.js （liteboxのスクリプトファイル）
9.litebox-1.0/js/prototype.lite.js（liteboxのスクリプトファイル）

ファイルアップロードする前にやることがあるんだな。 lightbox.css にある下記のurl(../image～の部分（3ヶ所）を自分のアップロードするファイルの置き場所へのリンクに修正汁。

#prevLink, #nextLink{
    width: 49%;
    height: 100%;
    background: transparent url(../images/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(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { 
background: url(../images/nextlabel.gif) right 15% no-repeat; }

次も上と同じようにlitebox-1.0.js の下記の/path～の部分（２ヶ所）を、「ファイルのパス」に修正汁。

//
//    Configuration
//
var fileLoadingImage = "/path/to/images/loading.gif";
var fileBottomNavCloseImage = "/path/to/images/closelabel.gif";

ファイル修正＆上書き保存できたら解凍したモノと合わせて合計９個のファイルをアップロード汁！ここまでめげずにできたら続きを読んでもうひとふんばりだぉ。

アップロード済ませたら次はテンプレートの修正だぉ。
HTMLのほうの～の間の任意の行に下記を追加汁。

<link rel="stylesheet" href="http://domain/path/to/css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://domain/path/to/js/prototype.lite.js"></script>
<script type="text/javascript" src="http://domain/path/to/js/moo.fx.js"></script>
<script type="text/javascript" src="http://domain/path/to/litebox-1.0.js"></script>

できたかな？できたら次は起動させるためにスクリプトの追加だぉ。
これはテンプレートのHTMLの<body>のトコに下記を追加汁。

<body onload="initLightbox()">

以上で設定は終わりだぉヽ(･∀･)ﾉﾜﾁｮｰｲ♪

後は記事にアップロードした画像を入れるときに (記事の中に画像１つだけの場合）

<a href="http://domain/path/to/images/hogehoge1.jpg" rel="lightbox"><img src="http://domainpath/to/images/hogehoge1_thumb.jpg"></a>

（記事の中の画像をグループ化して表示させたい場合）

<a href="http://domain/path/to/images/hogehoge2.jpg" rel="lightbox[example]"><img src="http://domainpath/to/images/hogehoge2_thumb.jpg"></a>
<a href="http://domain/path/to/images/hogehoge3.jpg" rel="lightbox[example]"><img src="http://domainpath/to/images/hogehoge3_thumb.jpg"></a>

ってな感じにhttp～の部分は画像のパス、グループ化したい場合はrel=～[グループ名]の部分を追加させればおｋだぉヽ(･∀･)ﾉﾜﾁｮｰｲ♪ これでかっこよくオサレに画像を表示できる(ｏ ´д)(´д｀ｏ)ネー

Newer: iPodで動画を見よう
Older: Windows版Safari

Comments:0

Trackback+Pingback:0

TrackBack URL for this entry: http://wintosh.blog109.fc2.com/tb.php/6-d523d90f
Listed below are links to weblogs that reference: Liteboxで画像表示 from 電脳化空間

Home > Script > Liteboxで画像表示

Font Size Switch

Profile

プロフィール画像