first commit

This commit is contained in:
root
2025-06-16 18:28:08 +05:00
commit d7b21fab0b
21327 changed files with 4845697 additions and 0 deletions

View File

@@ -0,0 +1,24 @@
{% if site.url == 'local' %}
<!-- analytics removed -->
{% else %}
<!-- Analytics start -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-25969065-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
function recordOutboundLink(link, category, action) {
_gat._getTrackerByName()._trackEvent(category, action);
setTimeout('document.location = "' + link.href + '"', 100);
}
</script>
<!-- ya metrika -->
<script type="text/javascript">(function (d, w, c) { (w[c] = w[c] || []).push(function() { try { w.yaCounter11382601 = new Ya.Metrika({id:11382601, webvisor:true, clickmap:true, trackLinks:true, accurateTrackBounce:true}); } catch(e) { } }); var n = d.getElementsByTagName("script")[0], s = d.createElement("script"), f = function () { n.parentNode.insertBefore(s, n); }; s.type = "text/javascript"; s.async = true; s.src = (d.location.protocol == "https:" ? "https:" : "http:") + "//mc.yandex.ru/metrika/watch.js"; if (w.opera == "[object Opera]") { d.addEventListener("DOMContentLoaded", f, false); } else { f(); } })(document, window, "yandex_metrika_callbacks");</script><noscript><div><img src="//mc.yandex.ru/watch/11382601" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
{% endif %}

View File

@@ -0,0 +1,273 @@
<!-- Basic idea of such build tool is stolen from modernizr.com -->
<div id="mfp-build-tool" class="mfp-hide">
<h2>Magnific Popup v{{site.mfpversion}} Build Tool</h2>
<form id="mfp-build-form">
<p class="help-block">Here you can generate optimized version of main JS file. Please note that CSS you should download directly: <a target="_blank" href="https://raw.github.com/dimsemenov/Magnific-Popup/master/src/css/main.scss">Sass version</a> or <a target="_blank" href="https://raw.github.com/dimsemenov/Magnific-Popup/master/dist/magnific-popup.css">CSS version</a>.</p>
<label class="checkbox">
<input type="checkbox" name="inline" checked> Inline
</label>
<label class="checkbox">
<input type="checkbox" name="image" checked> Image
</label>
<label class="checkbox">
<input type="checkbox" name="ajax" checked> Ajax
</label>
<label class="checkbox">
<input type="checkbox" name="iframe" checked> Iframe
</label>
<label class="checkbox">
<input type="checkbox" name="gallery" checked> Gallery
</label>
<label class="checkbox">
<input type="checkbox" name="retina" checked> High-DPI (retina) support for image type
</label>
<label class="checkbox">
<input type="checkbox" name="imagezoom" checked> Image zoom animation
</label>
</form>
<br/>
<div>
<button id="mfp-build-button">Generate build</button>
<label class="checkbox">
<input id="mfp-minify" type="checkbox" name="minify" checked="checked"> Minify code
</label>
</div>
<br/>
<p id="mfp-build-status" style="display:none"></p>
<br/>
<textarea id="mfp-build-tool-out" style="width: 100%; height: 300px; display:none;"></textarea>
</div>
<script type="text/javascript">
$(document).ready(function($) {
$('.mfp-build-tool-link').magnificPopup({closeBtnInside:true, type:'inline', midClick: true});
var h = window.location.hash;
if(h.indexOf('build=') > -1) {
var formInputs = $('#mfp-build-form input');
if(h.indexOf('&') > 0) {
h = h.substr(0, h.indexOf('&'));
}
var items = h.substr(h.indexOf('build=') + 6, h.length).split('+');
for(var i = 0; i < items.length; i++) {
var name = items[i];
if(name) {
formInputs.filter('[name="' +name+ '"]').addClass('present');
}
}
formInputs.not('.present').prop('checked', false);
}
var button = $('#mfp-build-button').click(function(e) {
e.preventDefault();
button.attr('disabled', 'disabled');
var statusTimeout;
var setStatus = function(msg, type) {
clearTimeout(statusTimeout);
$('#mfp-build-status').html('<span class="'+type+'">'+msg+'</span>').show();
};
setStatus('Wait a moment please...', 'progress');
$('#mfp-build-tool-out').val( '' );
var minify = $('#mfp-minify')[0].checked;
var removeModule = function(source, key) {
source = source.replace(new RegExp("\\/\\*>>"+key+"\\*\\/[\\s|\\S]*?\\/\\*>>"+key+"\\*\\/", "ig"), "");
return source;
};
var onError = function() {
setStatus("Error: Build tool wasn't able to GET the js file. Please try again or make file by yourself using Grunt.", 'error');
};
var version = '{{site.mfpversion}}';
var loadedScripts = [];
var onScriptsLoaded = function() {
var src = loadedScripts[0];
var hash = '',
name;
$('#mfp-build-form input').each(function() {
name = $(this).attr('name');
if( this.checked ) {
hash += name + '+';
} else {
src = removeModule(src, name);
}
});
var output = '';
if(hash) {
hash = hash.substr(0, hash.length-1);
}
if(minify) {
src = uglify(src, ["--extra","--unsafe"]);
output = '// Magnific Popup v'+version+' by Dmitry Semenov' + "\n";
output += '// http://bit.ly/magnific-popup' + (hash ? '#build=' + hash : '') + "\n" + src;
} else {
output = src;
}
if(!hash) {
hash = 'core';
} else {
hash = 'core+' + hash;
}
$('#mfp-build-tool-out').val( output ).show();
button.removeAttr('disabled');
setStatus('Magnific Popup main js file successfully generated! You can copy generated code from textarea below.' + (hash ? (' Your build includes: <strong>' + hash.split('+').join(', ')) + '</strong>. ' : ''), 'success');
};
$.ajax({
url:"dist/jquery.magnific-popup.js?v="+version,
dataType: 'text',
success: function( data) {
loadedScripts[0] = data;
if(loadedScripts[1]) {
onScriptsLoaded();
}
},
error: onError
});
$.ajax({
url:"third-party-libs/uglify.js",
dataType: 'script',
cache: true,
success: function(data) {
loadedScripts[1] = data;
if(loadedScripts[0]) {
onScriptsLoaded();
}
},
error: onError
});
});
/* build tool END */
/**
* Popup with source code for each example
*/
var example,
getCode,
CSS,
JS,
HTML,
highlighterLoaded;
var formatCode = function (str) {
if(str) {
// replace special chars
str = str.replace(/[&<>"']/g, function($0) {
return "&" + {"&":"amp", "<":"lt", ">":"gt", '"':"quot", "'":"#39"}[$0] + ";";
});
// remove spaces from each line based on spaces on first line
var firstLineLength = str.match(/^(\s*)/)[1].length;
var regExp = new RegExp('^ {' + (firstLineLength-1) + '}', "gm");
str = str.replace(regExp, '');
// replace spaces with tabs
str = str.replace(/ /g,'\t');
str = $.trim(str);
}
return str;
};
var highlight = function() {
hljs.highlightBlock(JS.find('code')[0]);
if(CSS)
hljs.highlightBlock(CSS.find('code')[0]);
if(HTML)
hljs.highlightBlock(HTML.find('code')[0]);
};
$('.example').each(function() {
$(this).find('h3').click(function() {
var example = $(this).parent('.example');
var getCodeWindow = $('<div class="get-code-window"><h1>'+example.find('h3').text()+'</h1></div>');
JS = $('<div class="highlight"><pre><code class="javascript">'+formatCode(example.find('script').eq(0).html())+'</code></pre></div>');
CSS = example.find('style');
if(CSS.length) {
CSS = $('<div class="highlight"><pre><code class="css">'+formatCode(CSS.html())+'</code></pre></div>');
} else {
CSS = '';
}
HTML = example.find('.html-code');
if(HTML.length) {
HTML = $('<div class="highlight"><pre><code class="xml html">'+formatCode(HTML.html())+'</code></pre></div>');
} else {
HTML = '';
}
if(!highlighterLoaded) {
highlighterLoaded = true;
var script = document.createElement("script"),
$script = $(script);
script.src = 'http://yandex.st/highlightjs/7.3/highlight.min.js';
if(window.jQuery) {
$.getScript(script.src , function() {
highlight();
});
} else {
$(script).appendTo("head").on("load", function() {
highlight();
});
}
} else {
highlight();
}
getCodeWindow.append(JS);
getCodeWindow.append(HTML);
getCodeWindow.append(CSS);
getCodeWindow.append('<p>Code above is dynamically generated directly from the source of this example.<br/>Please read <a href="documentation.html">the documentation</a> before using it.</p>');
$.magnificPopup.open({
items: {
src: getCodeWindow,
type: 'inline'
}
});
});
});
});
</script>

