Usage

Usage

It is super simple to use Zoomy. First just attach jQuery, 'zoomy.css' file, and the Zoomy plugin file (either jquery.zoomy1.3.3.min.js or jquery.zoomy1.3.3.js)

<link type="text/css" rel="stylesheet" href="path-to/zoom1.3.3.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script type="text/javascript" src="path-to/jquery.zoomy1.3.3.min.js"></script>

Then make sure that this is similar to your layout of the image you want to use Zoomy on. This is the most common configuration, but there are also others that will work.

<a href="zoomImg.jpg" class="zoom">
    <img src="displayImg.jpg" alt="This is the Display Image" />
</a>

Then add in this snippet of Javascript to start Zoomy

$(function(){
    $('.zoom').zoomy();                
}(jQuery))

Alternate Usage

Link to site but also Zoom

With this configuration I will show you how to link to a site using an image that also can Zoom.

The layout is very similar except for one thing which is the property that holds the path to the zoom image.

<a href="http://google.com" rel="zoomImg.jpg" class="zoom">
    <img src="displayImg.jpg" alt="This is the Display Image" />
</a>

Then the options need to change a little when calling zoomy.

$(function(){
    $('.zoom').zoomy('mouseover',
        {
            clickable: true,
            attr: 'rel'   
        }
    );                
}(jQuery));

Instead of using all the defaults I have configured the event to equal 'mouseover' so that zoomy will initiate on 'mouseover' rather than 'click'. Also in the clickable option I have used true instead of false, which is default. Letting the a click on the anchor tag act natively. Lastly in the attr option, I change it to the attribute rel. Which will tell zoomy to look for the path to the zoom image in the rel attribute.