ElevateZoom not working in bootstrap modal

Question

I use the ElevateZoom jQuery plugin to scale photos ( http://www.elevateweb.co.uk/image-zoom/examples ). It works fine, but when I display the image in the bootstrap module, scaling no longer works.

Does anyone know how I can let scaling work in the bootstrap module?

Sample code: http://ec-auditfile.nl/demo.html

Answer 1

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

Adjust the z-index of your enlarged image to be above the modal.

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

.elevateZoom() show

( Bootstrap 3)

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