GLightbox.

Code name "Gie" A touchable Pure Javascript
lightbox with mobile and video support.

Simple Image Gallery

Images with Description

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. The description can display html code .

  • image

    You can set the position of the description in different ways for example top, bottom, left or right

    Example Google link 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

    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.

    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.

  • image

    You can set the position of the description in different ways for example top, bottom, left or right

    Duis quis ipsum vehicula eros ultrices lacinia. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae

Videos Gallery

You can add videos with optional autoplay for Vimeo , Youtube and self hosted videos . 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.

Iframes and Inline Elements

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.

Technical specifications

GLightbox is built using es6 and transpiled with babel for older browsers and can be used with nodejs.

Animations

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.

Features

  • Small - only 11KB Gzipped
  • Responsive - works with any screen size
  • Gallery Support - Create multiple galleries
  • Video Support - Youtube, Vimeo and self hosted videos with autoplay
  • Inline content support - display any inline content
  • Iframe support - need to embed an iframe? no problem
  • Keyboard Navigation - esc, arrows keys, tab and enter is all you need
  • Touch Navigation - mobile touch events like swipe, move, pinch, etc.
  • Zoomable images - zoom and drag images on mobile and desktop
  • Retina ready - svg icons for controls.
  • Api - control the lightbox with the provided methods

Supported browsers and devices

  • Safari
  • Chrome
  • Opera
  • Firefox
  • Edge
  • Internet Explorer 11
  • IOS (browser: safari, chrome, opera and firefox)
  • Android (browser: chrome, opera and firefox)
  • And any browser that supports flexbox and classList

Documentation

The documentation can be found in the github page. View Documentation

License

GLightbox is free to use for personal and commercial projects. MIT license