on:2011年2月25日sponsorsプロダクトページなどによく利用される、画像の一部を拡大する実用的で軽量なjQueryのプラグインを紹介します。Zoomデモページ[ad#ad-2]デモではサムネイル画像にカーソルを合わせると、その箇所を中心に拡大表示し、ディテールをユーザーに提供することができます。スクリプトは使い勝手をよくするために、できるだけ軽量にし、またカスタマイズも簡単にできるように設計した、とのことです。Zoomの実装HTMLサムネイル画像をimg要素で実装し、拡大画像をa要素に配置します。/></a>CSS拡大画像のスタイルはCSSで簡単にカスタマイズが可能です。下記はデモページの例です。*/line-height:400px;text-align:center;}[ad#ad-2]JavaScript「jquery.js」と「easyzoom.js」を外部ファイルに指定するだけで、実装が可能です。class名などに独自のものを使用することも簡単に対応できます。スクリプトのオプションid任意のidを付与することができます。デフォルトは「easy_zoom」です。parent画像をズームするエレメントが挿入されるDOMエレメントです。デフォルトは「body」です。appendデフォルトの「true」では親エレメントの最後の子として挿入し、「false」では親エレメントの最初の子として挿入します。preload大きい画像のローディング時に表示するデータです。デフォルトはテキストデータですが、HTMLでも可です。error大きい画像が読み込めない際のエラー時に表示するデータです。これらのオプションを使用すると、スクリプトは下記のようになります。Posts関連記事が見つかりませんでした。