Magnific Popup responsive lightbox

back to snippest | Comment | Share

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

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

$(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
  }
});
		

    });

$(document).ready(function() {

$('.image-link').magnificPopup({type:'image'});

});

<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

}

});