View File

@@ -0,0 +1,676 @@
{% if site.url == 'local' %}
<!-- <script src="third-party-libs/zepto.js"></script> -->
<script>
document.write('<script src=third-party-libs/' +
('__proto__' in {} ? 'zepto' : 'jquery') +
'.min.js><\/script>')
</script>
<script src="dist/jquery.magnific-popup.js?v={{site.mfpversion}}"></script>
{% else %}
<script>
document.write('<script src=third-party-libs/' +
('__proto__' in {} ? 'zepto' : 'jquery') +
'.min.js><\/script>')
</script>
<script src="dist/jquery.magnific-popup.min.js?v={{site.mfpversion}}"></script>
{% endif %}
<!--
Each '.example' block contains JS, HTML and optionally CSS for popup.
-->
<h2 id="examples">Examples</h2>
<div class="grid-c">
<div class="example gc3">
<h3>Single image lightbox</h3>
<p>Three simple popups with different scaling settings.<br/>
1 &mdash; fits horizontally and vertically,<br/>
2 &mdash; only horizontally,<br/>
3 &mdash; no gaps, zoom animation, close icon in top-right corner.<br/>
</p>
<div class="html-code grid-of-images">
<a class="image-popup-vertical-fit" href="http://farm9.staticflickr.com/8241/8589392310_7b6127e243_b.jpg" title="Caption. Can be aligned to any side and contain any HTML.">
<img src="http://farm9.staticflickr.com/8241/8589392310_7b6127e243_s.jpg" width="75" height="75" />
</a>
<a class="image-popup-fit-width" href="http://farm9.staticflickr.com/8379/8588290361_ecf8c27021_b.jpg" title="This image fits only horizontally.">
<img src="http://farm9.staticflickr.com/8379/8588290361_ecf8c27021_s.jpg" width="75" height="75" />
</a>
<a class="image-popup-no-margins" href="http://farm4.staticflickr.com/3721/9207329484_ba28755ec4_o.jpg">
<img src="http://farm4.staticflickr.com/3721/9207329484_ba28755ec4_o.jpg" width="107" height="75" />
</a>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.image-popup-vertical-fit').magnificPopup({
type: 'image',
closeOnContentClick: true,
mainClass: 'mfp-img-mobile',
image: {
verticalFit: true
}
});
$('.image-popup-fit-width').magnificPopup({
type: 'image',
closeOnContentClick: true,
image: {
verticalFit: false
}
});
$('.image-popup-no-margins').magnificPopup({
type: 'image',
closeOnContentClick: true,
closeBtnInside: false,
fixedContentPos: true,
mainClass: 'mfp-no-margins mfp-with-zoom', // class to remove default margin from left and right side
image: {
verticalFit: true
},
zoom: {
enabled: true,
duration: 300 // don't foget to change the duration also in CSS
}
});
});
</script>
<style type="text/css">
/* padding-bottom and top for image */
.mfp-no-margins img.mfp-img {
padding: 0;
}
/* position of shadow behind the image */
.mfp-no-margins .mfp-figure:after {
top: 0;
bottom: 0;
}
/* padding for main container */
.mfp-no-margins .mfp-container {
padding: 0;
}
/*
for zoom animation
uncomment this part if you haven't added this code anywhere else
*/
/*
.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
opacity: 0;
-webkit-backface-visibility: hidden;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.mfp-with-zoom.mfp-ready .mfp-container {
opacity: 1;
}
.mfp-with-zoom.mfp-ready.mfp-bg {
opacity: 0.8;
}
.mfp-with-zoom.mfp-removing .mfp-container,
.mfp-with-zoom.mfp-removing.mfp-bg {
opacity: 0;
}
*/
</style>
</div>
<div class="example gc3">
<h3>Lightbox gallery</h3>
<p>You may put any HTML content in each gallery item and <a href="http://codepen.io/dimsemenov/pen/vKrqs">mix content types</a>. In this example lazy-loading of images is enabled for the next image based on move direction. If you wish to add touch-swipe support, check <a href="http://coding.smashingmagazine.com/2013/05/02/truly-responsive-lightbox/">my article</a> on the Smashing Magazine, or <a href="http://photoswipe.com">new PhotoSwipe</a> script.</p>
<div class="html-code grid-of-images">
<div class="popup-gallery">
<a href="http://farm9.staticflickr.com/8242/8558295633_f34a55c1c6_b.jpg" title="The Cleaner"><img src="http://farm9.staticflickr.com/8242/8558295633_f34a55c1c6_s.jpg" width="75" height="75" /></a>
<a href="http://farm9.staticflickr.com/8382/8558295631_0f56c1284f_b.jpg" title="Winter Dance"><img src="http://farm9.staticflickr.com/8382/8558295631_0f56c1284f_s.jpg" width="75" height="75" /></a>
<a href="http://farm9.staticflickr.com/8225/8558295635_b1c5ce2794_b.jpg" title="The Uninvited Guest"><img src="http://farm9.staticflickr.com/8225/8558295635_b1c5ce2794_s.jpg" width="75" height="75" /></a>
<a href="http://farm9.staticflickr.com/8383/8563475581_df05e9906d_b.jpg" title="Oh no, not again!"><img src="http://farm9.staticflickr.com/8383/8563475581_df05e9906d_s.jpg" width="75" height="75" /></a>
<a href="http://farm9.staticflickr.com/8235/8559402846_8b7f82e05d_b.jpg" title="Swan Lake"><img src="http://farm9.staticflickr.com/8235/8559402846_8b7f82e05d_s.jpg" width="75" height="75" /></a>
<a href="http://farm9.staticflickr.com/8235/8558295467_e89e95e05a_b.jpg" title="The Shake"><img src="http://farm9.staticflickr.com/8235/8558295467_e89e95e05a_s.jpg" width="75" height="75" /></a>
<a href="http://farm9.staticflickr.com/8378/8559402848_9fcd90d20b_b.jpg" title="Who's that, mommy?"><img src="http://farm9.staticflickr.com/8378/8559402848_9fcd90d20b_s.jpg" width="75" height="75" /></a>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.popup-gallery').magnificPopup({
delegate: 'a',
type: 'image',
tLoading: 'Loading image #%curr%...',
mainClass: 'mfp-img-mobile',
gallery: {
enabled: true,
navigateByImgClick: true,
preload: [0,1] // Will preload 0 - before current, and 1 after the current image
},
image: {
tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
titleSrc: function(item) {
return item.el.attr('title') + '<small>by Marsel Van Oosten</small>';
}
}
});
});
</script>
</div>
<div class="example gc3">
<h3>Zoom-gallery</h3>
<p>If you wish to open the popup only after image is fully loaded, you may preload image via JS. Or use scaled down image instead of thumbnail. Zoom effect works only with images, for now.</p>
<div class="html-code grid-of-images">
<div class="zoom-gallery">
<!--
Width/height ratio of thumbnail and the main image must match to avoid glitches.
If ratios are different, you may add CSS3 opacity transition to the main image to make the change less noticable.
-->
<a href="http://farm4.staticflickr.com/3763/9204547649_0472680945_o.jpg" data-source="http://500px.com/photo/32736307" title="Into The Blue" style="width:193px;height:125px;">
<img src="http://farm4.staticflickr.com/3763/9204547649_7de96ee188_t.jpg" width="193" height="125" />
</a>
<a href="http://farm3.staticflickr.com/2856/9207329420_7f2a668b06_o.jpg" data-source="http://500px.com/photo/32554131" title="Light Sabre" style="width:82px;height:125px;">
<img src="http://farm3.staticflickr.com/2856/9207329420_e485948b01_t.jpg" width="82px" height="125" />
</a>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.zoom-gallery').magnificPopup({
delegate: 'a',
type: 'image',
closeOnContentClick: false,
closeBtnInside: false,
mainClass: 'mfp-with-zoom mfp-img-mobile',
image: {
verticalFit: true,
titleSrc: function(item) {
return item.el.attr('title') + ' &middot; <a class="image-source-link" href="'+item.el.attr('data-source')+'" target="_blank">image source</a>';
}
},
gallery: {
enabled: true
},
zoom: {
enabled: true,
duration: 300, // don't foget to change the duration also in CSS
opener: function(element) {
return element.find('img');
}
}
});
});
</script>
<style type="text/css">
.image-source-link {
color: #98C3D1;
}
.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
opacity: 0;
-webkit-backface-visibility: hidden;
/* ideally, transition speed should match zoom duration */
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.mfp-with-zoom.mfp-ready .mfp-container {
opacity: 1;
}
.mfp-with-zoom.mfp-ready.mfp-bg {
opacity: 0.8;
}
.mfp-with-zoom.mfp-removing .mfp-container,
.mfp-with-zoom.mfp-removing.mfp-bg {
opacity: 0;
}
</style>
</div>
<div class="example gc3">
<h3>Popup with video or map</h3>
<p>In this example lightboxes are automatically disabled on small screen size and default behavior of link is triggered.</p>
<div class="html-code">
<a class="popup-youtube" href="http://www.youtube.com/watch?v=0O2aH4XLbto">Open YouTube video</a><br/>
<a class="popup-vimeo" href="https://vimeo.com/45830194" >Open Vimeo video</a><br/>
<a class="popup-gmaps" href="https://maps.google.com/maps?q=221B+Baker+Street,+London,+United+Kingdom&hl=en&t=v&hnear=221B+Baker+St,+London+NW1+6XE,+United+Kingdom">Open Google Map</a>
</div>
<style type="text/css">
/**
* Simple fade transition,
*/
.mfp-fade.mfp-bg {
opacity: 0;
-webkit-transition: all 0.15s ease-out;
-moz-transition: all 0.15s ease-out;
transition: all 0.15s ease-out;
}
.mfp-fade.mfp-bg.mfp-ready {
opacity: 0.8;
}
.mfp-fade.mfp-bg.mfp-removing {
opacity: 0;
}
.mfp-fade.mfp-wrap .mfp-content {
opacity: 0;
-webkit-transition: all 0.15s ease-out;
-moz-transition: all 0.15s ease-out;
transition: all 0.15s ease-out;
}
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
opacity: 1;
}
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
opacity: 0;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('.popup-youtube, .popup-vimeo, .popup-gmaps').magnificPopup({
disableOn: 700,
type: 'iframe',
mainClass: 'mfp-fade',
removalDelay: 160,
preloader: false,
fixedContentPos: false
});
});
</script>
</div>
<div class="example gc3">
<h3>Dialog with CSS animation</h3>
<p>Animations are added with simple CSS transitions, you can make them look however you wish.<br/>More <a href="http://codepen.io/dimsemenov/pen/GAIkt">animation effects on CodePen</a>.</p>
<div class="html-code">
<a class="popup-with-zoom-anim" href="#small-dialog" >Open with fade-zoom animation</a><br/>
<a class="popup-with-move-anim" href="#small-dialog" >Open with fade-slide animation</a>
<!-- dialog itself, mfp-hide class is required to make dialog hidden -->
<div id="small-dialog" class="zoom-anim-dialog mfp-hide">
<h1>Dialog example</h1>
<p>This is dummy copy. It is not meant to be read. It has been placed here solely to demonstrate the look and feel of finished, typeset text. Only for show. He who searches for meaning here will be sorely disappointed.</p>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.popup-with-zoom-anim').magnificPopup({
type: 'inline',
fixedContentPos: false,
fixedBgPos: true,
overflowY: 'auto',
closeBtnInside: true,
preloader: false,
midClick: true,
removalDelay: 300,
mainClass: 'my-mfp-zoom-in'
});
$('.popup-with-move-anim').magnificPopup({
type: 'inline',
fixedContentPos: false,
fixedBgPos: true,
overflowY: 'auto',
closeBtnInside: true,
preloader: false,
midClick: true,
removalDelay: 300,
mainClass: 'my-mfp-slide-bottom'
});
});
</script>
<style type="text/css">
/* Styles for dialog window */
#small-dialog {
background: white;
padding: 20px 30px;
text-align: left;
max-width: 400px;
margin: 40px auto;
position: relative;
}
/**
* Fade-zoom animation for first dialog
*/
/* start state */
.my-mfp-zoom-in .zoom-anim-dialog {
opacity: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
-o-transform: scale(0.8);
transform: scale(0.8);
}
/* animate in */
.my-mfp-zoom-in.mfp-ready .zoom-anim-dialog {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
/* animate out */
.my-mfp-zoom-in.mfp-removing .zoom-anim-dialog {
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
-o-transform: scale(0.8);
transform: scale(0.8);
opacity: 0;
}
/* Dark overlay, start state */
.my-mfp-zoom-in.mfp-bg {
opacity: 0;
-webkit-transition: opacity 0.3s ease-out;
-moz-transition: opacity 0.3s ease-out;
-o-transition: opacity 0.3s ease-out;
transition: opacity 0.3s ease-out;
}
/* animate in */
.my-mfp-zoom-in.mfp-ready.mfp-bg {
opacity: 0.8;
}
/* animate out */
.my-mfp-zoom-in.mfp-removing.mfp-bg {
opacity: 0;
}
/**
* Fade-move animation for second dialog
*/
/* at start */
.my-mfp-slide-bottom .zoom-anim-dialog {
opacity: 0;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
-webkit-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
-moz-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
-ms-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
-o-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
}
/* animate in */
.my-mfp-slide-bottom.mfp-ready .zoom-anim-dialog {
opacity: 1;
-webkit-transform: translateY(0) perspective( 600px ) rotateX( 0 );
-moz-transform: translateY(0) perspective( 600px ) rotateX( 0 );
-ms-transform: translateY(0) perspective( 600px ) rotateX( 0 );
-o-transform: translateY(0) perspective( 600px ) rotateX( 0 );
transform: translateY(0) perspective( 600px ) rotateX( 0 );
}
/* animate out */
.my-mfp-slide-bottom.mfp-removing .zoom-anim-dialog {
opacity: 0;
-webkit-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg );
-moz-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg );
-ms-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg );
-o-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg );
transform: translateY(-10px) perspective( 600px ) rotateX( 10deg );
}
/* Dark overlay, start state */
.my-mfp-slide-bottom.mfp-bg {
opacity: 0;
-webkit-transition: opacity 0.3s ease-out;
-moz-transition: opacity 0.3s ease-out;
-o-transition: opacity 0.3s ease-out;
transition: opacity 0.3s ease-out;
}
/* animate in */
.my-mfp-slide-bottom.mfp-ready.mfp-bg {
opacity: 0.8;
}
/* animate out */
.my-mfp-slide-bottom.mfp-removing.mfp-bg {
opacity: 0;
}
</style>
</div>
<div class="example gc3">
<h3>Popup with form</h3>
<p>Entered data is not lost if you open and close the popup or if you go to another page and then press back browser button.</p>
<div class="html-code">
<!-- link that opens popup -->
<a class="popup-with-form" href="#test-form">Open form</a>
<!-- form itself -->
<form id="test-form" class="mfp-hide white-popup-block">
<h1>Form</h1>
<fieldset style="border:0;">
<p>Lightbox has an option to automatically focus on the first input. It's strongly recommended to use <code>inline</code> popup type for lightboxes with form instead of <code>ajax</code> (to keep entered data if the user accidentally refreshed the page).</p>
<ol>
<li>
<label for="name">Name</label>
<input id="name" name="name" type="text" placeholder="Name" required>
</li>
<li>
<label for="email">Email</label>
<input id="email" name="email" type="email" placeholder="example@domain.com" required>
</li>
<li>
<label for="phone">Phone</label>
<input id="phone" name="phone" type="tel" placeholder="Eg. +447500000000" required>
</li>
<li>
<label for="textarea">Textarea</label><br/>
<textarea id="textarea">Try to resize me to see how popup CSS-based resizing works.</textarea>
</li>
</ol>
</fieldset>
</form>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.popup-with-form').magnificPopup({
type: 'inline',
preloader: false,
focus: '#name',
// When elemened is focused, some mobile browsers in some cases zoom in
// It looks not nice, so we disable it:
callbacks: {
beforeOpen: function() {
if($(window).width() < 700) {
this.st.focus = false;
} else {
this.st.focus = '#name';
}
}
}
});
});
</script>
</div>
<div class="example gc3">
<h3>Ajax popup</h3>
<p>You have full control of what is displayed in popup, align it to any side via CSS, enable or disable scroll on right side of window - whatever.</p>
<div class="html-code">
<a class="simple-ajax-popup-align-top" href="site-assets/ajax/test-ajax.html" >Load content via ajax</a><br/>
<a class="simple-ajax-popup" href="site-assets/ajax/test-ajax-2.html" >Load another content via ajax</a>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.simple-ajax-popup-align-top').magnificPopup({
type: 'ajax',
alignTop: true,
overflowY: 'scroll' // as we know that popup content is tall we set scroll overflow by default to avoid jump
});
$('.simple-ajax-popup').magnificPopup({
type: 'ajax'
});
});
</script>
</div>
<div class="example gc3">
<h3>Modal popup</h3>
<p>A modal popup disables the usual ways to close popups.</p>
<div class="html-code">
<a class="popup-modal" href="#test-modal">Open modal</a>
<div id="test-modal" class="mfp-hide white-popup-block">
<h1>Modal dialog</h1>
<p>You won't be able to dismiss this by usual means (escape or
click button), but you can close it programatically based on
user choices or actions.</p>
<p><a class="popup-modal-dismiss" href="#">Dismiss</a></p>
</div>
</div>
<script type="text/javascript">
$(function () {
$('.popup-modal').magnificPopup({
type: 'inline',
preloader: false,
focus: '#username',
modal: true
});
$(document).on('click', '.popup-modal-dismiss', function (e) {
e.preventDefault();
$.magnificPopup.close();
});
});
</script>
</div>
<div class="example gc3">
<h3>Error handling</h3>
<p>This is just basic example of how error messages are displayed. Surely, you can change text or style them.</p>
<div class="html-code">
<!-- classes mfp-image and mfp-ajax define type of the popup -->
<a id="broken-image" class="mfp-image" href="http://upload.wikimedia.org/wikipedia/commons/thumb/f/f3/Blois_Loire_Panorama_-_July_2011.jpg/640px-Blois_Loire_Panorama_-_July_2011-fake.jpg" >Broken image</a><br/>
<a id="broken-ajax" class="mfp-ajax" href="http://example.com/fakeg" >Broken ajax request</a>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#broken-image, #broken-ajax').magnificPopup({});
});
</script>
</div>
<!-- <div class="example gc3">
<h3>Other variations</h3>
<div class="html-code">
<a id="inline-html-content" class="mfp-inline" data-mfp-src="#custom-content" href="#custom-content" >Open inline text block</a>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#inline-html-content').magnificPopup({
disableOn:0,
alignTop: true,
marTop: 0,
marBottom: 0,
closeBtnInside: true,
mainClass: 'mfp-dark-close-button mfp-with-40-margin',
preloader: false
});
});
</script>
</div> -->
</div>
<!--
Examples end.
-->

