2006-11-08 Wed

Lightbox JS v2.0で画像をかっこよく拡大表示 RSS あとで読む kwout this!

lightbox_v2.jpg

かなり乗り遅れたようですが「Lightbox JS v2.0」を導入してみました。
とりあえず、上の画像をクリックして確認してみてください。

Lightboxは、サムネイルを同じページ内に拡大してくれるスクリプトです。
(JavaScriptが無効になっている場合は正しく表示されません)

設置は簡単なので、画像をかっこよく見せたいっという方はレッツ トライ!

Lightbox JS v2.0導入の手順


v2.02.jpg

  1. まず、"Lightbox JS v2.0"からファイルをダウンロード
  2. ダウンロードしたファイルを解凍
  3. ファイルをアップロード
  4. HTMLにPart 1 を追加
  5. あとは、次のように Lightbox を使用したい画像URLに rel="lightbox" を追加するだけでOK!
<a href="クリックで拡大したときの画像url" rel="lightbox" title="タイトル"><img src="サムネイルの画像url" />

注意点

ブログサービスによっては絶対パス(赤字の部分)を指定しないと正常に動かない場合があるので、必要に応じて修正を加えてください。

Part 1 - HTMLの編集
(Seesaaの場合はデザイン→HTML)
<head></head>部分にPart 1 - Setupの1と2を追加
ここでも絶対パスを指定
<script type="text/javascript" src="http://〜/prototype.js"></script>
<script type="text/javascript" src="http://〜/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="http://〜/lightbox.js"></script>

Part 1 - Setupの2
<link rel="stylesheet" href="http://〜/lightbox.css" type="text/css" media="screen" />

次に、ダウンロードしたファイルをテキストエディタで開いて、絶対パスに修正します。

lightbox.js の修正
62行目:"http://〜/loading.gif"
63行目:"http://〜/closelabel.gif"

lightbox.css の修正
48行目:background: transparent url(http://〜/blank.gif)
53行目:background: url(http://〜/prevlabel.gif)
54行目:background: url(http://〜/nextlabel.gif)

他にも Lightbox JSLightbox Plusがありますのでお好みに合わせて試してください。

■参考にさせていただいた記事
Lightbox JS v2.0 公開 : PamGau
『Lightbox JS v2.0』の導入例

過去記事を修正したり、rel="lightbox"を書くのが面倒くさいという方は、Fsiki さんのところで画像系のリンクはすべてlightboxで出てくるようにする方法が紹介されていますので参考にしてください。
Lightbox JS v2.0 導入しつつ改造 - LogJET

just.jpg

ここで使用した画像はこちらで作れます。
画像が簡単にできるジェネレータいろいろ
【R18】無駄にエロいジェネレータ



del.icio.us コメントを表示 はてなブックマークはてなブックマーク livedoorCriplivedoorCrip Yahoo!ブックマークに登録 Yahoo!ブックマーク
posted by らぶ | Comment(6)  | TrackBack(1)  | 04 Design*.
Comments
lightbox.js の修正
199行目:"http://〜/loading.gif"
212行目:"http://〜/close.gif"
この二行は別に必要ないっすよ〜
at 2006-11-09 01:24
ありがとうございます。
その2行は削除しておきます。

らぶ at 2006-11-09 18:41
後、scriptタグは閉じといた方がいいかも



   at 2006-11-10 19:29
あ、ほんとですね。
</script>を文字実体参照に変換するのを忘れてました><
重ね重ねありがとうございます。
らぶ at 2006-11-10 20:26
lightbox 2.0の後継としてlitebox 1.0が出てますよ。
scriptaculous.jsを使わずにmoo.fx.jsを使うことで軽量化に成功したようです。
面倒なので私はそのままlightbox 2.0を使っていますけど。
grinning at 2006-11-24 20:38
■grinningさん
誰かと思ったら熱血先生じゃないですか。
わたしも面倒なのでそのままにしておきます。
コメントありがとう。
らぶ at 2006-11-25 19:31
Add Comment
Name:

URL:

Comment:

Trackback
この記事へのトラックバック

Lightbox
Excerpt: 検索で見つけた LOVE IS DESIGN さんを参考にして、私も遅ればせながら Lightbox JS を入れてみました。 Lightbox JS が何か分からない人も多いと思いますが、ま..
Weblog: ぼちぼち人生
Tracked: 2007-02-13 23:57
人気エントリー Top 10
MoMAstore
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。