jQzoomer

Back to HOME

Image

Intro

This plugin was built for a client to use on her e-commerce website in 2014. Unfortunately, the website did not pursue.

Tweaked a bit since V.1 is buggy, so this is V.1.5

Tools used in this Project

  • HTML
  • jQuery
  • CSS

Installation

        <script type="text/javascript" src="jquery.js" ></script>
        <script type="text/javascript" src="jqzoomer.1.5.min.js" ></script>

How to Use

        <script type="text/javascript">
            jQuery(document).ready(function(){
                jQuery(".[CLASS]").jqzoomer();

                // Or

                jQuery("#[ID]").jqzoomer();
            });
        </script>

        <div class="CLASS">
            <a href="path_to_BIG_image.jpg">
                <img src="path_to_SMALL_or_Default_image.jpg" />
            </a>
        </div>

        <div class="CLASS">
            <a href="path_to_BIG_image.jpg">
                <img src="path_to_SMALL_or_Default_image.jpg" />
            </a>
        </div>

        <div id="ID">
            <a href="path_to_BIG_image.jpg">
                <img src="path_to_SMALL_or_Default_image.jpg" />
            </a>
        </div>

Demo

Hover your mouse on the images.

Download

This jQuery plugin is FREE to use.
You may use jQzoomer plugin / project under the terms of BSD License.