CODEWITHSUNDEEP
jqueryjquery-uielevatezoom
Behrouz Sameny
Behrouz Sameny

Reputation: 1

implement elevate zoom on bootstrap modal

I am trying to use elevate zoom in a modal using bootstrap.

I tried everything and unfortunately had no result.

I would appreciate if someone could give me any similar sample

Upvotes: -1

Views: 2440

Answers (1)

GiuServ
GiuServ

Reputation: 1235

I had the same problem. I manage to solve it looking at this anwser, but changing the zoomType to lens mode (see docs).

So my code, to use elevate zoom in my modal, is:

1) Adjust Css:

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

2) Call te plugin when the modal is ready:

$('#myModal').on('shown.bs.modal', function() {
    $("#zoom_05").elevateZoom({
        zoomType: "lens",
        lensShape: "round",
        lensSize: 300
    });
});

As you can see, i used also the lensSize option to 300, to make the zoom bigger; That's because the Mousewhell zoom has some problem when in a boostrap modal, meanwhile the lens mode is a fast solution already working as it is.

Upvotes: 2

Related Questions