View File

@@ -0,0 +1,50 @@
<script type="text/javascript">
(function() {
var isCanvasSupported = function () {
var elem = document.createElement('canvas');
return !!(elem.getContext && elem.getContext('2d'));
};
if( isCanvasSupported() ) {
var canvas = document.getElementById('broken-glass'),
context = canvas.getContext('2d'),
width = canvas.width = Math.min(800, window.innerWidth),
height = canvas.height,
numTriangles = 100,
rand = function(min, max){
return Math.floor( (Math.random() * (max - min + 1) ) + min);
};
window.drawTriangles = function(){
context.clearRect(0, 0, width, height);
var hue = rand(0,360);
var increment = 80 / numTriangles;
for(var i = 0; i < numTriangles; i++) {
context.beginPath();
context.moveTo(rand(0,width), rand(0,height) );
context.lineTo(rand(0,width), rand(0,height) );
context.lineTo(rand(0,width), rand(0,height) );
context.globalAlpha = 0.5;
context.fillStyle = 'hsl('+Math.round(hue)+', '+rand(15,60)+'%, '+ rand(10, 60) +'%)';
context.closePath();
context.fill();
hue+=increment;
if(hue > 360) hue = 0;
}
canvas.style.cssText = '-webkit-filter: contrast(115%);';
};
document.getElementById('logo-title').style.color = 'rgba(250, 250, 250, 0.95)';
drawTriangles();
var el = document.getElementById('logo');
el.onclick = function() {
drawTriangles();
};
}
})();
</script>

