ElevateZoom don't work in bootstrap modal

Question

I use the ElevateZoom jQuery plugin for photo zooming (http://www.elevateweb.co.uk/image-zoom/examples). It works fine, but when I show an image in a bootstrap modal the zooming doesn't work anymore.

Does anybody know how I can let the zooming work in a bootstrap modal?

Example of the code: http://ec-auditfile.nl/demo.html

Answer 1

Your zoom is working, it's just hidden behind your modal.

Adjust z-index of your zoomed image to be over the modal.

    .zoomContainer{ z-index: 9999;}
    .zoomWindow{ z-index: 9999;}

You may also need to add .elevateZoom() function as a callback to modal show event

Example (using Bootstrap 3)

$(document).ready(function () {
    $('#myModal').on('shown.bs.modal', function() {
        $("#zoom_05").elevateZoom({
            zoomType: "inner",
            cursor: "crosshair"
        });
    })
});