人妻WEBデザイナーのネタブログです。日々の出来事＆ネタ中心【ネトラジ（podcast）もやってます。】赤ちゃん産み落しました。
2007年8月25日
Lightbox JS で画像を表示する
色々なブログでサムネイル画像をクリックすると
同一ウィンドウで拡大画像が表示されるスクリプトを目にしていて
今日たまたまmixiのMovableTypeコミュでそのスクリプトを発見したので
エレ日にも導入してみました。
上の画像をクリックすると元画像が同一ウィンドウに表示されます。
閉じる時は右上の×ボタンです。
JSとCSSはMTのテンプレート化してみました。
ついでにimgにborder="0"をつけなくてもデフォルトの青い線がでないように
CSSにa img { border: none; } を追加しました。
０．動作 公式サイトでも確認できますが、とりあえず上のサムネイルをクリックしてください。ローディング画像が表示された後、元画像が表示されるという、お洒落なスクリプトです。 表示された画像をクリックすると元の画面に戻ります。一度表示された画像を再度クリックするとローディング画像は表示されません。以下、このスクリプトの設定方法です。
１．ファイルのダウンロード
動作に必要なファイル（スクリプト・スタイルシート・画像）をダウンロードします。
まず下記のサイトへ進んでください。Lightbox JS
表示されたページ一番下にある「DOWNLOAD」より下記のファイルをダウンロードできるようになってますので、それぞれのリンクをクリックしてください（IEであれば右クリックして「対象をファイルに保存」を選択）。lightbox.js - JavaScriptファイル
lightbox.css - スタイルシート
overlay.png - オーバーレイ表示するための背景画像
loading.gif - ローディング中に表示する画像
close.gif - 閉じるマーク画像
２．ファイルのアップロード
ダウンロードした全てのファイル・画像を index.html と同じディレクトリにアップロードします。
JSとCSS内のimgのパスはindexと個別アーカイブは階層が異なるので
相対パスから絶対パスへ修正する必要があります。
くわしくは小粋空間さんのエントリに詳しく書かれています↓
【関連リンク】
■Lightbox JS で画像を表示する（小粋空間さん）
投稿者： hiroe at 2007年8月25日 22:58
- 送る前に「当ブログのトラックバックポリシー」をご覧ください。
- この記事へトラックバックする場合は、このトラックバック用URLを、
あなたのウェブログ等の投稿ページの「トラックバック先のURL」欄に入れて更新してください。 - トラックバックが重複しても削除依頼コメントは不要です。適当に消しますので。
このエントリーのトラックバックURL:
コメント
コメントしてください。コメントをもらえると中の人が喜びます。
カテゴリー別
おかいもの [38]
おしごと [42]
このサイトについて [1]
エレラジ [45]
アニメ・コミック [17]
ゲーム・占い [65]
育児 [4]
シネマ [19]
ニュース・芸能 [34]
ブログペット [12]
動画・FLASH [24]
AKIBA [10]
BOOK [31]
Movable Type [33]
PC・デジモノ [53]
hiroe日常 [297]
music [43]
妊婦生活 [17]
食に関するコト [66]
hiroeleganceのエレガンスとは呼べないラジオ（通称：エレラジ）について
|
■ 過去放送保管庫（ケロログ支店） ■ 番組登録方法  iTunesをインストール済みの方はクリックするとiTunesが起動し、 簡単に番組を登録出来ます。 iTunesなどのPodcastingアプリケーションにドラッグ&ドロップしてください。 ●求む！メール職人さん （採用された方にはエレラジ特製ステッカープレゼント） ■ 曲のリクエストやコーナーへの投稿はこちらから！ ■ 番組に関するメールの宛先はradio@hiroelegance.netまで |
 skypeに凸電もお待ちしております |