🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

BeepPanZoom is a lightweight, responsive, mobile-friendly image viewer plugin for jQuery that allows the user to view, zoom, pan a specified image in a given container.

image-zoom image-viewer image-pan

Documentation

BeepPanZoom

A hammer.js & Jquery based Touch Event Enabled Image Viewer Plugin with Pan and Pinch Zoom Support,

  • Added Support for HTML MAPS, Which will auto postion and size anchros according to zoom level.
    Sample Usage:

    <div class="img_cotainer" style="overflow:hidden;width:100px;height:100px">
    <img src="assets/image.jpg" usemap="#image-map">
    <map name="image-map">
    <area target="" alt="" title="" href="http://example.com/" coords="1909,3816,2026,4061" shape="rect">
    </map>
    </div>

Usage :

include jquery and hammer.js
include our js plugin

<div class="img_cotainer" style="overflow:hidden;width:100px;height:100px">
<img src="my_big_image.jpg" style="width:inherit;height:inherit" />
</div>

Usage :
$(".img_cotainer").beepPanZoom();


Some Options :
ZOOM : initial Zoom
MIN_SCALE : Minimum Allowed Scale
MAX_SCALE : Maxmium Allowed Scale


*Example :
$(".img_cotainer").beepPanZoom({ZOOM:1/2,
MIN_SCALE:0,
MAX_SCALE:5});


Sorry, too lazy right now...

You May Also Like