View File

@@ -0,0 +1,99 @@
<div id="mc_embed_signup" class="embed-form zoom-anim-dialog mfp-hide">
<style>
#mc_embed_signup h4 {
font-size: 30px;
line-height: 1.2;
margin-bottom: 12px;
}
#mc_embed_signup input[type="email"] {
border: 1px solid #CCC;
border-top: 1px solid #999;
padding: 5px;
font-size: 18px;
width: 200px;
margin-right: 10px;
height: 25px;
transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}
#mc_embed_signup input[type="email"]:focus {
background-color: #FFF;
border: 1px solid #3169B3;
box-shadow: #3169B3 0px 0px 5px;
-moz-box-shadow: #3169B3 0px 0px 5px;
-webkit-box-shadow: #3169B3 0px 0px 5px;
outline: none;
}
#mc_embed_signup input[type="submit"] {
border: 1px solid #3169B3;
font-size: 13px;
font-weight: bold;
color: #FFF;
height: auto;
padding: 8px 13px;
cursor: pointer;
background-color: #3169B3;
display: inline-block;
width: auto;
-webkit-appearance: none;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
vertical-align: top;
}
.embed-form {
padding: 30px;
background: #FFF;
margin: 30px auto;
display: block;
width: auto;
max-width: 350px;
position: relative;
}
#mc_embed_signup .mc-field-group {
margin-top: 20px;
}
#mc_embed_signup p {
font-size: 15px;
color: #4F4F4F;
}
</style>
<script>
if(window.$) {
$(document).ready(function() {
$('.wp-version-link').magnificPopup({
type: 'inline',
fixedContentPos: false,
fixedBgPos: true,
overflowY: 'auto',
closeBtnInside: true,
preloader: false,
removalDelay: 300,
mainClass: 'my-mfp-zoom-in'
});
});
}
</script>
<form action="http://dimsemenov.us1.list-manage.com/subscribe/post?u=ef6026d946a7b5d41d92c02e4&amp;id=54fae727da" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<h4>Magnific WordPress Plugin is under development!</h4>
<p>To get notified about the release, subscribe to my Mailchimp list that I send 3-4 times a year. Any feature requests are welcome.</p>
<div class="mc-field-group">
<input type="email" value="" name="EMAIL" placeholder="Your email" class="required email" id="mce-EMAIL">
<input type="hidden" id="group_2" name="group[2065][2]" value="true">
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
</form>
</div>

