477 lines
24 KiB
HTML
477 lines
24 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
|
|
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
|
|
|
|
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" />
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
|
|
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
|
|
crossorigin="anonymous"
|
|
/>
|
|
<link rel="stylesheet" href="demo/css/style.css" />
|
|
<link rel="stylesheet" href="dist/css/glightbox.css" />
|
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
|
|
|
|
<title>GLightbox | A touchable pure Javascript lightbox</title>
|
|
</head>
|
|
|
|
<body>
|
|
<header class="main-header">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="header-inner">
|
|
<a href="#" class="logo" style="font-family: 'Lobster', cursive">GLightbox</a>
|
|
<ul class="d-none d-md-block">
|
|
<li><a href="#examples">EXAMPLES</a></li>
|
|
<li><a href="#specifications">INFO</a></li>
|
|
<li><a href="#license">LICENSE</a></li>
|
|
<li><a href="https://github.com/biati-digital/glightbox/releases/tag/3.3.0">DOWNLOAD</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="intro">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="lead">
|
|
<h1 style="font-family: 'Lobster', cursive">GLightbox.</h1>
|
|
<p class="tagline">
|
|
Code name
|
|
<strong>"Gie"</strong>
|
|
A touchable Pure Javascript
|
|
<br />
|
|
lightbox with mobile and video support.
|
|
</p>
|
|
|
|
<div class="download">
|
|
<a class="mcbutton primary" href="https://github.com/biati-digital/glightbox/releases/tag/3.3.0">
|
|
<i class="fa fa-download" aria-hidden="true"></i>
|
|
<span>Download</span>
|
|
</a>
|
|
<a class="mcbutton black" href="https://github.com/biati-digital/glightbox" target="_blank">
|
|
<i class="fa fa-github" aria-hidden="true"></i>
|
|
<span>View Source</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Simple images example -->
|
|
<section id="examples" class="section">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<h3>
|
|
<i class="fa fa-camera-retro heading-icon" aria-hidden="true"></i>
|
|
Simple Image Gallery
|
|
</h3>
|
|
|
|
<ul class="box-container three-cols">
|
|
<li class="box">
|
|
<div class="inner">
|
|
<a href="demo/img/large/gm1.jpg" class="glightbox">
|
|
<img src="demo/img/small/gm1.jpg" alt="image" />
|
|
</a>
|
|
</div>
|
|
</li>
|
|
<li class="box">
|
|
<div class="inner">
|
|
<a href="demo/img/large/gm2.jpg" class="glightbox">
|
|
<img src="demo/img/small/gm2.jpg" alt="image" />
|
|
</a>
|
|
</div>
|
|
</li>
|
|
<li class="box">
|
|
<div class="inner">
|
|
<a href="demo/img/large/gm3.jpg" class="glightbox">
|
|
<img src="demo/img/small/gm3.jpg" alt="image" />
|
|
</a>
|
|
</div>
|
|
</li>
|
|
<li class="box">
|
|
<div class="inner">
|
|
<a href="demo/img/large/gm4.jpg" class="glightbox">
|
|
<img src="demo/img/small/gm4.jpg" alt="image" />
|
|
</a>
|
|
</div>
|
|
</li>
|
|
<li class="box">
|
|
<div class="inner">
|
|
<a href="demo/img/large/gm5.jpg" class="glightbox">
|
|
<img src="demo/img/small/gm5.jpg" alt="image" />
|
|
</a>
|
|
</div>
|
|
</li>
|
|
<li class="box">
|
|
<div class="inner">
|
|
<a href="demo/img/large/gm6.jpg" class="glightbox">
|
|
<img src="demo/img/small/gm6.jpg" alt="image" />
|
|
</a>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Images with description example -->
|
|
<section class="section pair">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<h3>
|
|
<i class="fa fa-address-card heading-icon" aria-hidden="true"></i>
|
|
Images with Description
|
|
</h3>
|
|
<p>
|
|
You can add descriptions to your slides, the description position can be set globally for all slides or you can set a different position for each slide. options are: top, bottom, left or
|
|
right. You can adjust the style the way you want with basic CSS.
|
|
<strong>The description can display html code</strong>
|
|
.
|
|
</p>
|
|
|
|
<ul class="box-container three-cols">
|
|
<li class="box">
|
|
<div class="inner">
|
|
<a
|
|
href="demo/img/large/gm7.jpg"
|
|
class="glightbox2"
|
|
data-glightbox='title:Description Bottom; description: You can set the position of the description <a href="http://google.com">with a link to Google</a>'
|
|
>
|
|
<img src="demo/img/small/gm7.jpg" alt="image" />
|
|
</a>
|
|
</div>
|
|
</li>
|
|
<li class="box">
|
|
<div class="inner">
|
|
<a href="demo/img/large/gm8.jpg" class="glightbox2" data-glightbox="title: Description Right; description: .custom-desc1; descPosition: right;">
|
|
<img src="demo/img/small/gm8.jpg" alt="image" />
|
|
</a>
|
|
|
|
<div class="glightbox-desc custom-desc1">
|
|
<p>
|
|
You can set the position of the description in different ways for example
|
|
<strong style="text-decoration: underline">top, bottom, left or right</strong>
|
|
</p>
|
|
<p>
|
|
<a href="http://google.com" target="_blank" style="text-decoration: underline; font-weight: bold">Example Google link</a>
|
|
ipsum vehicula eros ultrices lacinia Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae Duis quis ipsum vehicula eros ultrices lacinia.
|
|
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
|
|
</p>
|
|
<p>
|
|
Primis pharetra facilisis lorem quis penatibus ad nulla inceptos, dui per tempor taciti aliquet consequat sodales, curae tristique gravida auctor interdum malesuada sagittis.
|
|
Felis pretium eros ligula natoque ad ante rutrum himenaeos, adipiscing urna mauris porta quam efficitur odio, sagittis morbi tellus nisi molestie mus faucibus.
|
|
</p>
|
|
<p>
|
|
Primis pharetra facilisis lorem quis penatibus ad nulla inceptos, dui per tempor taciti aliquet consequat sodales, curae tristique gravida auctor interdum malesuada sagittis.
|
|
Felis pretium eros ligula natoque ad ante rutrum himenaeos, adipiscing urna mauris porta quam efficitur odio, sagittis morbi tellus nisi molestie mus faucibus.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="box">
|
|
<div class="inner">
|
|
<a href="demo/img/large/gm9.jpg" class="glightbox2" data-glightbox="title: Description Left; description: .custom-desc2; descPosition: left;">
|
|
<img src="demo/img/small/gm9.jpg" alt="image" />
|
|
</a>
|
|
<div class="glightbox-desc custom-desc2">
|
|
<p>You can set the position of the description in different ways for example top, bottom, left or right</p>
|
|
<p>Duis quis ipsum vehicula eros ultrices lacinia. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae</p>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Videos example -->
|
|
<section class="section">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<h3>
|
|
<i class="fa fa-video-camera heading-icon" aria-hidden="true"></i>
|
|
Videos Gallery
|
|
</h3>
|
|
<p>
|
|
You can add videos with optional autoplay for
|
|
<strong>Vimeo</strong>
|
|
,
|
|
<strong>Youtube</strong>
|
|
and
|
|
<strong>self hosted videos</strong>
|
|
. You can specify a default width for the videos or set different widths to each video in your gallery. The videos are 100% responsive and will play correctly on mobile devices.
|
|
</p>
|
|
|
|
<ul class="box-container three-cols">
|
|
<li class="box">
|
|
<div class="inner">
|
|
<a href="https://vimeo.com/115041822" class="glightbox3">
|
|
<img src="demo/img/small/gm10.jpg" alt="image" />
|
|
</a>
|
|
</div>
|
|
</li>
|
|
<li class="box">
|
|
<div class="inner">
|
|
<a href="https://www.youtube-nocookie.com/embed/Ga6RYejo6Hk" class="glightbox3">
|
|
<img src="demo/img/small/gm11.jpg" alt="image" />
|
|
</a>
|
|
</div>
|
|
</li>
|
|
<li class="box">
|
|
<div class="inner">
|
|
<a href="./demo/pexels-video-1550080.mp4" class="glightbox3">
|
|
<img src="demo/img/small/gm12.jpg" alt="image" />
|
|
</a>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Iframes and inline example -->
|
|
<section class="section pair">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<h3>
|
|
<i class="fa fa-window-restore heading-icon" aria-hidden="true"></i>
|
|
Iframes and Inline Elements
|
|
</h3>
|
|
<p>You can easily add iframes by simply entering the url, it could be a web page, a video, google maps, etc. also you can display any div of your page by entering the ID in the href attribute.</p>
|
|
|
|
<ul class="box-container three-cols">
|
|
<li class="box">
|
|
<div class="inner">
|
|
<a href="#inline-example" class="glightbox4" data-glightbox="width: 700; height: auto;">
|
|
<img src="demo/img/small/gm14.jpg" alt="image" />
|
|
</a>
|
|
</div>
|
|
</li>
|
|
<li class="box">
|
|
<div class="inner">
|
|
<a
|
|
href="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12085.977306439116!2d-73.96648875371474!3d40.77314541916876!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c258bf08488f6b%3A0x618706a9142daa0d!2sUpper+East+Side%2C+Nueva+York%2C+EE.+UU.!5e0!3m2!1ses-419!2smx!4v1511830027642"
|
|
class="glightbox4"
|
|
>
|
|
<img src="demo/img/small/gm15.jpg" alt="image" />
|
|
</a>
|
|
</div>
|
|
</li>
|
|
<li class="box">
|
|
<div class="inner">
|
|
<a href="./demo/pexels-video-1550080.mp4" class="glightbox4">
|
|
<img src="demo/img/small/gm16.jpg" alt="image" />
|
|
</a>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="specifications" class="container section">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="especifications">
|
|
<h3 class="text-center">Technical specifications</h3>
|
|
<p>GLightbox is built using es6 and transpiled with babel for older browsers and can be used with nodejs.</p>
|
|
|
|
<h4>Animations</h4>
|
|
<p>All the animations are created with CSS and only the transform and opacity properties are animated. You can overwrite the CSS of the animations or create your own.</p>
|
|
|
|
<h4>Features</h4>
|
|
<ul>
|
|
<li>Small - only 11KB Gzipped</li>
|
|
<li>Responsive - works with any screen size</li>
|
|
<li>Gallery Support - Create multiple galleries</li>
|
|
<li>Video Support - Youtube, Vimeo and self hosted videos with autoplay</li>
|
|
<li>Inline content support - display any inline content</li>
|
|
<li>Iframe support - need to embed an iframe? no problem</li>
|
|
<li>Keyboard Navigation - esc, arrows keys, tab and enter is all you need</li>
|
|
<li>Touch Navigation - mobile touch events like swipe, move, pinch, etc.</li>
|
|
<li>Zoomable images - zoom and drag images on mobile and desktop</li>
|
|
<li>Retina ready - svg icons for controls.</li>
|
|
<li>Api - control the lightbox with the provided methods</li>
|
|
</ul>
|
|
|
|
<h4>Supported browsers and devices</h4>
|
|
<ul>
|
|
<li>
|
|
<i class="fa fa-safari"></i>
|
|
Safari
|
|
</li>
|
|
<li>
|
|
<i class="fa fa-chrome"></i>
|
|
Chrome
|
|
</li>
|
|
<li>
|
|
<i class="fa fa-opera"></i>
|
|
Opera
|
|
</li>
|
|
<li>
|
|
<i class="fa fa-firefox"></i>
|
|
Firefox
|
|
</li>
|
|
<li>
|
|
<i class="fa fa-edge"></i>
|
|
Edge
|
|
</li>
|
|
<li>
|
|
<i class="fa fa-internet-explorer"></i>
|
|
Internet Explorer 11
|
|
</li>
|
|
<li>
|
|
<i class="fa fa-apple"></i>
|
|
IOS (browser: safari, chrome, opera and firefox)
|
|
</li>
|
|
<li>
|
|
<i class="fa fa-android"></i>
|
|
Android (browser: chrome, opera and firefox)
|
|
</li>
|
|
<li>
|
|
<i class="fa fa-terminal"></i>
|
|
And any browser that supports flexbox and classList
|
|
</li>
|
|
</ul>
|
|
|
|
<h4>Documentation</h4>
|
|
<p>
|
|
The documentation can be found in the github page.
|
|
<a href="https://github.com/biati-digital/glightbox/blob/master/README.md" class="font-weight-bold" target="_blank">View Documentation</a>
|
|
</p>
|
|
|
|
<div id="license">
|
|
<h4>License</h4>
|
|
<p>
|
|
GLightbox is free to use for personal and commercial projects.
|
|
<a href="https://opensource.org/licenses/MIT" target="_blank">MIT license</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="text-center footer-btns">
|
|
<a class="mcbutton primary" href="https://github.com/biati-digital/glightbox/releases/tag/3.3.0">
|
|
<i class="fa fa-download"></i>
|
|
Download
|
|
</a>
|
|
<a class="mcbutton black" href="https://github.com/biati-digital/glightbox" target="_blank">
|
|
<i class="fa fa-github"></i>
|
|
View Source
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div id="inline-example" style="display: none">
|
|
<div class="inline-inner">
|
|
<h4 class="text-center">Example of inline content</h4>
|
|
<div class="text-center">
|
|
<p>
|
|
Duis quis ipsum vehicula eros ultrices lacinia. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec nec sollicitudin felis. Donec vel nulla vel leo varius
|
|
tempor. Duis suscipit pharetra quam id imperdiet. Praesent vitae eros metus. Donec placerat sagittis rhoncus. In condimentum eleifend ante et ornare. Curabitur pharetra nibh non purus gravida.
|
|
</p>
|
|
</div>
|
|
|
|
<a class="gtrigger-close inline-close-btn" href="#">Close Box</a>
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="text-center">
|
|
<div class="wrap copyright">
|
|
made with love by
|
|
<a href="https://www.biati.digital" target="_blank">biati digital</a>
|
|
| photos by
|
|
<a href="http://unsplash.com" target="_blank">unsplash.com</a>
|
|
| video by
|
|
<a href="https://www.pexels.com/video/a-rocky-coast-1550080/" target="_blank">pexels</a>
|
|
</div>
|
|
</footer>
|
|
<script src="https://cdn.jsdelivr.net/npm/animejs@3.1.0/lib/anime.min.js"></script>
|
|
<script src="demo/js/valde.min.js"></script>
|
|
<script src="dist/js/glightbox.js"></script>
|
|
<script src="demo/js/site.js"></script>
|
|
<script>
|
|
var lightbox = GLightbox();
|
|
lightbox.on('open', (target) => {
|
|
console.log('lightbox opened');
|
|
});
|
|
var lightboxDescription = GLightbox({
|
|
selector: '.glightbox2'
|
|
});
|
|
var lightboxVideo = GLightbox({
|
|
selector: '.glightbox3'
|
|
});
|
|
lightboxVideo.on('slide_changed', ({ prev, current }) => {
|
|
console.log('Prev slide', prev);
|
|
console.log('Current slide', current);
|
|
|
|
const { slideIndex, slideNode, slideConfig, player } = current;
|
|
|
|
if (player) {
|
|
if (!player.ready) {
|
|
// If player is not ready
|
|
player.on('ready', (event) => {
|
|
// Do something when video is ready
|
|
});
|
|
}
|
|
|
|
player.on('play', (event) => {
|
|
console.log('Started play');
|
|
});
|
|
|
|
player.on('volumechange', (event) => {
|
|
console.log('Volume change');
|
|
});
|
|
|
|
player.on('ended', (event) => {
|
|
console.log('Video ended');
|
|
});
|
|
}
|
|
});
|
|
|
|
var lightboxInlineIframe = GLightbox({
|
|
selector: '.glightbox4'
|
|
});
|
|
|
|
/* var exampleApi = GLightbox({ selector: null });
|
|
exampleApi.insertSlide({
|
|
href: 'https://picsum.photos/1200/800',
|
|
});
|
|
exampleApi.insertSlide({
|
|
width: '500px',
|
|
content: '<p>Example</p>'
|
|
});
|
|
exampleApi.insertSlide({
|
|
href: 'https://www.youtube.com/watch?v=WzqrwPhXmew',
|
|
});
|
|
exampleApi.insertSlide({
|
|
width: '200vw',
|
|
content: document.getElementById('inline-example')
|
|
});
|
|
exampleApi.open(); */
|
|
</script>
|
|
</body>
|
|
</html>
|