WEBシステム開発・デザイン制作などすべての作業を一貫してご提供しております。(大阪・東京近辺)

WEBシステム開発/Ajax/Lightbox2を使って、画像の表示をカスタマイズする

ブログに使われだして?一気にブレークした感じがする
Lightbox系の各スクリプトですが

その使い方はいたって簡単であり

各スクリプト、及びスタイルシートを読み込んで

<script type=”text/javascript” src=”js/prototype.js”></script>
<script type=”text/javascript” src=”js/scriptaculous.js?load=effects,builder”></script>
<script type=”text/javascript” src=”js/lightbox.js”></script>

<link rel=”stylesheet” href=”css/lightbox.css” type=”text/css” media=”screen” />


イメージタグにのrel指定をしてやれば、直ぐに画像表示をカスタマイズする事が
できます。

<a href=”images/image-1.jpg” rel=”lightbox” title=”my caption”>image #1</a>

非常に簡単ですね。

味気ない画像表示を、アニメーションを使って効果的にカスタマイズするだけで
コストをかけない演出をだせますよね。

■Lightbox2デモ
www.huddletogether.com/projects/lightbox2/#example

■Lightbox2
www.huddletogether.com/projects/lightbox2/#download