View File

@@ -0,0 +1,77 @@
<!DOCTYPE html>
<html lang="en" prefix="og: http://ogp.me/ns#">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>{{ page.title }}</title>
<meta charset="utf-8">
<meta name="description" content="{{page.description}}"/>
<meta name="viewport" content="width = device-width, initial-scale = 1.0" />
<meta name="author" content="Dmitry Semenov">
<link rel="canonical" href="{{page.canonical_url}}" />
<meta property="og:url" content="{{page.canonical_url}}">
<meta property="og:title" content="{{page.title}}">
<meta property="og:description" content="{{page.description}}">
<meta property="og:image" content="http://dimsemenov.com/magnific-og-400x400.jpg">
<link href="https://plus.google.com/102586375605352607718" rel="publisher" />
{% if site.url == 'local' %}
<link href="site-assets/site.css?v={{site.mfpversion}}" rel="stylesheet" />
<link href="dist/magnific-popup.css?v={{site.mfpversion}}" rel="stylesheet" />
{% else %}
<link href="site-assets/all.min.css?v={{site.mfpversion}}" rel="stylesheet" />
{% endif %}
{% if page.title == 'Magnific Popup Documentation' %}
<style type="text/css"> #main-wrapper{background: #FFF;} </style>
{% endif %}
</head>
<body>
<div id="main-wrapper">
{{ content | markdown }}
<div id="footer">
Created by <a href="http://dimsemenov.com" rel="author">Dmitry Semenov</a>.{% if page.include_credit %} Photography in demo by <a href="http://www.squiver.com">Marsel Van Oosten</a>{% endif %}
</div>
</div>
{{page.footer}}
{% if page.addjs %}
{% if site.url == 'local' %}
<script>
document.write('<script src=third-party-libs/' +
('__proto__' in {} ? 'zepto' : 'jquery') +
'.js><\/script>')
</script>
<script src="dist/jquery.magnific-popup.js?v={{site.mfpversion}}"></script>
{% else %}
<script>
document.write('<script src=third-party-libs/' +
('__proto__' in {} ? 'zepto' : 'jquery') +
'.min.js><\/script>')
</script>
<script src="dist/jquery.magnific-popup.min.js?v={{site.mfpversion}}"></script>
{% endif %}
{% endif %}
{% include analytics.html %}
{% if page.buildtool %}
{% include build-tool.html %}
{% endif %}
{% if site.url == 'local' %}
<strong style="display:block; width:100%;text-align:center;">This page is just for tests and should not be used for production!</strong>
{% endif %}
</body>
</html>

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,101 @@
---
layout: default
title: Magnific Popup&#58; 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 &amp; 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> &middot; <a href="https://github.com/dimsemenov/Magnific-Popup">GitHub</a> &middot; <a href="wordpress.html" class="wp-version-link" data-mfp-src="#mc_embed_signup">WordPress plugin</a> &middot; <a href="#mfp-build-tool" class="mfp-build-tool-link">Build tool</a> &middot; <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&amp;url=http%3A%2F%2Fbit.ly%2Fmagnificpopup&amp;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&amp;repo=magnific-popup&amp;type=watch&amp;count=true&amp;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>

