PREV| PAGESELECT | NEXT

≫ EDIT

スポンサーサイト

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

| スポンサー広告 | --:-- | コメント(-) | トラックバック(-) | TOP↑

≫ EDIT

lightbox.js ~ ブログに画像ポップアップ機能を追加

の記事で画像をクリックすると、
画面上に拡大画像(原寸)がポップアップ表示されます。
で、クリックすると消える。

この機能を提供してくれるのが
lightbox.js です。

使ってみるとヤミツキw
FC2で利用する場合、以下のよーなかんじで出来ます。

1.lightbox.jsファイルをアップロード

2.ヘッダに
<script type="text/javascript" src="http://blog5.fc2.com/s/*******/file/lightbox.js"></script>

とか書く。
******のあたりはアップロードした場所によるので環境に合わせてください。

3.スタイルシートの最後に、
/* ----------------lightbox */

#lightbox{
background-color:#eee;
padding: 10px;
border-bottom: 2px solid #666;
border-right: 2px solid #666;
}
#lightboxDetails{
font-size: 0.8em;
padding-top: 0.4em;
}
#lightboxCaption{ float: left; }
#keyboardMsg{ float: right; }
#closeButton{ top: 5px; right: 5px; }

#lightbox img{ border: none; clear: both;}
#overlay img{ border: none; }

#overlay{ background-image: url(overlay.png); }

* html #overlay{
background-color: #333;
back\ground-color: transparent;
background-image: url(blank.gif);
filter: progid:DXImageTransform.Microsoft.
AlphaImageLoader(src="overlay.png", sizingMethod="scale");
}

/* ----------------end */

とか書く。

4.あとは画像リンクについて、rel="lightbox" ってのを書けばOK!
<a href="images/image1.jpg" rel="lightbox"><img src="image/image1-thumb.jpg" /></a>

これでイケます。
お試しアレ!

lightbox.js はココ
もっとわかりやすい解説はコチラ
スポンサーサイト

| Documents | 01:06 | comments(3) | trackbacks(0) | TOP↑

COMMENT

おお~!
これ、サムネイル表示にはかなり効果的だね~。

・・・というかあの写真はっ!?
CDデビュー!!?

| ひろき | 2006/04/24 00:26 | URL | ≫ EDIT

クリックやスタイルシートをlightboxCaptionしたいみたい…


| BlogPetのけう | 2006/04/24 14:07 | URL | ≫ EDIT

>CDデビュー!!?
ええ、ネタですw

あの写真は例の浅草祭りのヤツです。
合作。
製作に5時間くらいかかってます。

あとは曲があればインディーズディスクの完成!

まかせた!

| きど | 2006/04/25 22:02 | URL | ≫ EDIT















非公開コメント

TRACKBACK URL

http://sonorous.blog5.fc2.com/tb.php/151-8c85c091

TRACKBACK

PREV | PAGESELECT | NEXT

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