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

スポンサーサイト

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

Comments: -

Comment Form
Only inform the site author.

Trackback+Pingback: -

TrackBack URL for this entry
http://wintosh.blog109.fc2.com/tb.php/6-d523d90f
Listed below are links to weblogs that reference
スポンサーサイト from 電脳化空間

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

Home > Script > Liteboxで画像表示

Liteboxで画像表示

  • Posted by:
  • 2007-07-22 Sun 01:39:44
  • 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~の部分(2ヶ所)を、「ファイルのパス」に修正汁。
//
// Configuration
//
var fileLoadingImage = "/path/to/images/loading.gif";
var fileBottomNavCloseImage = "/path/to/images/closelabel.gif";

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

アップロード済ませたら次はテンプレートの修正だぉ。
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()">

以上で設定は終わりだぉヽ(・∀・)ノ ワチョーイ♪
後は記事にアップロードした画像を入れるときに (記事の中に画像1つだけの場合)
<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=~[グループ名]の部分を追加させればおkだぉヽ(・∀・)ノ ワチョーイ♪ これでかっこよくオサレに画像を表示できる(o ´д)(´д`o)ネー

Comments: 0

Comment Form
Only inform the site author.

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で画像表示

My Tweet
Links
RSS Feeds
Banner Links
電脳化空間 DL用バナー↓

群馬県渋川市の山車まつり「辰組」

ryooooo32 「勝手なブログ!」

Amazon×Reference

SEO Cheker

Return to page top

- Copyright © 電脳化空間 All Rights Reserved. -
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。