Magnific Popup is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device
(for jQuery or Zepto.js).
Documentation · GitHub · WordPress plugin · Build tool · How it was made
1 2 3 4 5 |
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
$(document).ready(function() { $('.image-link').magnificPopup({type:'image'}); }); <div class="parent-container"> <a href="path-to-image-1.jpg">Open popup 1</a> <a href="path-to-image-2.jpg">Open popup 2</a> <a href="path-to-image-3.jpg">Open popup 3</a> </div> $('.parent-container').magnificPopup({ delegate: 'a', // child items selector, by clicking on it popup will open type: 'image' // other options }); $('.logo-popup-link').magnificPopup({ type: 'image' // other options }); $('.gallery-preview-image').click(function(){ console.log("We are here" ); var url_x = $(this).find("a").attr("href"); $.magnificPopup.open({ items: { src: url_x, // can be a HTML string, jQuery object, or CSS selector type: 'image'//inline } }); }); |