M::Dialog

 
  

 【Highslide JS】画像拡大をさらにCOOLに

以前にサイズの大きな画像をCOOLに拡大表示するカスタマイズ「Lightbox js」を実装していましたが、最近チェックするとFirefoxでは正常に動作するんですが、IE6･7では挙動がおかしくなっていました。
一通り調べたんですが、CSSあたりが絡んでるのかな～というところまでで詳細はｻﾊﾟｰﾘ( -.-) =з
画像拡大は諦めて適当に縮小したものをアップするか、と半ばあきらめていたんです。

で、解決方法か代替案を探し、参考サイトを廻っていたところ見つけましたよ。
『Highslide js』というサムネイル画像をスマートに拡大表示してくれるライブラリだそうです。
このJavascriptの特徴として、以下のものがあります。

  • 拡大画像の下にタイトルや説明書きを表示可能
  • 拡大した画像をドラッグして移動可能
  • ウインドウサイズに合わせて拡大、100%表示も可能
実装にあたり参考にしたサイトはこちら。
Highslide JS でサムネイル画像を拡大表示する - 小粋空間,2007/01/18

導入は簡単ですし、Lightbox JSより軽快に動作している感じがありとても気に入っています。
拡大画像の枠もCSSで何種類かカスタマイズできるので、飽きたら変更すると思います。

動作方法は、サムネイル画像をワンクリックで拡大画像表示、そして拡大画像をワンクリックでサムネイル画像に戻します。
拡大可能な画像にマウスカーソルを乗せると、虫眼鏡カーソルの中に「＋」が表示されるので、どの画像が拡大されるかわかりやすいと思います。
下にサンプルを配置しておきますので、実際に動作させてみてください。
久々にさくらの写真です、夏に撮影したものですけど・・・。
さくらonビーチ

こんな風に説明書きを表示することも可能です。
この写真は、今年の夏にじぃちゃんの会社のBBQパーティで行ったビーチで撮影したものです。

  • Edit
  • Permalink
  • Comments(0)
  • Trackbacks(0)
  
  

 Trackback Pings(0)

No trackbacks found.

  
  

 Comments(0)

No comments found.

  

 Post a Comment

コメント用フィード