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.


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



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

<!-- Anchor tag is for ModalBox --> 
<a href="" id="image">
<!-- Img is for photozoom -->
        <img id="photozoom1" class="img-polaroid" data-largesrc=""
            src="" alt="" />


<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 });
<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 () {
            Type: 'image',
            OnShow: function (i) {
                $("#rst-modal-content img").photozoom({ Position: 'over', ZoomLevel: 2, Action: 'hover' });

License & Download PhotoZoom