A Pen by englishextra

Developer
Englishextra
Size
6,117 Kb
Views
10,120
  1. A Pen by englishextra Previews
  2. A Pen by englishextra HTML Codes
  3. A Pen by englishextra CSS Codes
  4. A Pen by englishextra JS Codes

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
IQ Test

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 + &quot;%&quot;</p>	<p>So, for YouTube or Vimeo, <code>data-padding-bottom=&quot;56.25%&quot;</code> would be enough.</p>	<p>For SoundCloud embedded player via iframe, use: <code>data-padding-bottom=&quot;166px&quot;</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>&lt;a href=&quot;javascript:void(0);&quot;
class=&quot;iframe-lightbox-link&quot;
data-src=&quot;https://www.youtube.com/embed/KK9bwTlAvgo?autoplay=0&quot;
data-padding-bottom=&quot;56.25%&quot;&gt;YouTube&lt;/a&gt;</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>&lt;a href=&quot;javascript:void(0);&quot;
class=&quot;iframe-lightbox-link&quot;
data-src=&quot;https://player.vimeo.com/video/28629415?autoplay=false&quot;
data-padding-bottom=&quot;56.25%&quot;&gt;Vimeo&lt;/a&gt;</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&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></h2> <pre><code>&lt;a href=&quot;javascript:void(0);&quot;
class=&quot;iframe-lightbox-link&quot;
data-src=&quot;https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/317031598&amp;amp;auto_play=false&amp;amp;hide_related=false&amp;amp;show_comments=true&amp;amp;show_user=true&amp;amp;show_reposts=false&amp;amp;visual=true&quot;
data-padding-bottom=&quot;166px&quot;&gt;SoundCloud&lt;/a&gt;</code></pre>	<h2>Initialize</h2>	<pre><code>[].forEach.call(document.getElementsByClassName(&quot;iframe-lightbox-link&quot;), 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(&quot;iframe-lightbox-link&quot;), 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");	}
});
A Pen by englishextra - Script Codes
A Pen by englishextra - Script Codes
Home Page Home
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
Grid 2 Go
Core.css
CSS angled stripes
Blog Article Template
Ready-to-Go Three-columns Responsive Typography Template with Off-Canvas Navigation
QR code generating with vanilla js
Responsive CSS3 Columns with Horizontal Scroll
Responsive Flexbox Administration
Parallax.js
JSON based picture gallery with lazyloading
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!