begin dashboard
This commit is contained in:
SowinskiBraeden committed
1 parent
6d1611341a
commit
e3a811b224
121 files changed
+34389
-1662
No files matched your search
@@ -1,101 +0,0 @@
|
||||
---
|
||||
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>
|
||||
@@ -1,24 +0,0 @@
|
||||
---
|
||||
|
||||
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 %}
|
||||
@@ -1,32 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<title>Owl Carousel 2</title>
|
||||
|
||||
<link rel="stylesheet" href="../node_modules/qunitjs/qunit/qunit.css" />
|
||||
|
||||
<script src="../node_modules/jquery/dist/jquery.js"></script>
|
||||
<script src="../node_modules/qunitjs/qunit/qunit.js"></script>
|
||||
<script src="../src/js/owl.carousel.js" data-cover></script>
|
||||
<script src="../src/js/owl.support.js" data-cover></script>
|
||||
<script src="../src/js/owl.autoplay.js" data-cover></script>
|
||||
<script src="unit/core.js" defer></script>
|
||||
<script src="unit/autoplay.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="qunit"></div>
|
||||
<div id="qunit-fixture">
|
||||
|
||||
<ul id="simple" class="owl-carousel">
|
||||
<li>1</li>
|
||||
<li>2</li>
|
||||
<li>3</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large.
Load diff
@@ -1,150 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- Primary Meta Tags -->
|
||||
<title>Animate.css | A cross-browser library of CSS animations.</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="title" content="Animate.css | A cross-browser library of CSS animations.">
|
||||
<meta name="description" content="Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints.">
|
||||
|
||||
<!-- Open Graph / Facebook -->
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="https://animate.style">
|
||||
<meta property="og:title" content="Animate.css | A cross-browser library of CSS animations.">
|
||||
<meta property="og:description" content="Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints.">
|
||||
<meta property="og:image" content="https://animate.style/img/animatecss-opengraph.jpg">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta property="twitter:card" content="summary_large_image">
|
||||
<meta property="twitter:url" content="https://animate.style">
|
||||
<meta property="twitter:title" content="Animate.css | A cross-browser library of CSS animations.">
|
||||
<meta property="twitter:description" content="Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints.">
|
||||
<meta property="twitter:image" content="https://animate.style/img/animatecss-opengraph.jpg">
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
|
||||
<link rel="icon" href="img/favicon.ico" type="image/x-icon">
|
||||
|
||||
<link rel="dns-prefetch" href="//fonts.googleapis.com" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,400;0,700;1,400&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/themes/prism-tomorrow.min.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
|
||||
<link rel="stylesheet" href="animate.min.css" />
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<article class="intro">
|
||||
<section class="callout">
|
||||
<h1 class="callout-title">Animate.css</h1>
|
||||
<h2 class="callout-subtitle">Just-add-water CSS animations</h2>
|
||||
<p class="callout-showList">
|
||||
<button class="button button-animations">See animations</button>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section class="animation-list">
|
||||
<button class="callout-hideList button">Close list</button>
|
||||
{{list}}
|
||||
</section>
|
||||
|
||||
<footer class="intro-footer">
|
||||
<p>
|
||||
Another thing from
|
||||
<a href="https://daneden.me" target="_blank" title="Daniel Eden">Daniel Eden</a> and
|
||||
<a href="#contributors" title="Contributors">friends</a>
|
||||
</p>
|
||||
</footer>
|
||||
</article>
|
||||
|
||||
<main>
|
||||
<header class="docs-header">
|
||||
<div class="container">
|
||||
<h2 class="docs-mainTitle">
|
||||
<a href="#documentation" title="Documentation">Documentation</a>
|
||||
</h2>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<article class="docs" id="documentation">
|
||||
<span class="hamburger">
|
||||
<svg
|
||||
width="23"
|
||||
height="15"
|
||||
viewBox="0 0 23 15"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<line y1="1.5" x2="23" y2="1.5" stroke="#351C75" stroke-width="3" />
|
||||
<line y1="7.5" x2="23" y2="7.5" stroke="#351C75" stroke-width="3" />
|
||||
<line y1="13.5" x2="23" y2="13.5" stroke="#351C75" stroke-width="3" />
|
||||
</svg>
|
||||
</span>
|
||||
<div class="container">
|
||||
<div class="content">
|
||||
{{docs}}
|
||||
</div>
|
||||
<aside class="sidebar">
|
||||
<div class="meta">
|
||||
<a href="https://github.com/daneden/animate.css" target="_blank" class="icon-github">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 18 18"
|
||||
width="18"
|
||||
height="18"
|
||||
>
|
||||
<path
|
||||
fill="#000000"
|
||||
d="M16.793 4.703a8.96 8.96 0 00-3.276-3.276A8.803 8.803 0 009 .22a8.804 8.804 0 00-4.518 1.207 8.96 8.96 0 00-3.275 3.276A8.803 8.803 0 000 9.22c0 1.96.572 3.724 1.717 5.29 1.144 1.567 2.623 2.651 4.435 3.252.211.04.367.012.469-.081a.458.458 0 00.152-.352l-.006-.633c-.004-.398-.006-.746-.006-1.042l-.27.046a3.434 3.434 0 01-.65.041 4.958 4.958 0 01-.814-.082 1.82 1.82 0 01-.785-.351 1.487 1.487 0 01-.516-.72l-.117-.27a2.93 2.93 0 00-.369-.598c-.168-.219-.338-.367-.51-.445l-.082-.059a.865.865 0 01-.152-.14.643.643 0 01-.105-.165c-.024-.054-.004-.1.058-.135.063-.035.176-.052.34-.052l.234.035c.157.031.35.125.58.281.23.156.42.36.569.61.18.32.396.564.65.732.254.168.51.252.768.252.257 0 .48-.02.667-.059a2.33 2.33 0 00.528-.175c.07-.524.262-.927.574-1.208a8.026 8.026 0 01-1.201-.21 4.779 4.779 0 01-1.102-.458 3.153 3.153 0 01-.943-.785c-.25-.312-.455-.723-.615-1.23-.16-.508-.24-1.094-.24-1.758 0-.946.308-1.75.925-2.414-.289-.711-.261-1.508.082-2.39.227-.071.563-.018 1.008.157.446.176.772.327.979.452.207.125.373.23.498.316A8.32 8.32 0 019 4.568c.773 0 1.523.101 2.25.304l.445-.281c.305-.188.664-.36 1.078-.516.414-.156.73-.199.95-.129.351.883.382 1.68.093 2.39.617.665.926 1.47.926 2.415 0 .664-.08 1.252-.24 1.764-.16.511-.367.921-.62 1.23-.255.309-.572.569-.95.78-.38.21-.747.362-1.102.456a8.013 8.013 0 01-1.201.212c.406.351.61.906.61 1.664v2.472c0 .14.048.258.146.351.097.094.252.121.463.082 1.812-.601 3.29-1.685 4.435-3.252C17.427 12.944 18 11.18 18 9.22a8.81 8.81 0 00-1.207-4.517z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
<span class="animate-version">v{{version}}</span>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</article>
|
||||
</main>
|
||||
|
||||
<footer class="main-footer">
|
||||
<p>
|
||||
Animate.css is a MIT licensed library.
|
||||
You can use it freely, respecting the terms included in the <a href="https://github.com/daneden/animate.css/blob/main/LICENSE" title="license">license file.
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
<aside class="motionless__banner">
|
||||
<p class="motionless__paragraph">
|
||||
<b>Hey!</b> It seems that you have animations disabled on your OS, turning Animate.css
|
||||
off.<br />
|
||||
Animate.css supports the
|
||||
<a
|
||||
title="prefers-reduced-motion CSS media feature on MDN"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion"
|
||||
>
|
||||
prefers-reduced-motion CSS media feature</a
|
||||
>. You can read more about it
|
||||
<a
|
||||
title="Move Ya! Or maybe, don't, if the user prefers-reduced-motion! on Google Developers"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
href="https://developers.google.com/web/updates/2019/03/prefers-reduced-motion"
|
||||
>
|
||||
here</a
|
||||
>.
|
||||
</p>
|
||||
</aside>
|
||||
<script type="module" src="main.mjs"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/prism.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/autoloader/prism-autoloader.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in new issue
Block a user