Stylish Any Lightbox Gallery Content in Pure JavaScript | GLightbox

GLightbox is a pure JavaScript lightbox. It can display images, iframes, embedded content, and videos with optional autoplay for YouTube, Vimeo, and even self-hosted videos.

Simplified rendering of Pure Javascript with mobile support. It can handle images and videos with autoplay, embedded content, and iframes.

Features:

• Small - only 11KB Gzipped
• Fast and responsive - works with any screen size
• Gallery support - create multiple galleries
• Video Support - Youtube, Vimeo, and self-hosted videos with autoplay
• Embedded Content Support - View any embedded content
• Iframe Support - Need to include an iframe? there is no problem
• Keyboard navigation - ESC, arrow keys, tab, and input is all you need
• Touch Navigation - touch events on mobile phone
• Zoom in and Zoom out - Zoom in and out on pictures on mobile and desktop
• API - Control Lightbox with Available Methods
• Customizable - create your own skin or tweak the animation with some slight CSS changes

How to make use of it:

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

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

Specify the content to be loaded within the gallery lightbox using ‘href’ attribute.

<a href="https://vimeo.com/115041822" class="glightbox-demo">
  // Add Image Here
</a>
<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="glightbox-demo">
  // Add Image Here
</a>
<a href="https://www.youtube.com/watch?v=Ga6RYejo6Hk" class="glightbox-demo">
 // Add Image Here
</a>

Create a Facebook like gallery lightbox and config the item utilizing the following attributes:

<a href="1.jpg" class="glightbox-demo" data-glightbox="title:Description Bottom; description: You can set the position of the desciption">
  // Add Image Here
  <div class="glightbox-desc">
    <p>Description here</p>
  </div>
</a>

Initialize the Glightbox library and executed it.

var myLightbox = GLightbox({
    'selector': 'glightbox-demo'
});

You may also outline the content within the JavaScript using the components option.

var myLightbox = GLightbox({ 
    elements: [
      {
        'href': '1.jpg',
        'type': 'image',
        'title': 'My Title',
        'description': 'Example',
      },
      {
        'href': 'https://www.youtube.com/watch?v=Ga6RYejo6Hk',
        'type': 'video',
        'source': 'youtube',
        'width': 900
      }
  ],
});

Here is a listing of all attainable options and callback features to customize the gallery lightbox.

var myLightbox = GLightbox({ 
    // default selector
    selector: 'glightbox',
    // define the elements in the JS
    elements: null,
    // skin class
    skin: 'clean',
    // shows close button
    closeButton: true,
    // initial slide index
    startAt: 0,
    // autoplay videos after open
    autoplayVideos: true,
    // bottom, top, left, right
    descPosition: 'bottom',
    // lightbox size
    width: 900,
    height: 506,
    // video size
    videosWidth: 900,
    // infinite loop
    loop: false,
    // enable zoomable
    zoomable: true,
    // enable touch navigation
    touchNavigation: true,
    // image follow axis when dragging on mobile.
    touchFollowAxis: true,
    // enable keyboard navigation
    keyboardNavigation: true,
    // close the lightbox on click outside
    closeOnOutsideClick: true,
    // video player options
    plyr: {
      css: 'https://cdn.plyr.io/3.5.6/plyr.css', // Default not required to include
      js: 'https://cdn.plyr.io/3.5.6/plyr.js', // Default not required to include
      config: {
        muted: false,
        hideControls: true,
        youtube: {
            noCookie: true,
            rel: 0,
            showinfo: 0,
            iv_load_policy: 3
        },
        vimeo: {
            byline: false,
            portrait: false,
            title: false,
            speed: true,
            transparent: false
        }
      }
    },
    // zoom, fade, none
    openEffect: 'zoomIn',
    // zoom, fade, none
    closeEffect: 'zoomOut', 
    // slide, fade, zoom, none
    slideEffect: 'slide', // fade, slide, zoom,
    // more text
    moreText: 'See more',
    // max characters
    moreLength: 60,
    // additional HTML
    lightboxHtml: '',
    // CSS effects
    cssEfects: {
      fade: { in: 'fadeIn', out: 'fadeOut' },
      zoom: { in: 'zoomIn', out: 'zoomOut' },
      slide: { in: 'slideInRight', out: 'slideOutLeft' },
      slide_back: { in: 'slideInLeft', out: 'slideOutRight' }
    }
  // enable draggable
  draggable: true,
  // number of pixels the user has to drag to go to prev or next slide
  dragToleranceX: 40,
  // used with draggable. Number of pixels the user has to drag up or down to close the lightbox (Set 0 to disable vertical drag)
  dragToleranceY: 65,
  // if true the slide will automatically change to prev/next or close if dragToleranceX or dragToleranceY is reached, otherwise it will wait till the mouse is released.
  dragAutoSnap: false,
  // enable image preload
  preload: true,
  // custom SVG icons
  svg: {},
    // callbacks
    beforeSlideChange: function(prevSlide, currentSlide) {},
    afterSlideChange: function(prevSlide, currentSlide) {},
    beforeSlideLoad: function(slideData) {},
    afterSlideLoad: function(slideData) {},
    slideInserted: function(slideData) {},
    slideRemoved: function(deletedIndex) {},
    onOpen: null,
    onClose: null,
});

API strategies.

// Goto slide 3
myLightbox.goToSlide(3);
​
// back to prev slide
myLightbox.prevSlide();
​
// goto next slide
myLightbox.nextSlide();
​
// get active slide
myLightbox.getActiveSlide();
myLightbox.getActiveSlideIndex();
// play video in the specified slide.
myLightbox.slidePlayerPlay(number);
// pause video in the specified slide.
myLightbox.slidePlayerPause(number);
​
// close the gallery lightbox
myLightbox.close();
// reload the gallery lightbox
myLightbox.reload();
// open the lightbox
myLightbox.open(node);
// open the lightbox at specific index
myLightbox.openAt(index);
// destroy the lightbox
myLightbox.destroy();
// append a slide at specified index
myLightbox.insertSlide(object, index);
// remove a slide
myLightbox.removeSlide(index);
// play video in the specified slide
myLightbox.playSlideVideo(index);
// stop video in the specified slide.
myLightbox.stopSlideVideo(index);
// get the player instance of the specified slide.
myLightbox.getSlidePlayerInstance(object, index);
// get all players
myLightbox.getAllPlayers();
// update the lightbox gallery elements.
myLightbox.setElements([]);

responsive lightbox image gallery, Image gallery HTML CSS, GLightbox Plugin/Github