Elegant Any Content Gallery Lightbox In Pure JavaScript – GLightbox

In CSS Tutorial Nov 29, 2017

GLightbox is Content Gallery Lightbox is build with Javascript and CSS3 animation. GLightbox is a straightforward but tough, mobile-friendly gallery lightbox plugin written in natural JavaScript and CSS/CSS3.

Content Gallery Lightbox Options:

  • Open/shut animations: zoomIn, fade and zoom.
  • Content material slide animations: fade, slide, zoom.
  • Reinforce any content material or even combined content material: photographs, HTML5 movies, Youtube/Vimeo movies, iframes, inline contents and a lot more.
  • A number of configuration choices, callback purposes, and API strategies.

The right way to use it:

Import the ‘glightbox.css’ and ‘glightbox.js’ into the record.

<hyperlink href="dist/css/glightbox.css" rel="stylesheet"> <script src="dist/js/glightbox.js"></script>

Specify the content material to be loaded within the gallery lightbox the usage of ‘href’ characteristic. Notice that the grouped media content material will have to have the similar magnificence.

<a href="https://vimeo.com/115041822" magnificence="glightbox-demo"> <img src="https://picsum.footage/400/300/?random" alt="symbol"> </a> <a href="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12085.977306439116!2nd-73.96648875371474!3d40.77314541916876!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c258bf08488f6bpercent3A0x618706a9142daa0d!2sUpper+East+Facetpercent2C+Nueva+Yorkpercent2C+EE.+UU.!5e0!3m2!1ses-419!2smx!4v1511830027642" magnificence="glightbox-demo"> <img src="https://picsum.footage/401/300/?random" alt="symbol"> </a> <a href="https://www.youtube.com/watch?v=Ga6RYejo6Hk" magnificence="glightbox-demo"> <img src="https://picsum.footage/402/300/?random" alt="symbol"> </a>

To create Fb like gallery lightbox with description packing containers:

<a href="1.jpg" magnificence="glightbox-demo" data-glightbox="identify:Description Backside; description: You'll be able to set the location of the desciption"> <img src="thumb.jpg" alt="symbol"> <div magnificence="glightbox-desc"> <p>Description right here</p> </div> </a>

Initialize the Glightbox library and performed.

var myLightbox = GLightbox();

Here’s a record of all imaginable choices and callback purposes to customise the gallery lightbox.

selector: 'glightbox', pores and skin: 'blank', closeButton: true, startAt: zero, autoplayVideos: true, descPosition: 'backside', width: 900, peak: 506, videosWidth: 900, videosHeight: 506, beforeSlideChange: null, afterSlideChange: null, beforeSlideLoad: null, afterSlideLoad: null, onOpen: null, onClose: null, loopAtEnd: false, jwplayer: , vimeo: , youtube: , openEffect: 'zoomIn', // fade, zoom closeEffect: 'zoomOut', // fade, zoom slideEffect: 'slide', // fade, slide, zoom, moreText: 'See extra', slideHtml: '', lightboxHtml: '', cssEfects:

API strategies.

// Goto slide three myLightbox.goToSlide(three); ​ // again to prev slide myLightbox.prevSlide(); ​ // goto subsequent slide myLightbox.nextSlide(); ​ // get energetic slide myLightbox.getActiveSlide(); ​ // shut the gallery lightbox myLightbox.shut();

The publish Sublime Any Content material Gallery Lightbox In Natural JavaScript – GLightbox gave the impression first on CSS Script.

Leave a Reply

Your email address will not be published. Required fields are marked *