September 19, 2013 4:47 pm

How to ZoomIn Images in jQuery

Image zoom-in is very useful feature in an eCommerce website to show your product images to viewers in zoom with there ease. So in this tutorial i am going to show you how to make a very simple zoom in image program in which I have used a jQuery plugin jQZoom and explain its usage with a demo and you can also download that script for free.

zoom-in-images-in-jquery

In demo i have shown 4 different demo examples like.

  1. Standard Zoom
  2. Reverse Zoom
  3. Drag Zoom
  4. Inner Zoom

Import jQuery and jQZoom libraries and css in your HTML File.

jQuery to initialize  your page images settings.

Images block where you have to put a small image(Thumbnail) and a large image (Original) like this.

Change id=”demo1″ to any other id as given in above jQuery in this script we have only 4 types of demos.

Download Script and use it its free and comment your reviews.

Author Huzoor Bux

I am Huzoor Bux from Karachi (Pakistan). I have been working as a PHP Developer from last 5+ years, and its my passion to learn new things and implement them as a practice. Basically I am a PHP developer but now days exploring more in HTML5, CSS and jQuery libraries.


Tutorial Categories:
  • flobamora

    it’s amazing tutorial…i like it……