【jQuery】モバイルフレンドリーな画像ズームスクリプトZoomio

jQuery

zoomio

March 22, 2017

Zoomioはモバイルに適したイメージズームスクリプト。ユーザーはマウスを動かすだけで、拡大した画像を表示することができます。モバイルデバイスでは、ユーザーが画像をタップして大きな画像を表示し、ドラッグすることができます。ズーム機能は元画像のサイズに基づいて表示することで機能します。

必要に応じて読み込まれる「拡大」画像とは別のより高解像度の画像を指定することもできます。

Installation

jQuery 1.7.0以上が必要

<style>

/* sample CSS to set the initial dimensions of images that will be zoomable */
.sampleimage{
	width: 300px;
	height: auto;
	margin-right: 50px;
}


</style>

<link rel="stylesheet" href="zoomio.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script src="zoomio.js">

/***********************************************
* Zoomio- jQuery In-Place Image Zoom - (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Please keep this notice intact
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<script>

jQuery(function($){ // on DOM load
	$('.sampleimage').zoomio({
		fadeduration: 500
	})
})

</script>

Setup Information

zoomio()ドキュメントが読み込まれた後、ズームイン可能にするイメージ上にある関数を呼び出す。

jQuery(function($){ // on DOM load
	$(selector).zoomio()
})

selectorは、以下のように、Zoomioを起動する。1つまたは複数の画像を選択する

$('#myimage').zoomio() // add Zoomio to a single image with ID "myimage"
$('.sampleimage').zoomio() // add Zoomio to all images with CSS class "sampleimage"

CSSを使用して縮尺が縮小された画像が表示されるので大きめの画像をセット。

<img class="sampleimage" src="landscape.jpg" />

またはdata-largesrcでより高い解像度のバージョンを指す属性を定義。

<img class="sampleimage" src="landscapesmall.jpg data-largesrc="landscapelarge.jpg" />
fadeduration: milliseconds フェードインの有効期間(ミリ秒単位)
w: widthString “300px”、 “80%”などの任意の単位でのズームエリアインターフェースの幅
h: heightString “300px”、 “80%”などの任意の単位でのズームエリアインターフェースの高さ

Example

$('#myimage').zoomio({
	w: '80%',
	h: '300px' // <-- No comma after last option
})

MIT

Latest Posts

Related Posts