averello/Magnific-Popup-mirror
1
0
Fork 0
mirror of https://github.com/dimsemenov/Magnific-Popup.git synced 2025-12-14 20:36:04 +01:00
Code Issues Packages Projects Releases Wiki Activity

build/docs upd

Browse Source
This commit is contained in:
Dmytro Semenov
2024-06-08 09:52:59 +03:00
parent d9fb917258
commit f77d6d5fcc
16 changed files with 18581 additions and 16449 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.gitignore vendored
View File

@@ -21,4 +21,6 @@ website/dist/
*.idea
/.idea
.node-version
.sass-cache/
.sass-cache/
package-lock.json
*.map

8
Gruntfile.js
View File

@@ -6,6 +6,8 @@
*
*/
var sass = require('dart-sass');
module.exports = function(grunt) {
'use strict';
@@ -32,7 +34,11 @@ module.exports = function(grunt) {
files: ['dist']
},
sass: {
sass: {
options: {
implementation: sass,
sourceMap: true
},
dist: {
files: {
'dist/magnific-popup.css': 'src/css/main.scss'

2
LICENSE
View File

@@ -1,6 +1,6 @@
The MIT License (MIT)
Copyright (c) 2014-2016 Dmitry Semenov, http://dimsemenov.com
Copyright (c) 2014-2024 Dmytro Semenov, http://dimsemenov.com
Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in

26
README.md
View File

@@ -1,32 +1,10 @@
> # 🇺🇦 UKRAINE NEEDS YOUR HELP NOW!
>
> I'm the creator of this project and I'm Ukrainian.
>
> **My country, Ukraine, [is being invaded by the Russian Federation, right now](https://www.bbc.com/news/world-europe-60504334)**. I've fled Kyiv and now I'm safe with my family in the western part of Ukraine. At least for now.
> Russia is hitting target all over my country by ballistic missiles.
>
> **Please, save me and help to save my country!**
>
> Ukrainian National Bank opened [an account to Raise Funds for Ukraine’s Armed Forces](https://bank.gov.ua/en/news/all/natsionalniy-bank-vidkriv-spetsrahunok-dlya-zboru-koshtiv-na-potrebi-armiyi):
>
> ```
> SWIFT Code NBU: NBUA UA UX
> JP MORGAN CHASE BANK, New York
> SWIFT Code: CHASUS33
> Account: 400807238
> 383 Madison Avenue, New York, NY 10179, USA
> IBAN: UA843000010000000047330992708
> ```
>
> You can also donate to [charity supporting Ukrainian army](https://savelife.in.ua/en/donate/).
>
> **THANK YOU!**
**Important note** This jQuery plugin is deprecated, only critical or security bug fixes will be released in future. Use native `<dialog>` element if you need a basic dialog/modal/popup, or my <a href="https://photoswipe.com">PhotoSwipe</a> library if you need an advanced image gallery. Feel free to email me if you need assistance.
[![Stand With Ukraine](https://raw.githubusercontent.com/vshymanskyy/StandWithUkraine/main/banner-direct.svg)](https://savelife.in.ua/en/)
# Magnific Popup Repository
[![Build Status](https://travis-ci.org/dimsemenov/Magnific-Popup.png)](https://travis-ci.org/dimsemenov/Magnific-Popup)
[![Flattr](http://api.flattr.com/button/flattr-badge-large.png)](https://flattr.com/thing/1310305/Magnific-Popup-by-dimsemenov)
Fast, light and responsive lightbox plugin, for jQuery and Zepto.js.

17211
libs/jquery/jquery.js vendored
View File

File diff suppressed because it is too large Load Diff

4
magnific-popup.jquery.json
View File

@@ -2,12 +2,12 @@
"name": "magnific-popup",
"title": "Magnific Popup",
"description": "Fast, light, mobile-friendly and responsive lightbox and modal dialog plugin. Open inline HTML, ajax loaded content, image, form, iframe (YouTube video, Vimeo, Google Maps), photo gallery. Animation effects added with CSS3 transitions. For jQuery or Zepto.",
"version": "1.1.0",
"version": "1.2.0",
"homepage": "http://dimsemenov.com/plugins/magnific-popup/",
"demo": "http://dimsemenov.com/plugins/magnific-popup/",
"docs": "http://dimsemenov.com/plugins/magnific-popup/documentation.html",
"author": {
"name": "Dmitry Semenov",
"name": "Dmytro Semenov",
"email": "diiiimaaaa@gmail.com",
"url": "http://dimsemenov.com"
},

5
package.json
View File

@@ -1,6 +1,6 @@
{
"name": "magnific-popup",
"version": "1.1.0",
"version": "1.2.0",
"title": "Magnific Popup",
"description": "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.",
"keywords": [
@@ -19,7 +19,7 @@
"mobile"
],
"author": {
"name": "Dmitry Semenov",
"name": "Dmytro Semenov",
"email": "diiiimaaaa@gmail.com",
"web": "http://dimsemenov.com"
},
@@ -37,6 +37,7 @@
"test": "grunt jshint"
},
"devDependencies": {
"dart-sass": "^1.25.0",
"grunt": "~1.6.1",
"grunt-contrib-clean": "~2.0.1",
"grunt-contrib-concat": "^2.1.0",

3
website/_includes/analytics.html
View File

@@ -18,7 +18,4 @@
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 %}

273
website/_includes/build-tool.html
View File

@@ -1,273 +0,0 @@
<!-- 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>

174
website/_includes/examples.html
View File

@@ -1,20 +1,7 @@
{% 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 %}
<script src="third-party-libs/jquery.js?v={{site.mfpversion}}"></script>
<script src="https://code.jquery.com/jquery-migrate-3.4.1.js"></script>
<script src="dist/jquery.magnific-popup.js?v={{site.mfpversion}}"></script>
<!--
@@ -162,7 +149,7 @@ Each '.example' block contains JS, HTML and optionally CSS for popup.
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>';
return item.el.attr('title') + ' by Marsel Van Oosten';
}
}
});
@@ -202,12 +189,17 @@ Each '.example' block contains JS, HTML and optionally CSS for popup.
closeOnContentClick: false,
closeBtnInside: false,
mainClass: 'mfp-with-zoom mfp-img-mobile',
// If you enable allowHTMLInTemplate -
// make sure your HTML attributes are sanitized if they can be created by a non-admin user
allowHTMLInTemplate: true,
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
},
@@ -632,7 +624,7 @@ Each '.example' block contains JS, HTML and optionally CSS for popup.
<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-image" class="mfp-image" href="http://upload.wikimedia.org/wikipedia/commons/thumb/f/f3/Blois_Loire_Panorama_-_July_2011-404-image-link" >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">
@@ -674,3 +666,147 @@ Each '.example' block contains JS, HTML and optionally CSS for popup.
Examples end.
-->
<!-- 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($) {
/**
* 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>

8
website/_layouts/default.html
View File

@@ -8,7 +8,7 @@
<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">
<meta name="author" content="Dmytro Semenov">
<link rel="canonical" href="{{page.canonical_url}}" />
<meta property="og:url" content="{{page.canonical_url}}">
@@ -39,7 +39,7 @@
{{ 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 %}
Created by <a href="http://dimsemenov.com" rel="author">Dmytro Semenov</a>.{% if page.include_credit %} Photography in demo by <a href="http://www.squiver.com">Marsel Van Oosten</a>{% endif %}
</div>
</div>
@@ -66,10 +66,6 @@
{% 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 %}

33
website/documentation.md
View File

@@ -10,13 +10,13 @@ addjs: true
canonical_url: http://dimsemenov.com/plugins/magnific-popup/documentation.html
buildtool: true
permalink: /documentation.html
---
<div id="documentation-intro">
<h1><a href="http://dimsemenov.com/plugins/magnific-popup/">Magnific Popup</a> Documentation</h1>
<p><a href="https://github.com/dimsemenov/Magnific-Popup/">Project on GitHub</a> &middot; <a href="#mfp-build-tool" class="mfp-build-tool-link">Build tool</a> &middot; <a href="http://twitter.com/dimsemenov">Twitter of developer</a> &middot; <a href="http://dimsemenov.com/subscribe.html">Newsletter of developer</a></p>
<p><a href="https://github.com/dimsemenov/Magnific-Popup/">Project on GitHub</a> &middot; <a href="http://twitter.com/dimsemenov">Twitter of developer</a> &middot; <a href="http://dimsemenov.com/subscribe.html">Newsletter of developer</a></p>
</div>
@@ -37,7 +37,7 @@ If you're looking for touch-friendly popup just for images, <a href="http://phot
## Including files
You can get Magnific Popup JS and CSS file from the <a href="#mfp-build-tool" class="mfp-build-tool-link">build tool</a>, from the `dist/` folder in the <a href="https://github.com/dimsemenov/Magnific-Popup">GitHub repository</a>, or by compiling it yourself with Grunt.
You can get Magnific Popup JS and CSS file from the `dist/` folder in the <a href="https://github.com/dimsemenov/Magnific-Popup">GitHub repository</a>, or by compiling it yourself with Grunt.
{% highlight html %}
<!-- Magnific Popup core CSS file -->
@@ -221,12 +221,12 @@ image: {
titleSrc: 'title', // Attribute of the target element that contains caption for the slide.
// Or the function that should return the title. For example:
// titleSrc: function(item) {
// return item.el.attr('title') + '<small>by Marsel Van Oosten</small>';
// return item.el.attr('title') + ' by Marsel Van Oosten';
// }
verticalFit: true, // Fits image in area vertically
tError: '<a href="%url%">The image</a> could not be loaded.' // Error message
tError: 'The image could not be loaded.' // Error message
}
{% endhighlight %}
@@ -400,7 +400,7 @@ ajax: {
// settings: {cache:false, async:false}
cursor: 'mfp-ajax-cur', // CSS class that will be added to body during the loading (adds "progress" cursor)
tError: '<a href="%url%">The content</a> could not be loaded.' // Error message, can contain %curr% and %total% tags if gallery is enabled
tError: 'The content could not be loaded.' // Error message, can contain %curr% and %total% tags if gallery is enabled
}
{% endhighlight %}
@@ -653,6 +653,19 @@ The DOM element to which popup will be added. Useful when you're using ASP.NET w
If set to `true` last focused element before popup showup will be focused after popup close. Option available since 2015/12/16.
### allowHTMLInTemplate
<code class="def">false</code>
Available since 1.2.0. Allows HTML content in the source template (such as text under image). If you enable this - make sure your HTML attributes are sanitized if they can be created by a non-admin user.
### allowHTMLInStatusIndicator
<code class="def">false</code>
Available since 1.2.0. Same as above, but allows HTML content in the status indicator (such as "Loading..." or error message text).
## Gallery
@@ -1127,10 +1140,10 @@ $.extend(true, $.magnificPopup.defaults, {
tCounter: '%curr% of %total%' // Markup for "1 of 7" counter
},
image: {
tError: '<a href="%url%">The image</a> could not be loaded.' // Error message when image could not be loaded
tError: 'The image could not be loaded.' // Error message when image could not be loaded
},
ajax: {
tError: '<a href="%url%">The content</a> could not be loaded.' // Error message when ajax request failed
tError: 'The content could not be loaded.' // Error message when ajax request failed
}
});
{% endhighlight %}
@@ -1147,10 +1160,10 @@ $('.some-button').magnificPopup({
tCounter: '%curr% of %total%'
},
image: {
tError: '<a href="%url%">The image</a> could not be loaded.'
tError: 'The image could not be loaded.'
},
ajax: {
tError: '<a href="%url%">The request</a> failed.'
tError: 'The request failed.'
}
// surely, you may add other options here

6
website/index.html
View File

@@ -4,7 +4,6 @@ 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">
@@ -14,8 +13,9 @@ buildtool: true
{% 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>
<h2 class="intro" style="padding-left:8px;border-left:4px solid red;"><strong>Important note:</strong> This jQuery plugin is deprecated, only critical or security bug fixes will be released in future. Use native &lt;dialog&gt; element if you need a basic dialog/modal/popup, or my <a href="https://photoswipe.com">PhotoSwipe</a> library if you need an advanced image gallery. Feel free to email <a href="https://dimsemenov.com">me</a> if you need assistance.</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>
<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 class="smashing-link" href="http://coding.smashingmagazine.com/2013/05/02/truly-responsive-lightbox/">How it was made</a>
</div>
</div>
@@ -29,7 +29,7 @@ buildtool: true
<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>
<p>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>

2
website/site-assets/site.css
View File

@@ -401,7 +401,7 @@ float: right;
.example h3:hover {
color: #C00;
}
.example h3:hover:after {
.example h3:after {
content: 'view source';
padding-left: 8px;
color: #999;

17267
website/third-party-libs/jquery.js vendored
View File

File diff suppressed because it is too large Load Diff

4
website/third-party-libs/jquery.min.js vendored
View File

File diff suppressed because one or more lines are too long