Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Not working in Bootstrap modal #2

Open
Cepulis opened this issue Jan 31, 2018 · 3 comments
Open

Not working in Bootstrap modal #2

Cepulis opened this issue Jan 31, 2018 · 3 comments

Comments

@Cepulis
Copy link

Cepulis commented Jan 31, 2018

The plugin is not working with Bootstrap 3+ modal and dynamic content built with ajax.
@Luperi
Copy link
Owner

Luperi commented Jan 31, 2018

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

@Cepulis
Copy link
Author

Cepulis commented Jan 31, 2018

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
Copy link

braucadr commented Jan 6, 2020

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>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@Luperi @braucadr @Cepulis