Skip to content

Instantly share code, notes, and snippets.

@greenboyroy

greenboyroy/index.html

Last active August 29, 2015 14:08
Show Gist options
  • Save greenboyroy/4ce842ba493853561e7c to your computer and use it in GitHub Desktop.
Save greenboyroy/4ce842ba493853561e7c to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/0.9.9/jquery.magnific-popup.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<ul class="gallery">
<li><a href="http://placehold.it/500" title="Test Image"><img src="http://placehold.it/250"><h3>Title</h3><div class="extra" style="display:none;"><p>This is some text.</p></div></a></li>
<li><a href="http://placehold.it/501" title="Test Image"><img src="http://placehold.it/251"><h3>Title</h3><div class="extra" style="display:none;"><p>This is some text.</p></div></a></li>
</ul>
<script>
$('.gallery').magnificPopup({
type: 'image',
delegate: 'a',
image: {
markup: '<div class="mfp-figure">'+
'<div class="mfp-close"></div>'+
'<div class="mfp-img"></div>'+
'<div class="mfp-sidebar">'+
'<div class="mfp-title"></div>'+
'<div class="mfp-extra"></div>'+
'</div>'+
'</div>', // Popup HTML markup. `.mfp-img` div will be replaced with img tag, `.mfp-close` by close button
cursor: 'mfp-zoom-out-cur', // Class that adds zoom cursor, will be added to body. Set to null to disable zoom out cursor.
titleSrc: 'title', // Attribute of the target element that contains caption for the slide.
verticalFit: true, // Fits image in area vertically
},
callbacks: {
markupParse: function(template, values, item) {
values.extra = item.el.children('.extra')[0].innerHTML;
}
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment