how to use zoom lens in jquery

Description:
in this example we explain that how to create a lense zoom effect(mirror effect) of the image using jqury.


Look at the above Image we move the mouse on the wheel of the car then this part will be displayed in lenszoom effect.

First of all add jquery.elevateZoom-2.5.5.min.js and jquery-1.8.3.min.js

<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script src="jquery.elevateZoom-2.5.5.min.js" type="text/javascript"></script>

After this add below javascript function :

<script type="text/javascript">
        $(function () {
            $("#zoom_07").elevateZoom({
                zoomType: "lens",
                lensShape: "round",
                lensSize: 200
            });
        });
    </script>

<img id="zoom_07" src="images/small/image1.png" data-zoom-image="images/large/image1.jpg" />

No comments:

Post a Comment