jQueryで画像を拡大させるJavaScript「Featured Image Zoomer」
ECサイトなどで使用される、画像にマウスを乗せると拡大するあれ。
jQueryプラグイン「Featured Image Zoomer」で実現しましょう。
sponsors
使用方法
Featured Image Zoomerからfeaturedimagezoomer.jsをダウンロードします。
ローディング画像もありますので、必要であれば一緒にダウンロードしてください。
また、jQueryからjquery.jsをダウンロードします。
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="featuredimagezoomer.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
$('#id名').addimagezoom({
zoomrange: [3, 6], //zoomレベルを設定
magnifiersize: [400,400], //拡大画像を表示するサイズ
magnifierpos: 'right', //拡大画像位置
largeimage: '/test/img/saleen.jpg' //拡大画像パス
})
});
</script>
なお、ローディング画像はfeaturedimagezoomer.js内に記述場所があります。
あとは拡大させたい画像にidを付与すれば完成です。
<amp-img id="id名" src="画像パス" />
jQueryで画像を拡大させるJavaScript「Featured Image Zoomer」サンプル
sponsors
記事作成:2010年5月20日 10:10
記事URL:http://www.skuare.net/2010/05/jqueryjavascriptfeatured_image.html
TOP > javascript > 画像関連 > jQueryで画像を拡大させるJavaScript「Featured Image Zoomer」
前の記事:jQueryで吹き出し風の説明をさせられるプラグイン「TipTip jQuery Plugin」
次の記事:テキストを好きなフォントで表示できるJavaScript「cufon」
あなたにはこちもお勧め!
jQuery プラグインまとめ!