Do It Yourself – Tutorials – JQuery Plugin tutorial 1 : Panzoom.js – Create your own website product zoom-ing effect

by | Sep 27, 2021 | 0 comments

Do It Yourself – Tutorials – JQuery Plugin tutorial 1 : Panzoom.js – Create your own website product zoom-ing effect

by | Sep 27, 2021 | Do It Yourself - Build Your Own Website | 0 comments

Do It Yourself – Website Tutorials



Simple solution for achiving E–Commerce website like product zooming feature using JQuery library Panzoom.js, you can also create Google map like Zoom-in, Zoom-out, Dragging, Panning effect with this awesome JQuery library, And the best part is total size of this Panzoom library is 10kb and it comes under MIT license, So use it for your next amazing project. and it also responsive with different screen sizes.

Download source code from here:
https://github.com/lanjewarraj/website-zoom-in-out-and-panning-effect-with-panzoom.js

See the live demo:
https://website-panning-and-zooming-effect.netlify.app/

Panzoom library link:
https://www.jqueryscript.net/zoom/jQuery-Plugin-For-Panning-Zooming-Any-Elements-panzoom.html

jqueryscript.net ( https://www.jqueryscript.net/ ) :
Free jQuery Plugins and Tutorials – One of the BEST jQuery websites that provide web designers and developers with a simple way to preview and download a variety of Free jQuery Plugins and more

source

[newsletter_form]
<div class="tnp tnp-subscription"> <form method="post" action="https://www.dienodigital.com/?na=s"> <input type="hidden" name="nlang" value=""><div class="tnp-field tnp-field-firstname"><label for="tnp-1">First name or full name</label> <input class="tnp-name" type="text" name="nn" id="tnp-1" value=""></div> <div class="tnp-field tnp-field-email"><label for="tnp-2">Email</label> <input class="tnp-email" type="email" name="ne" id="tnp-2" value="" required></div> <div class="tnp-field tnp-field-button"><input class="tnp-submit" type="submit" value="Subscribe" > </div> </form> </div>