How to use Photozoom and ModalBox together

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>
License & Download PhotoZoom
Chat With Us Close
Leave Message