Delivering the best Add-Ons in more than 37 languages.

中文(简体), English, हिन्दी/हिंदी, Español/Castellano, العربية, Русский язык, Français, 中文 (台灣), বাংলা, Bahasa Indonesia, اردو, Português, Deutsch, Bahasa Melayu (بهاس ملايو‎), 日本語 (にほんご), فارسی, Italiano, తెలుగు, Türkçe, ગુજરાતી, Język polski/polszczyzna, Tiếng Việt, ಕನ್ನಡ, Українська мова, ไทย
JavaScript / Images and Media

jQuery Mega Image Viewer - animated zoom and pan

— Add-On to

Subscribe to our feed to stay up to date!

New! Follow us as you want it!

jQuery Mega Image Viewer - animated zoom and pan - CodeCanyon Item for Sale


Ad: Bluehost hosting

The mega image viewer jQuery plugin allows you to easily replace <div> tags
with animated image viewers.

Viewer used for displaying high-resolution object (image – JPG, PNG, GIF).
Viewer displays the given display object inside the user-defined viewport area.
Viewer allows to control the position and zoom of the object displayed
inside the viewport. Viewer controls the sliding and zoom of the displayed object
so that the viewport area will be filled completely.

  1. Touch support for mobile devices.
  2. Mouse or Touch drag.
  3. Mouse wheel to zoom / unzoom.
  4. Mouse click or Touch move to center viewport.
  5. Possible viewport resize on runtime.
  6. Package contains a example for building thumbnail gallery.
  7. Package contains a example for building lightbox gallery (ColorBox Gallery).
  8. Cross-browser compatible – Image Viewer is compatible with IE, CHROME, FIREFOX, OPERA, SAFARI.
  9. Very easy installation on your html page.
  10. Very smooth animations.
  11. Fully scalable.
  12. Displays the map palette to quickly change the view using a thumbnails.
  13. Placing hotspots on images.
  14. Addition popup windows on the hotspot.
Viewer functionality:
  1. set start coordinates and scale
  2. navigation bar (enabled / disabled)
  3. navigation bar autohide
  4. set the navigation bar position (acceptable values: TL, T, TR, L, R, BL, B, BR)
  5. set animation duration
  6. set drag inertia
  7. set image source from javascript {“contentUrl” : “images/my_image.jpg”} (relative or absolute path)
  8. set image source from html <img src=”images/my_image.jpg”/>
  9. dispatch event ‘mivChange’ with information whether it is possible to move and zoom the display object


13.09.2014 (V2.5)

New features:

  • Pinch zoom.


added new settings for more control zooming:
- ‘zoomLevel’ (now possible zooming over 100%)
- ‘zoomStep’


Update external libraries included in the package to: jquery-1.10.1, jquery-ui-1.10.3, colorbox-1.4.26


Fixes minor bug in Chrome browser.

31.01.2013 (V2.0)

New features:

  • Added ability to control the size of navigation buttons.
  • Added demo full screen mode.
  • Few minor bug fixes in to use touch devices.

19.08.2012 (V2.0)

New features:

  • Set visibility of the buttons in the navigation bar.
  • Displays the map palette to quickly change the view using a thumbnails.
  • Placing hotspots on images.
  • Addition popup windows on the hotspot.


New features:

  • Set fit method to viewport.
    default: false; accepted: true, false; Shorter side of the displayed object will fit the viewport
  • Set image scale method.
    default: false; accepted: true, false; If the viewport size (width and height) is greater than the size of the displayed object, allow the object scaled over 100% to fit the viewport (zoom is disabled)

Other components in this categoryAll components of this author
CommentsFrequently asked questions and answers


30 June 12

Last Update:
13 September 14

Compatible Browsers:
IE8, IE9, IE10, IE11, Firefox, Safari, Opera, Chrome

Files Included:
JavaScript JS, HTML, CSS

Software Version:


eCommerce, eCommerce, All Items, animate, hotspot, image, jquery plugin, lightbox, pan, pinch, popup, resize, scale, touch, viewer, zoom