A Pen by englishextra
How do I make an a pen by englishextra?
What is a a pen by englishextra? How do you make a a pen by englishextra? This script and codes were developed by Englishextra on 17 January 2023, Tuesday.
A Pen by englishextra Previews
A Pen by englishextra - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by englishextra</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1 class="title">Iframe-Lightbox Demo</h1> <p>Responsive no-jQuery pure JS/CSS Lightbox for iframes, no dependencies, customizable aspect ratio, 4 kb unminified source code, with demo</p> <p><a href="https://nodei.co/npm/iframe-lightbox/"><img src="https://camo.githubusercontent.com/4e8d842a445e98d70413ec0cdf2de3c4bbd2964d/68747470733a2f2f6e6f6465692e636f2f6e706d2f696672616d652d6c69676874626f782e706e673f646f776e6c6f6164733d74727565" alt="NPM" data-canonical-src="https://nodei.co/npm/iframe-lightbox.png?downloads=true" style="max-width:100%;"></a></p> <p><a href="https://github.com/englishextra/iframe-lightbox"><img src="https://camo.githubusercontent.com/05e33067cdf8446de0efaaada0a614c26bfe8f70/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f696672616d652d6c69676874626f782e737667" alt="npm" data-canonical-src="https://img.shields.io/npm/v/iframe-lightbox.svg" style="max-width:100%;"></a> <a href="https://github.com/englishextra/iframe-lightbox"><img src="https://camo.githubusercontent.com/f9b32ca33edab2aa10004a2e164204d030a11375/68747470733a2f2f696d672e736869656c64732e696f2f626f7765722f762f696672616d652d6c69676874626f782e737667" alt="Bower" data-canonical-src="https://img.shields.io/bower/v/iframe-lightbox.svg" style="max-width:100%;"></a> <a href="https://travis-ci.org/englishextra/iframe-lightbox"><img src="https://camo.githubusercontent.com/68c5a2cebe394dc9020950242f0106e9861223c9/68747470733a2f2f7472617669732d63692e6f72672f656e676c69736865787472612f696672616d652d6c69676874626f782e7376673f6272616e63683d6d6173746572" alt="Build Status" data-canonical-src="https://travis-ci.org/englishextra/iframe-lightbox.svg?branch=master" style="max-width:100%;"></a> <a href="https://www.bithound.io/github/englishextra/iframe-lightbox"><img src="https://camo.githubusercontent.com/ef4e8779904740cddf5fa696d274e465d54e7903/68747470733a2f2f7777772e626974686f756e642e696f2f6769746875622f656e676c69736865787472612f696672616d652d6c69676874626f782f6261646765732f73636f72652e737667" alt="bitHound Overall Score" data-canonical-src="https://www.bithound.io/github/englishextra/iframe-lightbox/badges/score.svg" style="max-width:100%;"></a></p> <p> <a href="https://fiddle.jshell.net/englishextra/8pzy6uhr/show/">DEMO</a> <a href="https://output.jsbin.com/saqine">DEMO (ALT)</a> <a href="https://codepen.io/englishextra/full/jmjayV/">DEMO (ALT)</a> </p> <h3>Features</h3> <ul> <li>Nicely fits YouTube / Vimeo / SoundCloud or other URL via iframe</li> <li>Customizable aspect ratio via `data-padding-bottom` attribute</li> <li>Debounced launch, default 500ms, custom rate can be set as second parameter</li> <li>Preloading spinner that is unset after onload event succeeds</li> </ul> <h3>CDN</h3> <h4>jsDelivr</h4> <p> <code>https://cdn.jsdelivr.net/gh/englishextra/iframe-lightbox@latest/iframe-lightbox.min.js</code> <br/> <code>https://cdn.jsdelivr.net/gh/englishextra/iframe-lightbox@latest/iframe-lightbox.min.css</code> </p> <h4>unpkg</h4> <p> <code>https://unpkg.com/iframe-lightbox@latest/iframe-lightbox.js</code> <br/> <code>https://unpkg.com/iframe-lightbox@latest/iframe-lightbox.css</code> </p> <h3>Install</h3> <h4>npm</h4> <p> <code>npm install iframe-lightbox</code> </p> <h4>bower</h4> <p> <code>bower install iframe-lightbox</code> </p> <h3>Setup</h3> <p><code>class</code> is not required. They are used here to select elements. You may use some other method for elements selection.</p> <p><code>data-src</code> is required, and contains URL of your content.</p> <p><code>data-padding-bottom</code> is optional, and can be used to change default 16/9 Aspect Ratio to the one of yours with the formula: a percentage value of <code>height/width*100</code>.</p> <p>For instance, HD would be: 9 / 16 * 100 + "%"</p> <p>So, for YouTube or Vimeo, <code>data-padding-bottom="56.25%"</code> would be enough.</p> <p>For SoundCloud embedded player via iframe, use: <code>data-padding-bottom="166px"</code></p> <h2><a href="javascript:void(0);" class="iframe-lightbox-link" data-src="https://www.youtube.com/embed/KK9bwTlAvgo?autoplay=0" data-padding-bottom="56.25%">YouTube</a></h2> <pre><code><a href="javascript:void(0);"
class="iframe-lightbox-link"
data-src="https://www.youtube.com/embed/KK9bwTlAvgo?autoplay=0"
data-padding-bottom="56.25%">YouTube</a></code></pre> <h2><a href="javascript:void(0);" class="iframe-lightbox-link" data-src="https://player.vimeo.com/video/28629415?autoplay=false" data-padding-bottom="56.25%">Vimeo</a></h2> <pre><code><a href="javascript:void(0);"
class="iframe-lightbox-link"
data-src="https://player.vimeo.com/video/28629415?autoplay=false"
data-padding-bottom="56.25%">Vimeo</a></code></pre> <h2><a href="javascript:void(0);" class="iframe-lightbox-link" data-src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/317031598&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true" data-padding-bottom="166px">SoundCloud</a></h2> <pre><code><a href="javascript:void(0);"
class="iframe-lightbox-link"
data-src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/317031598&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true"
data-padding-bottom="166px">SoundCloud</a></code></pre> <h2>Initialize</h2> <pre><code>[].forEach.call(document.getElementsByClassName("iframe-lightbox-link"), function(el) { el.lightbox = new IframeLightbox(el);
});</code></pre> <h2>Tips</h2> <p>SPA / PWA developers can use CSS flag classes when adding event listeners, e.g.:</p> <pre><code>[].forEach.call(document.getElementsByClassName("iframe-lightbox-link"), function(el) { if (!el.classList.contains("is-binded")) { el.lightbox = new IframeLightbox(el); el.classList.add("is-binded"); }
});</code></pre> <p>That way you avoid multiple assignments to a single element.</p> <h3><a href="https://github.com/englishextra/iframe-lightbox">GitHub</a></h3> <p>Inspired by <a href="https://github.com/squeral/lightbox">squeral/lightbox</a>, and available under MIT License</p> <script src="js/index.js"></script>
</body>
</html>
A Pen by englishextra - Script Codes CSS Codes
/*! * modified Simple lightbox effect in pure JS * @see {@link https://github.com/squeral/lightbox} * @see {@link https://github.com/squeral/lightbox/blob/master/lightbox.js} * passes jshint */
.iframe-lightbox,
.iframe-lightbox .backdrop { width: 100%; height: 100%; top: 0; left: 0;
}
.iframe-lightbox { display: none; position: fixed; opacity: 0; -webkit-transition: opacity 0.2s ease; transition: opacity 0.2s ease; z-index: 2;
}
.iframe-lightbox .backdrop { position: absolute; background-color: rgba(0, 0, 0, 0.5); cursor: default; z-index: 1;
}
.iframe-lightbox .content-holder { width: 80%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); margin-right: -50%; z-index: 2;
}
.iframe-lightbox .content { height: 0; position: relative; /* background-color: #000000; */ padding-bottom: 56.25%;
}
.iframe-lightbox .content > .body { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nNDgnIGhlaWdodD0nNDgnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIiBjbGFzcz0idWlsLXJpbmciPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBmaWxsPSJub25lIiBjbGFzcz0iYmsiPjwvcmVjdD48Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0NiIgc3Ryb2tlLWRhc2hhcnJheT0iMTg3Ljg2NzI0MDY4NDY2OTY0IDEwMS4xNTkyODM0NDU1OTEzMSIgc3Ryb2tlPSIjRTZFNkU2IiBvcGFjaXR5PSIxIiBmaWxsPSJub25lIiBzdHJva2Utd2lkdGg9IjgiPjxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgdHlwZT0icm90YXRlIiB2YWx1ZXM9IjAgNTAgNTA7MTgwIDUwIDUwOzM2MCA1MCA1MDsiIGtleVRpbWVzPSIwOzAuNTsxIiBkdXI9IjFzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgYmVnaW49IjBzIj48L2FuaW1hdGVUcmFuc2Zvcm0+PC9jaXJjbGU+PC9zdmc+); background-repeat: no-repeat; background-size: 3.000em 3.000em; background-position: center center;
}
.iframe-lightbox .content > .body.is-loaded { background-image: none;
}
.iframe-lightbox iframe { display: block; width: 100%; height: 100%; border: 0; box-shadow: 0.267rem 0.267rem 0.267rem 0 rgba(3, 3, 3, 0.3); /*! * in js: iframe onload="this.style.opacity=1;" style="opacity:0;border:none;" */ /* opacity: 0; */ -webkit-transition: opacity 0.2s ease; transition: opacity 0.2s ease;
}
.iframe-lightbox.is-showing { display: block;
}
.iframe-lightbox.is-opened { opacity: 1;
}A Pen by englishextra - Script Codes JS Codes
/*! * modified Simple lightbox effect in pure JS * @see {@link https://github.com/squeral/lightbox} * @see {@link https://github.com/squeral/lightbox/blob/master/lightbox.js} * @params {Object} elem Node element * @params {Object} [rate] debounce rate, default 500ms * new IframeLightbox(elem) * passes jshint */
(function (root) { "use strict"; var d = document, aEL = "addEventListener", gEBI = "getElementById", gEBCN = "getElementsByClassName", cE = "createElement", cL = "classList", aC = "appendChild", dS = "dataset", containerClass = "iframe-lightbox", isLoadedClass = "is-loaded", isOpenedClass = "is-opened", isShowingClass = "is-showing"; var IframeLightbox = function (elem, rate) { this.trigger = elem; this.rate = rate || 500; this.el = d[gEBCN](containerClass)[0] || ""; this.body = this.el ? this.el[gEBCN]("body")[0] : ""; this.content = this.el ? this.el[gEBCN]("content")[0] : ""; this.href = elem[dS].src || ""; this.paddingBottom = elem[dS].paddingBottom || ""; this.init(); }; IframeLightbox.prototype.init = function () { var _this = this; if (!this.el) { this.create(); } var debounce = function (func, wait) { var timeout, args, context, timestamp; return function () { context = this; args = [].slice.call(arguments, 0); timestamp = new Date(); var later = function () { var last = (new Date()) - timestamp; if (last < wait) { timeout = setTimeout(later, wait - last); } else { timeout = null; func.apply(context, args); } }; if (!timeout) { timeout = setTimeout(later, wait); } }; }; var handleOpenIframeLightbox = function (e) { e.preventDefault(); _this.open(); }; var debounceHandleOpenIframeLightbox = debounce(handleOpenIframeLightbox, this.rate); this.trigger[aEL]("click", debounceHandleOpenIframeLightbox); }; IframeLightbox.prototype.create = function () { var _this = this, bd = d[cE]("div"); this.el = d[cE]("div"); this.content = d[cE]("div"); this.body = d[cE]("div"); this.el[cL].add(containerClass); bd[cL].add("backdrop"); this.content[cL].add("content"); this.body[cL].add("body"); this.el[aC](bd); this.content[aC](this.body); this.content_holder = d[cE]("div"); this.content_holder[cL].add("content-holder"); this.content_holder[aC](this.content); this.el[aC](this.content_holder); d.body[aC](this.el); bd[aEL]("click", function () { _this.close(); }); var clearBody = function (e) { if (_this.isOpen()) { return; } _this.el[cL].remove(isShowingClass); _this.body.innerHTML = ""; }; this.el[aEL]("transitionend", clearBody, false); this.el[aEL]("webkitTransitionEnd", clearBody, false); this.el[aEL]("mozTransitionEnd", clearBody, false); this.el[aEL]("msTransitionEnd", clearBody, false); }; IframeLightbox.prototype.loadIframe = function () { this.iframeId = containerClass + Date.now(); this.body.innerHTML = '<iframe src="' + this.href + '" name="' + this.iframeId + '" id="' + this.iframeId + '" onload="this.style.opacity=1;" style="opacity:0;border:none;" scrolling="no" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen="true" height="166" frameborder="no"></iframe>'; (function (iframeId, body) { d[gEBI](iframeId).onload = function () { this.style.opacity = 1; body[cL].add(isLoadedClass); }; })(this.iframeId, this.body); }; IframeLightbox.prototype.open = function () { this.loadIframe(); if (this.paddingBottom) { this.content.style.paddingBottom = this.paddingBottom; } else { this.content.removeAttribute("style"); } this.el[cL].add(isShowingClass); this.el[cL].add(isOpenedClass); }; IframeLightbox.prototype.close = function () { this.el[cL].remove(isOpenedClass); this.body[cL].remove(isLoadedClass); }; IframeLightbox.prototype.isOpen = function () { return this.el[cL].contains(isOpenedClass); }; root.IframeLightbox = IframeLightbox;
})("undefined" !== typeof window ? window : this);
[].forEach.call(document.getElementsByClassName("iframe-lightbox-link"), function(el) { if (!el.classList.contains("is-binded")) { el.lightbox = new IframeLightbox(el); el.classList.add("is-binded"); }
});
| Developer | Englishextra |
| Username | englishextra |
| Uploaded | January 17, 2023 |
| Rating | 3 |
| Size | 6,117 Kb |
| Views | 10,120 |
Do you need developer help for A Pen by englishextra?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Englishextra (englishextra) Script Codes
| Name | Size |
| Responsive CSS3 Columns with Horizontal Scroll | 7,115 Kb |
| Timeline Blueprint | 5,154 Kb |
| Grid 2 Go | 3,049 Kb |
| Blog Article Template | 14,860 Kb |
| Ready-to-Go Three-columns Responsive Typography Template with Off-Canvas Navigation | 18,977 Kb |
| JSON based picture gallery with lazyloading | 10,270 Kb |
| CSS angled stripes | 5,116 Kb |
| Parallax.js | 11,997 Kb |
| Metro UI Colors Palettes | 53,243 Kb |
| Responsive Flexbox Administration | 7,376 Kb |
Create amazing blog posts with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| NAV WPMANAGER | Mstoic | 1,991 Kb |
| A Pen by Sooba | Sooba | 2,516 Kb |
| SVG Circle Progress | JMChristensen | 3,368 Kb |
| Horizontal Navigation with Floats | Gymratpacks | 5,403 Kb |
| Animated SVG stroke-dasharray | Netsi1964 | 3,179 Kb |
| Website Concept | Sagoza | 3,104 Kb |
| Angular-HAML | Cwacht | 2,022 Kb |
| HTM5 picture dropzone | Jaysalvat | 2,576 Kb |
| FontAwesome icons with animation | Nicotinell | 2,083 Kb |
| Cloudy Spiral CSS animation | Hakimel | 6,587 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!