View File

@@ -0,0 +1,29 @@
<div class="ajax-text-and-image white-popup-block">
<style>
.ajax-text-and-image {
max-width:800px; margin: 20px auto; background: #FFF; padding: 0; line-height: 0;
}
.ajcol {
width: 50%; float:left;
}
.ajcol img {
width: 100%; height: auto;
}
@media all and (max-width:30em) {
.ajcol {
width: 100%;
float:none;
}
}
</style>
<div class="ajcol">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Marabou_stork%2C_Leptoptilos_crumeniferus_edit1.jpg/603px-Marabou_stork%2C_Leptoptilos_crumeniferus_edit1.jpg"/>
</div>
<div class="ajcol" style="line-height: 1.231;">
<div style="padding: 1em">
<h1>This is just block of HTML, loaded via ajax</h1>
<p>You can put absolutely any HTML here and resize it dynamically just with help of CSS.</p>
</div>
</div>
<div style="clear:both; line-height: 0;"></div>
</div>

View File

@@ -0,0 +1,10 @@
<div id="custom-content" class="white-popup-block" style="max-width:600px; margin: 20px auto;">
<h1>HTML content, loaded via ajax</h1>
<style>
#custom-content img {max-width: 100%;margin-bottom: 10px;}
</style>
<p>This is dummy copy. It is not meant to be read. It has been placed here solely to demonstrate the look and feel of finished, typeset text. Only for show. He who searches for meaning here will be sorely disappointed. These words are here to provide the reader with a basic impression of how actual text will appear in its final presentation. </p>
<p>This is dummy copy. It's Greek to you. Unless, of course, you're Greek, in which case, it really makes no sense. Why, you can't even read it! It is strictly for mock-ups. You may mock it up as strictly as you wish.</p>
<img src="http://farm9.staticflickr.com/8242/8558295633_f34a55c1c6_b.jpg" />
<img src="http://farm9.staticflickr.com/8382/8558295631_0f56c1284f_b.jpg" />
</div>

View File

