Not working in Bootstrap modal

Cepulis commented 6 years ago

The plugin is not working with Bootstrap 3+ modal and dynamic content built with ajax.

Luperi commented 6 years ago

Hi, can u please share a snippet of your code to help me investigate? Thanks

Cepulis commented 6 years ago

Hey, that was a fast reply :) I've tested with static content inside Bootstrap modal and it's not working. You can check it here: http://cepulis.com/zoom/

Thanks!

braucadr commented 4 years ago

Any news on this topic? I ran into the same problem when I modified the example as follows:

<!DOCTYPE html>
<html>
    <head>
        <title>Wheelzoom modal</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    </head>
    <body onload="load();">
        <h1>Wheelzoom with modal</h1>

        <a data-toggle="modal" href="#myModal"><img width="500px" src="./img/img1.jpg"></a>

        <!-- Modal -->
        <div class="modal fade" id="myModal" role="dialog" data-backdrop="static">
            <div class="modal-dialog modal-lg">

                <!-- Modal content-->
                <div class="modal-content">

                    <div class="modal-body">
                        <img id="img1" src="./img/img1.jpg" style="width: 100%;">
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>

            </div>
        </div>

    </body>

    <script src="../wheelzoom.js"></script>
    <script>
        function load() {
            image = wheelzoom(document.getElementById('img1'), {zoom: 0.1, maxZoom: 10});
        }
    </script>
</html>

Luperi / wheelzoom

Not working in Bootstrap modal #2