Web活用備忘録
画像を格好よく拡大させるスクリプト
2008 年 10 月 22 日
こんにちは。アイタス制作の新人?Tです。
Webサイトに画像は必須。特にECサイトや不動産情報サイト、写真やイラストのギャラリーサイトでは大きな写真が無いとユーザーに見てもらえません。
とはいえいきなり大きな画像を掲載しても、読み込みに時間がかかってしまいます。
そこで「ちいさな画像(サムネイル)をクリックし拡大画像を表示」ということが行われていますが、少し前はFlash、最近ではJavascriptを用いて拡大画像の表示処理にも演出を加えるようになってきています。
今回は、アイタス制作スタッフが気にかけている「画像拡大表示」スクリプトをご紹介していきたいと思います。
lightbox2.js
定番の感のあるスクリプト。サムネイルをクリックすると拡大画像が「ひょいっ」と表示されます。この種類のスクリプトで最古のスクリプトlightbox.jsの後継だけあって、動作も安定しています。数年前に登場したときは、「このFlashどうなってんの?」と思ったものです……。
jQuery Lightbox plugin
上記とほぼ同じ動きですが、より動作の軽いスクリプトです。私はこちらのほうが好きですね。
jQuery.flyout
画像ズームの動きがおもしろいスクリプト。Flashのような動きが欲しいときにはいいかもしれませんね。
Highslide JS
上記jQuery.flyoutに加え、キャプションの位置や拡大画像の周囲の枠の有無を変えることができます。動作もこちらのほうが若干早い印象ですね。
MojoMagnify
画像にカーソルを乗せると、カーソルのまわりに拡大画像が表示されます。モノクロ写真を部分的にカラーにしたり、という演出もできます。このスクリプトこそ「ウォーリーを探せ!」に必要なツールだと思います。
magiczoom
上記MojoMagnifyのアイデア元になったスクリプト。拡大画像を別の場所に表示し、なおかつカーソルの動きに合わせて拡大している場所が移動します。レイアウトも自由で使いやすい!
他にも類似のスクリプトはたくさんありますし、アイデア次第で「拡大画像を表示させる」以外の使いかたをすることもできますね。
<制作@アイタス>
カテゴリー別一覧
- 観光施設のWeb戦略 (32)
- Good&New (1)
- 新・営業日報 (10)
- まとめ (1)
- 営業週報 (2)
- 新人視点で再掲 (9)
- 石川校正本舗 (2)
- 歯科医院のWeb戦略 (15)
- 地方自治体のWeb戦略 (30)
- 大学・専門学校のWeb戦略 (32)
- 宿泊施設のWeb戦略 (24)
- 製造業のWeb戦略 (21)
- 採用コーナーの企画 (4)
- ECサイトの施策 (29)
- リアル店舗への集客戦略 (27)
- 不動産会社のWeb戦略 (27)
- 企業WebサイトNG集 (20)
- 予算50万円のWeb戦略 (15)
- 予算300万円のWeb戦略 (11)
- WordPressで企業サイト構築 (30)
- Movable Type活用法 (21)
- 『入力フォーム』を磨き上げろ! (5)
- カラーユニバーサルデザイン (1)
- つくる前にチェック (68)
- Web施策用語集 (1)
- 参考書籍 (28)
- 無料提供資料 (20)
- 札ビル物語(営業日報) (99)
- 今スグ試せるWeb活用研究会 (27)
- 冒険の地図 (7)
- アイタスが学んだこと (31)
- 合流方法(採用について) (39)
- OTHER (11)
- カイゼンのジツエン (16)
- コラボレーション (4)
- 新人スタッフ (30)
- 今日のさっぽろ時計台前 (46)
- 今日の道庁赤レンガ前 (37)
- 達成したこと&ありがとう (12)