Wheelzoom Demo

Usage Demo

This page illustrates two simple implementation of the library. See full documentation on GitHub.

Events demo

Try to zoom with your mouse wheel and drag on the below image.

Fired event: ""

Event handling

This example shows a simple implementation of event handling:

• if you zoom one of the image, the same zoom level is applied to the other one;
• if you drag on one of the image, the same drag is applied to the other one.

• if you drag on one of the image, the same drag is applied to the other one, WHEN DRAG IS ENDEND.

Fullscreen support

X

• Support for fullscreen (image in portrait mode)

X

Bootstrap modal support

Image zoom in modal demo

Make scrollable .modal-body by adding max-height: calc(100vh - 212px); overflow-y: auto;

To work wheelzoom has to be called when the image is visible, so you need to use the Events

    $('#exampleModal').on('shown.bs.modal', function (e) {
        bsImageModal = wheelzoom(document.getElementById('img8'));
    });

    $('#exampleModal').on('hiden.bs.modal', function (e) {
        bsImageModal.wz.destroy()
    });