By clicking on the button .zoom-link "magnific" is triggered, but then it closes.

`

 $(document).on('click', '.zoom-link', function() { $('#gallery').magnificPopup({ delegate: 'a', type: 'image', closeOnContentClick: true, closeBtnInside: true, mainClass: 'mfp-with-zoom mfp-img-mobile', gallery: { enabled: true }, zoom: { enabled: true, duration: 300, opener: function(element) { return element.find('img'); } } }).magnificPopup('open'); }); 
 <div id="gallery"> <a href="img/portfolio/Layer31.jpg" class="gallery-item mobile"> <img src="img/portfolio/Layer31.jpg" alt=""> <div class="gallery-item__hover"> <div class="get-link"></div> <div class="zoom-link"></div> </div> </a> ...... </div>

Tell me what's the problem?

    1 answer 1

    Maybe it will be better? :

      $('#gallery').magnificPopup({ delegate: 'a', type: 'image', closeOnContentClick: true, closeBtnInside: true, mainClass: 'mfp-with-zoom mfp-img-mobile', gallery: { enabled: true }, zoom: { enabled: true, duration: 300, opener: function(element) { return element.find('img'); } } }); 
     body, #gallery { padding: 2rem; } img { max-width: 100%; width: 100%; height: auto; } 
     <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> <script src="https://code.jquery.com/jquery-1.11.3.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css" /> </head> <body> <div id="gallery"> <a href="http://www.simpsonsfamily.ru/wallpapers/angree-homer.jpg" class="gallery-item mobile"> <img src="http://www.clubsovetov.com/wp-content/uploads/2010/12/gomer.jpg" alt=""> <div class="gallery-item__hover"> <div class="get-link"></div> <div class="zoom-link"></div> </div> </a> ...... </div> </body> </html>

    Because it is not clear why you use $(document).on('click', '.zoom-link', function() { ...

    • As you suggested, it opens by clicking on the picture itself. And I wanted to make the buttons appear on hover over the picture, by clicking on one of them magnific would work. But thanks for the answer. - asarieria
    • one
      I listened to your answer and did the following. `$ ('. zoom-link'). on ('click', function () {$ ('# gallery'). magnificPopup ({.....}). magnificPopup ('open');}); `It all worked. - asarieria