Press "Enter" to skip to content

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+York%2C+EE.+UU.!5e0!3m2!1ses-419" class="glightbox-demo">
  // Add Image Here
</a>

<a href="https://www.youtube.com/watch?v=Ga6Yo776Hk" 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=Ga6Yo776Hk',
        '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


See Demo And Download

Official Website(biati-digital): Click Here

This superior jQuery/javascript plugin is developed by biati-digital. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.