人目をひきつける画像ギャラリーを作るスクリプト

Web活用備忘録

こんにちは！　新人？　制作Tです。

館内施設や取り扱い製品の紹介のため、たくさんの写真やイラストをホームページに掲載するとき、単純にたくさんのサムネイルと画像へのリンクをおくだけでは物足りないと思ったことはありませんか？

今回は、写真を美しく・格好よく見せ、人目をひきつける画像ギャラリーを作るスクリプトを紹介します。

すべてFlashのようにも見えますが、HTMLとJavaScriptで構成されているので更新のたびにFlashを作り変えるといった手間は必要ありません。

サムネイルのフェード効果が美しい

GALLERIA

jQueryで動作する画像ギャラリーです。サムネイルのフェード効果が美しいですね。

拡大画像の切り替え自体はフェードしないので、そのぶんモタつき感はありません。

軽量軽快、画像の動きも美しい　

Animated JavaScript Slideshow – 5KB　TinySlideshow v1

デモ※上記解説・配布元とはサブドメインが異なります。

他のJavaScriptライブラリには依存せず、単体で動作するギャラリースクリプトです。

こちらは拡大画像もフェードし、さらにキャプションもアニメーションします。

スクリプト自体は5KBとファイルサイズが小さいので、画像のおかげで重くなりがちなギャラリーページにはうれしい仕様ですね。

画像に反射効果をもたせて高級感を演出

Image Gallery using jQuery, Interface & Reflections

商品紹介に用いる画像に対して、高級感を演出するため水面や大理石の床に反射したかのような効果を付け加えることがあります。

反射効果のある画像を作るのは意外と手間がかかりますが、これは拡大画像の下に反射効果を反射効果を付け加えるスクリプトです。

これを使えば多くの画像に反射効果を付け加えて、手早く公開することができますね。

キャプションの動きが格好いい！

s3Slider

これはギャラリーではなくスライドショーのスクリプトです。キャプションを出すタイミングや位置、画像のアニメーションのしかたをを調節できるようですね。

Flashで作っていた製品スライドショーをこれに代替することにより、更新の手間を削減することができるのではないでしょうか。

＜制作＠アイタス＞

このエントリのキーワード:Webデザイナー, 社内勉強会