123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476 |
- <!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>
|