BasicLightbox Default Demo

Developer
Tobias Reich
Size
4,270 Kb
Views
36,432
  1. BasicLightbox Default Demo Previews
  2. BasicLightbox Default Demo HTML Codes
  3. BasicLightbox Default Demo CSS Codes
  4. BasicLightbox Default Demo JS Codes

How do I make an basiclightbox default demo?

What is a basiclightbox default demo? How do you make a basiclightbox default demo? This script and codes were developed by Tobias Reich on 24 August 2022, Wednesday.

BasicLightbox Default Demo Previews
IQ Test

BasicLightbox Default Demo - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>basicLightbox Default Demo</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://s.electerious.com/basicLightbox/dist/basicLightbox.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <img width="1400" height="900" src="http://placehold.it/1400x900" data-basicLightbox data-id="0">
<a href="#" class="button" data-show-id="0">img</a>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Scxs7L0vhZ4" frameborder="0" allowfullscreen data-basicLightbox data-id="1"></iframe>
<a href="#" class="button" data-show-id="1">iframe</a>
<div data-basicLightbox data-id="2">	<h1>DIV</h1>	<p>I'm a div inside a lightbox.</p>
</div>
<a href="#" class="button" data-show-id="2">div</a>
<div data-basicLightbox data-id="3">	<h1>Callbacks</h1>	<p>Take a look at the console of your browser.<br>This lightbox will close automaticly to demonstrate the close-callback.</p>
</div>
<a href="#" class="button callbacks" data-show-id="3">callbacks</a>
<div data-basicLightbox data-id="4">	<h1>Blocked</h1>	<p>It's not possible to close this lightbox,<br>because the beforeClose function returns false.</p>
</div>
<a href="#" class="button blocked" data-show-id="4">blocked</a>
<div data-basicLightbox data-id="5">	<h1>Invalid</h1>	<p>No callback should fire, because non of them is a function.<br>No HTML should be appended, because non of them is a function or string.</p>
</div>
<a href="#" class="button invalid" data-show-id="5">invalid</a>
<div data-basicLightbox data-id="6">	<h1>Closable</h1>	<p>It's possible to close this lightbox with a click (default).</p>
</div>
<a href="#" class="button closable" data-show-id="6">closable</a>
<div data-basicLightbox data-id="7">	<h1>Not closable</h1>	<p>It's not possible to close this lightbox with a click.</p>
</div>
<a href="#" class="button notclosable" data-show-id="7">not closable</a>
<div data-basicLightbox data-id="8">	<h1>Custom HTML</h1>	<p>You can add custom HTML before and after the HTML placeholder element.</p>
</div>
<a href="#" class="button custom" data-show-id="8">custom</a>
<div data-basicLightbox data-id="9">	<h1>Custom classNames</h1>	<p>You can add custom classNames to the lightbox element.</p>
</div>
<a href="#" class="button classNames" data-show-id="9">classNames</a>
<a href="#" class="button dynamic">dynamic</a>
<a href="#" class="button stack">stack</a> <script src='http://s.electerious.com/basicLightbox/dist/basicLightbox.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

BasicLightbox Default Demo - Script Codes CSS Codes

html { width: 100%; height: 100%;
}
body { text-align: center; min-height: 100%; font-size: 14px; color: white;
}
a.button { display: inline-block; margin: 50px 0; padding: 6px 10px; background: #2875ed; color: #fff; text-decoration: none; border-radius: 3px; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none;
}
div.classNames { background: #2875ed;
}

BasicLightbox Default Demo - Script Codes JS Codes

'use strict';
var getTargetHTML = function getTargetHTML(elem) {	var id = elem.getAttribute('data-show-id');	var target = document.querySelector('[data-id="' + id + '"]');	return target.outerHTML;
};
Array.prototype.forEach.call(document.querySelectorAll('[data-show-id]'), function (elem) {	var html = getTargetHTML(elem);	elem.onclick = basicLightbox.create(html).show;
});
document.querySelector('.button.callbacks').onclick = function (e) {	var html = getTargetHTML(this);	var instance = basicLightbox.create(html, {	beforeShow: function beforeShow(instance) {	return console.log('beforeShow', instance);	},	afterShow: function afterShow(instance) {	return console.log('afterShow', instance);	},	beforeClose: function beforeClose(instance) {	return console.log('beforeClose', instance);	},	afterClose: function afterClose(instance) {	return console.log('afterClose', instance);	}	});	instance.show(function (instance) {	return console.log('finished show()', instance);	});	setTimeout(function () {	instance.close(function (instance) {	return console.log('finished close()', instance);	});	}, 3000);
};
document.querySelector('.button.blocked').onclick = function (e) {	var html = getTargetHTML(this);	basicLightbox.create(html, {	beforeClose: function beforeClose() {	return false;	}	}).show();
};
document.querySelector('.button.invalid').onclick = function (e) {	var html = getTargetHTML(this);	basicLightbox.create(html, {	closable: null,	className: null,	beforeShow: null,	afterShow: null,	beforeClose: null,	afterClose: null,	beforePlaceholder: null,	afterPlaceholder: null	}).show();
};
document.querySelector('.button.closable').onclick = function (e) {	var html = getTargetHTML(this);	basicLightbox.create(html, {	closable: true	}).show();
};
document.querySelector('.button.notclosable').onclick = function (e) {	var html = getTargetHTML(this);	basicLightbox.create(html, {	closable: false	}).show();
};
document.querySelector('.button.custom').onclick = function (e) {	var html = getTargetHTML(this);	basicLightbox.create(html, {	beforePlaceholder: function beforePlaceholder() {	return 'beforePlaceholder';	},	afterPlaceholder: 'afterPlaceholder'	}).show();
};
document.querySelector('.button.classNames').onclick = function (e) {	var html = getTargetHTML(this);	basicLightbox.create(html, {	className: 'classNames'	}).show();
};
document.querySelector('.button.dynamic').onclick = function (e) {	var html = '\n\t\t<h1>Dynamic Content</h1>\n\t\t<p>You can set the content of the lightbox with JS.</p>\n\t';	basicLightbox.create(html).show();
};
var openStack = function openStack(e) {	var html = '<a class="button" href="#">Open another lightbox on top</a>';	var instance = basicLightbox.create(html);	instance.element().querySelector('.button').onclick = openStack;	instance.show();
};
document.querySelector('.button.stack').onclick = openStack;
BasicLightbox Default Demo - Script Codes
BasicLightbox Default Demo - Script Codes
Home Page Home
Developer Tobias Reich
Username electerious
Uploaded August 24, 2022
Rating 3
Size 4,270 Kb
Views 36,432
Do you need developer help for BasicLightbox Default Demo?

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!

Tobias Reich (electerious) Script Codes
Name
BasicContext Scroll Example
Color Fan Deck
ScrollSnap Basic Example
BasicSlider Default Demo
Fancy border button
Swipe detection
Fancy box with zoom effect
Parallax scene with CSS variables
BasicContext Custom Position Example
BasicPlaceholder
Create amazing captions 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!