wheelzoom icon indicating copy to clipboard operation
wheelzoom copied to clipboard

Published 20 hours ago • verified publisher icon Luperi

Not working in Bootstrap modal

Open Cepulis opened this issue 7 years ago • 3 comments

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

Cepulis avatar Jan 31 '18 13:01 Cepulis

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

Luperi avatar Jan 31 '18 13:01 Luperi

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!

Cepulis avatar Jan 31 '18 14:01 Cepulis

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>

braucadr avatar Jan 06 '20 13:01 braucadr