{"id":2097,"date":"2019-04-13T07:52:33","date_gmt":"2019-04-13T07:52:33","guid":{"rendered":"https:\/\/azoora.com\/blog\/?p=2097"},"modified":"2019-07-12T23:59:53","modified_gmt":"2019-07-12T23:59:53","slug":"panzoom-pan-zoom-image-using-js-css3-transforms","status":"publish","type":"post","link":"https:\/\/azoora.com\/blog\/code\/panzoom-pan-zoom-image-using-js-css3-transforms\/","title":{"rendered":"Panzoom: Pan & Zoom Image Using JS & CSS3 Transforms"},"content":{"rendered":"\n

Description:<\/h3>\n\n\n\n

Panzoom is a lightweight JavaScript library to pan and zoom images inside a container using drag and mouse wheel events.<\/p>\n\n\n\n

Not only images, the library also works with Canvas and SVG elements.<\/p>\n\n\n\n\n\n\n\n

How to use it:<\/h3>\n\n\n\n

Download and import the minified version of the Panzoom library into the html file.<\/p>\n\n\n\n
<script<\/code> src=\"\/path\/to\/panzoom.min.js\"><\/script><\/code>
<\/td><\/tr><\/tbody><\/table>\n\n\n\n

Insert images to the webpage. <\/p>\n\n\n\n
<img<\/code> class=\"panzoom\"<\/code> src=\"1.jpg\"><\/code>
<canvas<\/code> class=\"panzoom\"><\/code>
...<\/code>
<\/canvas><\/code>
<img<\/code> class=\"panzoom\"<\/code> src=\"1.svg\"<\/code> type=\"image\/svg+xml\"><\/code>
<\/td><\/tr><\/tbody><\/table>\n\n\n\n

Apply the PanZoom functionality to the images.<\/p>\n\n\n\n
PanZoom(“.panzoom”);
<\/td><\/tr><\/tbody><\/table>\n\n\n\n

Customize the PanZoom functionality with the following options.<\/p>\n\n\n\n
PanZoom(\".panzoom\", {<\/code>

\/\/ min\/max scale<\/code>
minScale : 0.1,<\/code>
maxScale : 5,<\/code>

\/\/ increment step<\/code>
increment  : 0.05,<\/code>

\/\/ whether to zoom linearly when using increment<\/code>
liner  : false<\/code>

});<\/code>
<\/td><\/tr><\/tbody><\/table>\n\n\n\n

Demo<\/strong>: Link<\/a><\/p>

Download<\/strong>: Github<\/a><\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"

Description: Panzoom is a lightweight JavaScript library to pan and zoom images inside a container using drag and mouse wheel events. Not only images, the library also works with Canvas and SVG elements.<\/p>\n","protected":false},"author":2,"featured_media":2099,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[4,12],"tags":[25,87],"jetpack_featured_media_url":"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/03\/Pan-Zoom-Image-Using-JavaScript-And-CSS3-Transforms-Panzoom-min.png","jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/p7FQPL-xP","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/2097"}],"collection":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/comments?post=2097"}],"version-history":[{"count":2,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/2097\/revisions"}],"predecessor-version":[{"id":2173,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/2097\/revisions\/2173"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media\/2099"}],"wp:attachment":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media?parent=2097"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/categories?post=2097"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/tags?post=2097"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}