magnific-popup
Version:
Lightbox and modal dialog plugin. Can display inline HTML, iframes (YouTube video, Vimeo, Google Maps), or an image gallery. Animation effects are added with CSS3 transitions. For jQuery or Zepto.
102 lines (87 loc) • 6.99 kB
HTML
---
layout: default
title: Magnific Popup: Responsive jQuery Lightbox Plugin
description: Light and open source responsive lightbox plugin with focus on performance, for jQuery and Zepto.js. High-DPI (retina) display support, fast tap for touch devices.
canonical_url: http://dimsemenov.com/plugins/magnific-popup/
include_credit: true
buildtool: true
---
<div id="logo">
<canvas id="broken-glass"></canvas>
<h1 id="logo-title">Magnific Popup</h1>
</div>
{% include logo.html %}
<div>
<h2 class="intro">Magnific Popup is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device<br/>(for jQuery or Zepto.js).</h2>
<div id="header-links">
<a href="documentation.html">Documentation</a> · <a href="https://github.com/dimsemenov/Magnific-Popup">GitHub</a> · <a href="wordpress.html" class="wp-version-link" data-mfp-src="#mc_embed_signup">WordPress plugin</a> · <a href="#mfp-build-tool" class="mfp-build-tool-link">Build tool</a> · <a class="smashing-link" href="http://coding.smashingmagazine.com/2013/05/02/truly-responsive-lightbox/">How it was made</a>
</div>
</div>
{% include examples.html %}
<p id="smashing">Don't forget to check out <a href="http://coding.smashingmagazine.com/2013/05/02/truly-responsive-lightbox/">my new article</a> about this plugin on the <a class="smashing-link" href="http://coding.smashingmagazine.com/2013/05/02/truly-responsive-lightbox/">Smashing Magazine</a>.</p>
<h2>What makes this plugin different?</h2>
<div class="features grid-c">
<div class="gc3">
<h3>Light and modular</h3>
<p>You can choose to include only the features that you need using the <a href="#mfp-build-tool" class="mfp-build-tool-link popup-link">online build tool</a> or by compiling it yourself with <a href="http://gruntjs.com">Grunt.js</a>. Size of core JS file is about <strong>3KB</strong> + each module weighs about 0.5KB (gzipped). Sass CSS preprocessor is used for easier skinning, but you're not obligated to use it.</p>
</div>
<div class="gc3">
<h3>Content is resized with CSS</h3>
<p>The majority of lightbox plugins require you to define size of it via JS option. Magnific Popup does not - feel free to use relative units like EM's or resize lightbox with help of CSS media queries. Update content inside lightbox without worrying about how it'll resize and center.</p>
</div>
<div class="gc3">
<h3>Fast</h3>
<p>Magnific Popup displays images before they're completely loaded to take full advantage of progressive loading. For in and out transitions CSS3 is used instead of slow JavaScript animation.</p>
</div>
<div class="gc3">
<h3>High-DPI (Retina) display support</h3>
<p>Default controls are made with pure CSS, without external graphics. For the main image there is a built in way to provide appropriate source for different pixel density displays.</p>
</div>
<div class="gc3">
<h3>Conditional lightbox</h3>
<p>Plugin has an option to automatically switch to alternative mobile-friendly source on small screen size. Brad Frost has a <a href="http://bradfrostweb.com/blog/post/conditional-lightbox/">terrific article</a> about this technique.</p>
</div>
<div class="gc3">
<h3>Memory management</h3>
<p>Popup has an extendable micro templating engine that reuses existing DOM elements (<a href="http://codepen.io/dimsemenov/pen/sHoxp">example</a>), which is especially useful when your popups same pattern.</p>
</div>
</div><br/>
{% include signup.html %}
<h2>Browser support</h2>
<p>Tested on desktop: Chrome, Safari, FF, Opera, IE8+, partial support of IE7 (works, but some visual layout features, like vertical centering, are missing). Mobile: default browser in Android 2.3+, iOS5+, Blackberry
10+, WP7+, mobile Opera and Chrome on Android. If you noticed any bug, please open an <a href="https://github.com/dimsemenov/Magnific-Popup/issues?state=open">issue on GitHub</a></p>
<h2 id="license">License</h2>
<p>Script is available under MIT license and will always be kept this way.<br/>But please do me a favor and do not create a public WordPress plugin based on it, because I will make it soon and it will be open souce too. (<a href="http://dimsemenov.com/subscribe.html">Want to get notified?</a>).
</p>
<h2>Bugs & contributing</h2>
<p>Please report bugs via <a href="https://github.com/dimsemenov/Magnific-Popup/issues">GitHub</a> and ask general questions through <a href="http://stackoverflow.com/questions/ask?tags=magnific-popup">StackOverflow</a>. Feel free to submit commit, even the tiniest contributions to the script or to the documentation are very welcome.</p>
<p>Special thanks to:</p>
<ul>
<li><a href="https://twitter.com/lokesh">Lokesh Dhakar</a> for original Lightbox script.</li>
<li><a href="https://twitter.com/chriscoyier">Chris Coyier</a> for awesome CSS techniques.</li>
<li><a href="https://twitter.com/brad_frost">Brad Frost</a> for conditional lightbox technique.</li>
</uL>
<h2>Updates</h2>
<p>If you wish to get notified about important plugin updates, you may star and watch the repository on <a href="https://github.com/dimsemenov/Magnific-Popup">GitHub</a>, follow <a href="http://twitter.com/dimsemenov">me on Twitter</a>, or join my tiny Mailchimp <a href="http://dimsemenov.com/subscribe.html">email newsletter</a> that I send 3-4 times a year.</p>
<div class="share-buttons">
<h2>Please spread the word if you find the plugin useful</h2>
<div id="buttons-row">
<a id="tweet" rel="nofollow" href="https://twitter.com/intent/tweet?text=Magnific%20Popup%20-%20responsive%20lightbox%20plugin&url=http%3A%2F%2Fbit.ly%2Fmagnificpopup&via=dimsemenov">Tweet!</a>
<a id="like" rel="nofollow" href="http://www.facebook.com/sharer.php?u=http%3A%2F%2Fdimsemenov.com%2Fplugins%2Fmagnific-popup%2F%3Futm_source%3Dfb%26utm_medium%3Dsocial%26utm_campaign%3Dmfp">Like!</a>
<a id="gplus" rel="nofollow" href="https://plus.google.com/share?url=http%3A%2F%2Fdimsemenov.com%2Fplugins%2Fmagnific-popup%2F%3Futm_source%3Dgplus%26utm_medium%3Dsocial%26utm_campaign%3Dmfp">+1</a>
<iframe src="http://ghbtns.com/github-btn.html?user=dimsemenov&repo=magnific-popup&type=watch&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="155" height="30" style="transform: translateY(8px);-moz-transform: translateY(8px);-webkit-transform: translateY(8px); margin-left: 9px;"></iframe>
</div>
</div>
<script>
(function(){
var openWindowPopup = function(e) {
if(!e) return;
e.preventDefault();
window.open(e.target.href, "intent", "scrollbars=yes,resizable=yes,toolbar=no,location=yes,width=550,height=420,left=" + (window.screen ? Math.round(screen.width / 2 - 275) : 50) + ",top=" + 100);
};
var ids = ['tweet', 'like', 'gplus'];
for(var i = 0; i < ids.length; i++) {
document.getElementById(ids[i]).onclick = openWindowPopup;
}
})();
</script>