Tuesday, November 13, 2012

A very simple and easy to use Image Zoom Plugin

Today I would like introduce a very simple and easy to use Jquery Plugin called GS Inner Zoom. GS Inner Zoom is a jQuery plugin that allow you to do an inner zoom or magnifier inside an image. It is very useful and powerful for web developers to show their photos or images clearly on the web.

Only a few of codes will Achieve the effects. It is easy to begin:

1. Call jquery.gs-innerzoom.min.js into your head html page :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://gs-libs.googlecode.com/files/jquery.gs-innerzoom.min.js"></script>

2. On your image tags, put data-big attribute that links to the big image :

<img src="/path/your-small-image.jpg" data-big="/path/your-big-image.jpg" />

3. Call Inner Zoom function into a script tag :

<script type="text/javascript">
    $(
        function()
        {
            $('img').GSInnerZoom();
        }
    );
</script>

For more advanced options, please visit GS Inner Zoom Official Website.

Reference: GS Inner Zoom Demo and Download

No comments:

Post a Comment