@@ -0,0 +1,861 @@
/* Demo site CSS. Not mobile first, not semantic, not optimized, made for 20 minutes, mess */
html, body, div, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, ol, ul, li, form, fieldset, legend, label, table, header, footer, nav, section, figure {
margin: 0;
padding: 0;
}
html {
overflow-y: scroll;
}
body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 1.6;
color: #5A6064;
}
pre,code{
tab-size: 4;
}
p {
margin: 0 0 11px;
}
ul {
list-style: disc;
}
ul, ol {
padding: 0;
margin: 0 0 11px 25px;
}
li {
line-height: 22px;
margin: 0 0 .5em 0;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
font-weight: normal;
text-rendering: optimizelegibility;
color: #282B30;
font-family:Calibri, "PT Sans", "Trebuchet MS", 'Helvetica Neue', Arial
}
.mfp-preloader {
font-size: 13px;
}
img {
border: 0;
}
h1 {
margin-bottom: 5px;
}
.get-code-window {
position: relative;
background: #FFF;
padding: 2em 3em;
width: auto;
margin: 20px auto;
max-width: 600px;
}
#magnific_popup_documentation {
font-size: 3em;
margin-bottom: 1em;
font-weight: bold;
text-align: center;
}
h2 {
font-weight: bold;
margin-top: 2em;
margin-bottom: .3em;
border-bottom: 1px solid #DDD;
padding-bottom: 0.2em;
font-size: 1.8em;
}
h3 {
font-size: 22px;
line-height: 24px;
margin-bottom: 12px;
margin-top: 20px;
}
h4 {
margin-bottom: 5px;
}
a {
color: #3169B3;
text-decoration: underline;
}
a:hover {
color: #C00;
text-decoration: underline;
}
body {
background: #fafafa;
}
.grid-c h3 {
margin-top: 0;
}
.grid-c {
clear: both;
}
.grid-c p {
margin-bottom: .5em;
}
.grid-c {
overflow: hidden;
margin: 0 -1em;
}
.gc3 {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 50%;
float: left;
padding: 1em;
overflow: hidden;
}
.grid-c .gc3:nth-of-type(2n+1) {
clear: left;
}
h1#magnific-popup-docs {
display: none;
}
#logo {
height: 150px;
text-align: center;
position: relative;
width: 100%;
-webkit-user-select: none;
-moz-user-select: none;
padding: 0 3em;
margin-left: -3em;
cursor: pointer;
margin-top: 50px;
margin-bottom: 50px;
}
#broken-glass {
height: 100%;
-webkit-tap-highlight-color: transparent;
position: absolute;
left: 0;
top: 0;
width: 100%;
}
#logo:active h1 {
top: 1px;
}
#logo h1 {
margin-top: 27px;
font-size: 63px;
line-height: 1.4;
top: 0;
}
#logo h1 {
text-align: center;
font-weight: bold;
width: 100%;
color: #000;
position: absolute;
left: 0;
-webkit-user-select: none;
-moz-user-select: none;
cursor: pointer;
}
h2.intro {
font-size: 22px;
line-height: 1.2;
font-weight: normal;
border: 0;
margin-top: 0;
}
#header-links {
font-size: 16px;
}
/*#header-links a {
color: #A5CCFF;
}
#header-links a:hover {
opacity: 0.8;
}*/
#markdown-toc {
position: fixed;
left: 0;
top: 50px;
padding: 20px 20px;
background: rgba(255, 255, 255, 0.71);
-webkit-backface-visibility:hidden;
list-style: none;
}
#markdown-toc a[href="#magnific-popup-docs"] {
display: none;
}
#markdown-toc ul {
list-style: none;
}
#markdown-toc ul ul {
display: none;
}
#markdown-toc:before {
content: 'Table of contents';
font-weight: bold;
display: block;
margin-bottom: 10px;
}
@media all and (max-width: 75em) {
#markdown-toc {
position: static;
padding: 0;
background: none;
}
}
#markdown-toc a {
text-decoration: none;
border-bottom: 1px dotted;
}
#markdown-toc ul {
margin: 0;
padding: 0;
}
#markdown-toc .active a{
text-decoration: none;
color: #666;
}
/*h2:target {
font-weight: bold;
margin-top: 0;
border-top: 1.8em solid transparent;
margin-bottom: .3em;
border-bottom: 0;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
background-color: #FFF6BF;
padding-top: .2em;
padding-left: .5em;
}*/
code,pre {
font-family: Consolas, "Liberation Mono", Courier, monospace;
}
code {
background: #F8F8F8;
padding: .1em .4em;
color: #c82829;
font-size: 13px;
}
pre {
background: none;
line-height: 18px;
overflow: auto;
padding: 20px 25px;
border-radius: 2px;
}
pre code {
border: 0;
padding: 0;
background: none;
color: #000;
font-size: 13px;
}
.highlight {
position: relative;
margin-bottom: 0.5em;
margin-left: -1.5em;
width: 100%;
padding: 0 1.5em;
background-color: #F5FAFC;
}
pre code:before {
display: block;
position: absolute;
right: 3px;
top: 6px;
padding: 3px 7px 0;
color: #889499;
font-size: 12px;
line-height: 13px;
}
code.html:before {
content: 'HTML';
}
code.javascript:before {
content: 'JS';
}
code.css:before {
content: 'CSS';
}
#mc_embed_signup {
max-width: 350px;
padding: 32px;
background: #EEE;
}
#mc_embed_signup input[type="email"] {
border: 1px solid #CCC;
border-top: 1px solid #999;
padding: 5px;
font-size: 18px;
width: 200px;
margin-right: 10px;
height: 25px;
transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}
#mc_embed_signup input[type="email"]:focus {
background-color: #FFF;
border: 1px solid #3169B3;
box-shadow: #3169B3 0px 0px 5px;
-moz-box-shadow: #3169B3 0px 0px 5px;
-webkit-box-shadow: #3169B3 0px 0px 5px;
outline: none;
}
#mc_embed_signup input[type="submit"] {
border: 1px solid #3169B3;
font-size: 13px;
font-weight: bold;
color: #FFF;
height: auto;
padding: 8px 13px;
cursor: pointer;
background-color: #3169B3;
display: inline-block;
width: auto;
-webkit-appearance: none;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
vertical-align: top;
}
.embed-form {
position: relative;
}
#mc_embed_signup p {
font-size: 15px;
color: #4F4F4F;
}
#main-wrapper {
background: none;
max-width: 800px;
width: 100%;
margin: 2em auto 4em;
padding: 3em;
padding-top: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
}
.white-popup-block {
background: #FFF;
padding: 20px 30px;
text-align: left;
max-width: 650px;
margin: 40px auto;
position: relative;
}
#examples:after {
content: 'to view source click on the title of example';
opacity: 0.4;
font-weight: normal;
font-size: 14px;
margin-top: 13px;
float: right;
}
.example {
margin-bottom: 20px;
position: relative;
}
.example h3 {
display: inline-block;
cursor: pointer;
border-bottom: 1px dotted #949494;
}
.example h3:hover {
color: #C00;
}
.example h3:hover:after {
content: 'view source';
padding-left: 8px;
color: #999;
position: absolute;
top: 16px;
font-family: Consolas, "Liberation Mono", Courier, monospace;
font-size: 12px;
}
/*button.get-code-btn {
cursor: pointer;
background: transparent;
border: 0;
-webkit-appearance: none;
display: block;
z-index: 1;
padding: 0;
outline: none;
background: red;
position: absolute;
right: 0;
top: 0;
}*/
.square-tmb {
margin: 0 10px 0 0;
cursor: pointer;
}
.zoom-cursor {
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in;
}
.example a,
a.popup-link {
text-decoration: none;
border-bottom: 1px dotted;
}
.example a:hover,
a.popup-link:hover {
text-decoration: none;
}
.example a {
line-height: 26px;
}
.example p a {
text-decoration: underline;
border: 0;
line-height: 1.6;
}
#image-gallery a,
#single-image {
border-bottom: none;
}
.not-ready-yet-notice {
padding: 20px 20px;
background: #EEE;
}
#footer {
border-top: 1px solid #DDD;
padding-top: 3em;
margin: 5em 0 0;
width: 100%;
text-align: center;
opacity: 0.9;
}
#conditional-lightbox-notice {
display: none;
}
#logo-status {
opacity: 0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
transition: opacity 0.5s;
width: 100%;
text-align: center;
}
#logo-status.down {
opacity: 1;
}
.grid-of-images a {
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in;
border-bottom: 0;
height: 75px;
display: block;
float: left;
margin: 0 5px 5px 0;
width: 75px;
}
.grid-of-images a:hover {
opacity: 0.9;
}
h3 em {
opacity: 0.3;
}
code.def {
padding: 0;
background: #FFF;
border: 0;
display: block;
margin-bottom: 8px;
margin-top: -10px;
color: #A3A3A3;
}
@media all and (max-width: 50em) {
#logo h1 {
font-size: 52px;
margin-top: 36px;
}
}
@media all and (max-width: 30em) {
#examples:after {
display: none;
}
.gc3 {
width: 100%;
}
.grid-c .gc3:nth-of-type(2n+1) {
clear: none;
}
#main-wrapper {
padding: 1em;
margin-top: 0;
}
.highlight {
padding: 0.2em 1em;
margin: 1em -1em;
}
#logo {
height: 95px;
width: 100%;
padding: 0;
margin: 0 auto;
margin-top: 0;
margin-bottom: 2em;
}
#logo h1 {
font-size: 32px;
margin-top: 23px;
}
h2.intro {
font-size: 20px;
}
}
@media all and (max-width: 700px) {
.zoom-cursor {
cursor: pointer;
}
#conditional-lightbox-notice {
display: block;
padding: 10px;
background: #FFEAEA;
}
}
#logo-overlay {
width: 100%;
height: 75px;
}
#logo-overlay {
opacity: 1;
background: red;
position: absolute;
left: 0;
top: 0;
opacity: 0;
}
#mfp-build-tool {
background: #FFF;
padding: 30px 40px 40px 40px;
max-width: 500px;
text-align: left;
margin: 10px auto;
position: relative;
}
#mfp-build-tool h2 {
margin-top: 0;
margin-bottom: 0.7em;
}
#mfp-build-form label {
display: block;
margin-bottom: 5px;
min-height: 18px;
padding-left: 18px;
}
#mfp-build-form input[type="checkbox"] {
margin: 3px 0;
line-height: normal;
cursor: pointer;
width: auto;
margin-right: 5px;
float: left;
margin-left: -18px;
}
#mfp-build-status {
min-height: 40px;
}
#mfp-build-status .error {
color: #830C0C;
}
#mfp-build-status .success {
color: #014B04;
}
#mfp-build-status .progress {
color: #000;
}
#smashing {
text-align: center;
font-weight: bold;
}
#smashing a {
color: #EF4A35;
}
#smashing a:hover {
color: #FF9369;
}
#smashing strong {
color: #EF4A35;
}
.smashing-link {
margin-left: 29px;
position: relative;
}
.smashing-link:before {
content: '';
display: inline-block;
width: 24px;
height: 24px;
background: url("http://dimsemenov.com/images/sm-logo-24x24.png");
position: absolute;
top: -4px;
left: -28px;
}
#hackernews {
margin-left: 24px;
}
#hackernews:before {
background: url("http://dimsemenov.com/images/hn-logo-18x18.gif");
width: 18px;
height: 18px;
top: -1px;
left: -22px;
}
.share-buttons {
text-align: center;
}
.share-buttons h2 {
text-align: center;
border: 0;
}
.share-buttons {
position: relative;
margin: 70px 0;
}
.share-buttons a {
-moz-border-radius: 2px;
border-radius: 2px;
display: inline-block;
padding: 10px 20px;
margin: 10px;
color: #FFF;
text-decoration: none;
background: #5AAF63;
font-size: 16px;
line-height: 22px;
cursor: pointer;
}
.share-buttons a:hover {
opacity: 0.7;
}
#tweet {
background: #0096c4;
}
#like {
background: #3b5998;
}
#gplus {
background: #d34836;
}
#vkcom {
background: #6e8fb1;
}
pre .comment,
pre .template_comment,
pre .diff .header,
pre .javadoc {
color: #998;
font-style: italic
}
pre .keyword,
pre .css .rule .keyword,
pre .winutils,
pre .javascript .title,
pre .nginx .title,
pre .subst,
pre .request,
pre .status {
color: #333;
font-weight: bold
}
pre .number,
pre .hexcolor,
pre .ruby .constant {
color: #099;
}
pre .string,
pre .tag .value,
pre .phpdoc,
pre .tex .formula {
color: #D01040;
}
pre .title,
pre .id {
color: #900;
font-weight: bold
}
pre .javascript .title,
pre .lisp .title,
pre .clojure .title,
pre .subst {
font-weight: normal
}
pre .class .title,
pre .haskell .type,
pre .vhdl .literal,
pre .tex .command {
color: #458;
font-weight: bold
}
pre .tag,
pre .tag .title,
pre .rules .property,
pre .django .tag .keyword {
color: #000080;
font-weight: normal
}
pre .attribute,
pre .variable,
pre .lisp .body {
color: teal;
}
pre .regexp {
color: #009926
}
pre .class {
color: #458;
font-weight: bold
}
pre .symbol,
pre .ruby .symbol .string,
pre .lisp .keyword,
pre .tex .special,
pre .prompt {
}
pre .built_in,
pre .lisp .title,
pre .clojure .built_in {
color: #0086b3
}
pre .preprocessor,
pre .pi,
pre .doctype,
pre .shebang,
pre .cdata {
color: #999;
font-weight: bold
}
pre .deletion {
background: #fdd
}
pre .addition {
background: #dfd
}
pre .diff .change {
background: #0086b3
}
pre .chunk {
color: #aaa
}
#documentation-intro {
background: #2b2b2b;
text-align: center;
padding: 3em;
width: 100%;
margin-left: -3em;
margin-bottom: 3em;
}
#documentation-intro h1 {
color: #FFF;
width: 100%;
text-align: center;
font-size: 44px;
line-height: 1.1em;
}
#id1 {
display: none;
}
#documentation-intro h1 a {
text-decoration: none;
color: #FFF;
}
#documentation-intro p a {
font-size: 15px;
color: #7CB5FF;
}
#documentation-intro a:hover {
opacity: 0.75;
text-decoration: underline;
}
/* Syntax highlighter */
.hll{background-color:#ffc}.c{color:#998;font-style:italic}.err{color:#a61717;background-color:#e3d2d2}.k{color:#000;font-weight:bold}.o{color:#000;font-weight:bold}.cm{color:#998;font-style:italic}.cp{color:#999;font-weight:bold;font-style:italic}.c1{color:#998;font-style:italic}.cs{color:#999;font-weight:bold;font-style:italic}.gd{color:#000;background-color:#fdd}.ge{color:#000;font-style:italic}.gr{color:#a00}.gh{color:#999}.gi{color:#000;background-color:#dfd}.go{color:#888}.gp{color:#555}.gs{font-weight:bold}.gu{color:#aaa}.gt{color:#a00}.kc{color:#000;font-weight:bold}.kd{color:#000;font-weight:bold}.kn{color:#000;font-weight:bold}.kp{color:#000;font-weight:bold}.kr{color:#000;font-weight:bold}.kt{color:#458;font-weight:bold}.m{color:#099}.s{color:#d01040}.na{color:#008080}.nb{color:#0086b3}.nc{color:#458;font-weight:bold}.no{color:#008080}.nd{color:#3c5d5d;font-weight:bold}.ni{color:#800080}.ne{color:#900;font-weight:bold}.nf{color:#900;font-weight:bold}.nl{color:#900;font-weight:bold}.nn{color:#555}.nt{color:#000080}.nv{color:#008080}.ow{color:#000;font-weight:bold}.w{color:#bbb}.mf{color:#099}.mh{color:#099}.mi{color:#099}.mo{color:#099}.sb{color:#d01040}.sc{color:#d01040}.sd{color:#d01040}.s2{color:#d01040}.se{color:#d01040}.sh{color:#d01040}.si{color:#d01040}.sx{color:#d01040}.sr{color:#009926}.s1{color:#d01040}.ss{color:#990073}.bp{color:#999}.vc{color:#008080}.vg{color:#008080}.vi{color:#008080}.il{color:#099}

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,24 @@
---
layout: default
title: Magnific WordPress Plugin
description: The complete guide on how to use Magnific Popup - the open source responsive lightbox plugin.
addjs: false
canonical_url: http://dimsemenov.com/plugins/magnific-popup/wordpress.html
buildtool: false
---
<style>
#mc_embed_signup {
display: block !important;
max-width: 540px;
background: none;
}
</style>
{% include signup.html %}