• 4/15/2013
• 2219
• PhotoZoom Plugin, jQuery Plugin, Photozoom feature , modalbox popup, jQuery popup, fancybox alternative, lightbox alternative, Rudra Softtech LLP

This is an example to show how easy it is to use Photozoom and Modalbox. This feature can be very useful in e-commerce websites.

Example

Mouse-over the image or slide over the image. Click on the image to show bigger picture via Modal box

Code

Html

Notice the example uses a different image to zoom, check data-largesrc attribute in image tag.

<!-- Anchor tag is for ModalBox --> 
<a href="http://www.rudrasofttech.com/res/img/sample/rocky1.jpg" id="image">
<!-- Img is for photozoom -->
        <img id="photozoom1" class="img-polaroid" data-largesrc="http://www.rudrasofttech.com/res/img/sample/rocky1.jpg"
            src="http://www.rudrasofttech.com/res/img/sample/small/rocky1.jpg" alt="" />
    </a>

Script

<link href="photozoom.css" rel="Stylesheet" />
<script src="photozoom.js" type="text/javascript"></script>
<script src="swipe.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#photozoom1").photozoom({ Position: 'right', ZoomLevel: 1, Action: 'hover', Distance: 5 });
    });
</script>
<link href="modal.css" rel="Stylesheet" />
<link href="modal-darktheme.css" id="modaltheme"
    rel="Stylesheet" />
<script src="modal.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#image").modalbox({
            Type: 'image',
            OnShow: function (i) {
                $("#rst-modal-content img").photozoom({ Position: 'over', ZoomLevel: 2, Action: 'hover' });
            }
        });

    });
</script>