jQuery

【jQuery】最適化された画像ズームプラグインEasyZoom

February 19, 2017
easyzoom

EasyZoomはエレガントで高度に最適化された画像ズームjQueryプラグイン。タッチ対応デバイスをサポートしており、CSSで簡単にカスタマイズできます。

HTML

<div class="easyzoom">
    <a href="images/zoom.jpg">
        <img src="images/standard.jpg" alt="" />
    </a>
</div>

CSS

/* Shrink wrap strategy 1 */
.easyzoom {
    float: left;
}
.easyzoom img {
    display: block;
}


/* Shrink wrap strategy 2 */
.easyzoom {
    display: inline-block;
}
.easyzoom img {
    vertical-align: bottom;
}

JavaScript

// Instantiate EasyZoom instances
var $easyzoom = $('.easyzoom').easyZoom();

// Get an instance API
var api = $easyzoom.data('easyZoom');

Options

Option Default value
loadingNotice “Loading image”
errorNotice “The image could not be loaded”
errorDuration 2500
linkAttribute “href”
preventClicks true
onShow $.noop
onMove $.noop
onHide $.noop

API

  1. .show([MouseEvent|TouchEvent], [Boolean])
  2. .hide()
  3. .teardown()
  4. .swap(standardSrc, zoomSrc, [srcset])

MIT