東京ウェブデザへろへろ日記

ホームページ制作、ホームページデザイン
ビジネス専用
バー
ライン

東京ウェブデザへろへろ日記

ポップアップウィンドウの進化形、ライトボックス。
|2009年6月 3日 21:49| コメント(0)

写真をポップアップで見せるとき、もうひと味、演出を加える方法がある。それがライトボックスだ。

初心者の方のために説明すると、ホームページ上にサムネイルをのせておいて、その写真をクリックするとサイズを固定した窓が開いて、そこに大きな写真が出てくる、それがポップアップウィンドウである。私自身はあまり好きな構造ではないが、この形式がとても好きな人もいる。

そうしたポップアップの一種で、そこに演出を加えて、ちょってお粋な感じを出すスクリプトが「ライトボックス」である。

ライトボックスというのは、元の意味は、ポジフィルムを見るための照明装置でである。たしかにそういうイメージになっている。光のコントラストを強調しているので、写真をキレイに見せることができる。

今回は、下記のサイトが提供しているフリーのスクリプトを使ってみた。 

lightbox01.jpg
http://www.lokeshdhakar.com/projects/lightbox2/

ジャバスクリプトを使っているようだ(もしかしたらAjaxかもしれない)。使い方は簡単である。解説は英語なのでその点がわかりにくいが...

まず、ジャバスクリプトのリンクをコピーして貼り、次にCSSのリンクをコピーして貼る。そして、フォルダの中に入っているファイルを自分の制作しているサイトのフォルダに入れて、自分のサイトのサムネイル画像から、リンクを貼る。このリンクの貼り方は英語で例文が書いてある通りにする。(ただし導入ファイルが同階層の場合)。

どうですか、うまく行きましたか。わりと簡単にできて、演出効果が高いと思う。


次の記事 → Google 検索エンジン最適化スターター ガイド。
前の記事 ← CPIサーバーのカート設定をした。

コメントする
名前

電子メール

URL

ログイン情報を記憶


ウェブデザイナー
最近のエントリー
アーカイブ
Copyright (c) 1999-2010 Wasshoi,Ltd., Tokyo Japan, All Rights Reserved.