-
-
-
-
-
- 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-The content of this div will be used as the slide description
-You can add links and any HTML you want
-
-
-
-
-
-
-
-
-
- 
-
-```
-
-## Slide Options
-
-You can specify some options to each individual slide, the available options are:
-
-- title
-- alt
-- description
-- descPosition
-- type
-- effect
-- width
-- height
-- zoomable
-- draggable
-
-```html
-
-
-
-
-
-```
-
-## Lightbox Options
-
-Example use of the options.
-
-```javascript
-const lightbox = GLightbox({
- touchNavigation: true,
- loop: true,
- autoplayVideos: true
-});
-
-// Instead of using a selector, define the gallery elements
-const myGallery = GLightbox({
- elements: [
- {
- 'href': 'https://picsum.photos/1200/800',
- 'type': 'image',
- 'title': 'My Title',
- 'description': 'Example',
- },
- {
- 'href': 'https://picsum.photos/1200/800',
- 'type': 'image',
- 'alt': 'image text alternatives'
- },
- {
- 'href': 'https://www.youtube.com/watch?v=Ga6RYejo6Hk',
- 'type': 'video',
- 'source': 'youtube', //vimeo, youtube or local
- 'width': 900,
- },
- {
- 'content': 'This will append some html inside the slide
' // read more in the API section - }, - { - 'content': document.getElementById('inline-example') // this will append a node inside the slide - }, - ], - autoplayVideos: true, -}); -myGallery.open(); - -// If later you need to modify the elements you can use setElements -myGallery.setElements([...]); -``` - -| Option | Type | Default | Description | -| --- | --- | --- | --- | -| selector | string | `.glightbox` | Name of the selector for example '.glightbox' or 'data-glightbox' or '\*[data-glightbox]' | -| elements | array | `null` | Instead of passing a selector you can pass all the items that you want in the gallery. | -| skin | string | `clean` | Name of the skin, it will add a class to the lightbox so you can style it with css. | -| openEffect | string | `zoom` | Name of the effect on lightbox open. (zoom, fade, none) | -| closeEffect | string | `zoom` | Name of the effect on lightbox close. (zoom, fade, none) | -| slideEffect | string | `slide` | Name of the effect on slide change. (slide, fade, zoom, none) | -| moreText | string | `See more` | More text for descriptions on mobile devices. | -| moreLength | number | `60` | Number of characters to display on the description before adding the moreText link (only for mobiles), if 0 it will display the entire description. | -| closeButton | boolean | `true` | Show or hide the close button. | -| touchNavigation | boolean | `true` | Enable or disable the touch navigation (swipe). | -| touchFollowAxis | boolean | `true` | Image follow axis when dragging on mobile. | -| keyboardNavigation | boolean | `true` | Enable or disable the keyboard navigation. | -| closeOnOutsideClick | boolean | `true` | Close the lightbox when clicking outside the active slide. | -| startAt | number | `0` | Start lightbox at defined index. | -| width | number | `900px` | Default width for inline elements and iframes, you can define a specific size on each slide. You can use any unit for example 90% or 100vw for full width | -| height | number | `506px` | Default height for inline elements and iframes, you can define a specific size on each slide.You can use any unit for example 90% or 100vh **For inline elements you can set the height to auto**. | -| videosWidth | number | `960px` | Default width for videos. Videos are responsive so height is not required. The width can be in px % or even vw for example, 500px, 90% or 100vw for full width videos | -| descPosition | string | `bottom` | Global position for slides description, you can define a specific position on each slide (bottom, top, left, right). | -| loop | boolean | `false` | Loop slides on end. | -| zoomable | boolean | `true` | Enable or disable zoomable images you can also use data-zoomable="false" on individual nodes. | -| draggable | boolean | `true` | Enable or disable mouse drag to go prev and next slide (only images and inline content), you can also use data-draggable="false" on individual nodes. | -| dragToleranceX | number | `40` | Used with draggable. Number of pixels the user has to drag to go to prev or next slide. | -| dragToleranceY | number | `65` | Used with draggable. Number of pixels the user has to drag up or down to close the lightbox (Set 0 to disable vertical drag). | -| dragAutoSnap | boolean | `false` | 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. | -| preload | boolean | `true` | Enable or disable preloading. | -| svg | object | `{}` | Set your own svg icons. | -| cssEfects | object | 'See animations' | Define or adjust lightbox animations. See the Animations section in the README. | -| lightboxHTML | string | 'See themes' | You can completely change the html of GLightbox. See the Themeable section in the README. | -| slideHTML | string | 'See themes' | You can completely change the html of the individual slide. See the Themeable section in the README. | -| autoplayVideos | boolean | `true` | Autoplay videos on open. | -| autofocusVideos | boolean | `false` | If true video will be focused on play to allow keyboard sortcuts for the player, this will deactivate prev and next arrows to change slide so use it only if you know what you are doing. | -| plyr | object | `{}` | [View video player options.](#video-player) | - -## Events - -You can listen for events using your GLightbox instance (see example under the table). You can use the on() API method or once(). - -```javascript -const lightbox = GLightbox(); -lightbox.on('open', () => { - // Do something -}); - -lightbox.once('slide_changed', () => { - // Do something just one time -}); -``` - -| Event Type | Description | -| ------------------- | ---------------------------------------------------------------------------------------------------------------------------- | -| open | Provide a function when the lightbox is opened. | -| close | Provide a function when the lightbox is closed. | -| slide_before_change | Trigger a function before the slide is changed. | -| slide_changed | Trigger a function after the slide is changed. | -| slide_before_load | Trigger a function before a slide is loaded for the first time, the function will only be called once | -| slide_after_load | Trigger a function after a slide is loaded and it's content is set for the first time, the function will only be called once | -| slide_inserted | Trigger a function after a slide is inserted using insertSlide. | -| slide_removed | Trigger a function after a slide is removed` | - -```javascript -const lightbox = GLightbox(); -lightbox.on('slide_before_change', ({ prev, current }) => { - console.log('Prev slide', prev); - console.log('Current slide', current); - - // Prev and current are objects that contain the following data - const { slideIndex, slideNode, slideConfig, player, trigger } = current; - - // slideIndex - the slide index - // slideNode - the node you can modify - // slideConfig - will contain the configuration of the slide like title, description, etc. - // player - the slide player if it exists otherwise will return false - // trigger - this will contain the element that triggers this slide, this can be a link, a button, etc in your HTML, it can be null if the elements in the gallery were set dinamically -}); - -lightbox.on('slide_changed', ({ prev, current }) => { - console.log('Prev slide', prev); - console.log('Current slide', current); - - // Prev and current are objects that contain the following data - const { slideIndex, slideNode, slideConfig, player, trigger } = current; - - // slideIndex - the slide index - // slideNode - the node you can modify - // slideConfig - will contain the configuration of the slide like title, description, etc. - // player - the slide player if it exists otherwise will return false - // trigger - this will contain the element that triggers this slide, this can be a link, a button, etc in your HTML, it can be null if the elements in the gallery were set dinamically - - 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'); - }); - } -}); - -// Useful to modify the slide -// before it's content is added -lightbox.on('slide_before_load', (data) => { - // data is an object that contain the following - const { slideIndex, slideNode, slideConfig, player, trigger } = data; - - // slideIndex - the slide index - // slideNode - the node you can modify - // slideConfig - will contain the configuration of the slide like title, description, etc. - // player - the slide player if it exists otherwise will return false - // trigger - this will contain the element that triggers this slide, this can be a link, a button, etc in your HTML, it can be null if the elements in the gallery were set dinamically -}); - -// Useful to execute scripts that depends -// on the slide to be ready with all it's content -// and already has a height -// data will contain all the info about the slide -lightbox.on('slide_after_load', (data) => { - // data is an object that contain the following - const { slideIndex, slideNode, slideConfig, player, trigger } = data; - - // slideIndex - the slide index - // slideNode - the node you can modify - // slideConfig - will contain the configuration of the slide like title, description, etc. - // player - the slide player if it exists otherwise will return false - // trigger - this will contain the element that triggers this slide, this can be a link, a button, etc in your HTML, it can be null if the elements in the gallery were set dinamically -}); - -// Trigger a function when a slide is inserted -lightbox.on('slide_inserted', (data) => { - // data is an object that contain the following - const { slideIndex, slideNode, slideConfig, player, trigger } = data; - - // slideIndex - the slide index - // slideNode - the node you can modify - // slideConfig - will contain the configuration of the slide like title, description, etc. - // player - the slide player if it exists otherwise will return false - // trigger - null -}); - -// Trigger a function when a slide is removed -lightbox.on('slide_removed', (index) => { - // index is the position of the element in the gallery -}); -``` - -## Video player - -GLightbox includes "[Plyr](https://plyr.io/)" the best player out there, you can pass any Plyr option to the player, view all available options here [Plyr options](https://github.com/sampotts/plyr). GLightbox will only inject the player library if required and only when the lightbox is opened. - -**Internet Explorer 11. If you need support for this browser you need to set the js url to use the polyfilled version. This is not the default because IE11 is ancient and we need to let it die.** - -### Autoplay for mobile/tablet - -Please note, autoplay is blocked in some browsers, there’s nothing we can do to change that unfortunately, the browser will decide if your video can be autoplayed. Please do not post issues about this, instead inform yourself about this topic: - -- [https://webkit.org/blog/6784/new-video-policies-for-ios/](https://webkit.org/blog/6784/new-video-policies-for-ios/) -- [https://developers.google.com/web/updates/2017/09/autoplay-policy-changes](https://developers.google.com/web/updates/2017/09/autoplay-policy-changes) -- [https://hacks.mozilla.org/2019/02/firefox-66-to-block-automatically-playing-audible-video-and-audio/](https://hacks.mozilla.org/2019/02/firefox-66-to-block-automatically-playing-audible-video-and-audio/) - -they decide if a video can be autoplayed based in a few rules - -``` -plyr: { - js: 'https://cdn.plyr.io/3.6.2/plyr.polyfilled.js', - .... -``` - -```javascript -const lightbox = GLightbox({ - 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: { - ratio: '16:9', // or '4:3' - 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 - } - } - } -}); -``` - -## API - -There are methods, setters and getters on a GLightbox object. The easiest way to access the GLightbox object is to set the return value from your call to a variable. For example: - -```javascript -const lightbox = GLightbox({ ...options }); -``` - -## Methods - -Example method use: - -```javascript -lightbox.nextSlide(); // Go to next slide -lightbox.close(); // Close the lightbox -``` - -| Option | Parameters | Description | -| ---------------------- | ------------------ | -------------------------------------------------------------------------- | -| open | `node` | Open the lightbox, you can optionally pass a node. | -| openAt | `number` | Open at specific index. | -| close | `-` | Close the lightbox. | -| reload | `-` | Reload the lightbox, after inserting content with ajax. | -| destroy | `-` | Destroy and remove all attached events. | -| prevSlide | `-` | Go to the previous slide. | -| nextSlide | `-` | Go to the next slide. | -| goToSlide | `number` | Index of the slide. | -| insertSlide | `object, index` | Insert a slide at the specified index. | -| removeSlide | `index` | Remove slide at the specified index. | -| getActiveSlide | `-` | Get active slide. It will return the active node. | -| getActiveSlideIndex | `-` | Get active slide. It will return the active slide index. | -| slidePlayerPlay | `number` | Play video in the specified slide. | -| slidePlayerPause | `number` | Pause video in the specified slide. | -| getSlidePlayerInstance | `node, index` | Get the player instance of the specified slide. | -| getAllPlayers | `-` | Get all players instance. | -| setElements | `[]` | Update the lightbox gallery elements. | -| on | `string, function` | Set an event listener. See Events section | -| once | `string, function` | Set an event listener that will be triggered only once. See Events section | - -```javascript -// Example set custom gallery items -// This overwrites all the items in the gallery -lightbox.setElements([ - { - 'href': 'https://picsum.photos/1200/800', - 'type': 'image' // Type is only required if GLightbox fails to know what kind of content should display - }, - { - 'href': 'https://www.youtube.com/watch?v=Ga6RYejo6Hk', - 'type': 'video', // Type is only required if GLightbox fails to know what kind of content should display - 'width': '900px', - }, - { - 'content': 'some html to append in the slide
', - 'width': '900px', - } -]); - - -// Insert a single slide at the end of all the items, -lightbox.insertSlide({ - href: 'video url...', - width: '90vw' -}); - -// Insert a single slide at index 2 or pass 0 to add it at the start -lightbox.insertSlide({ - href: 'video url...', - width: '90vw' -}, 2); - -// You can insert a slide with a defined html -lightbox.insertSlide({ - content: 'some html to append in the slide
', - width: '90vw' -}, 2); - -// Or if you prefer you can pass a node -// and it will be inserted in the slide -lightbox.insertSlide({ - content: document.getElementById('inline-example'), - width: '90vw' -}, 2); - -// Remove the slide at index 2 -lightbox.removeSlide(2); - -// Open the lightbox -lightbox.open(); - -// You can also open the lightbox at a specific index -lightbox.openAt(2); - -// So imagine that you are making an ajax request that returns some html -// You can create an empty instance and append the content once is returned - -const ajaxExample = GLightbox({ selector: null }); // or you can set the selector empty selector: '' - -doAjaxCall({...}).then(response => { - ajaxExample.insertSlide({ - width: '500px', - content: response.html - }); - ajaxExample.open(); -}) - -// Or you could use the set elements method to empty all the slides if any - -doAjaxCall({...}).then(response => { - ajaxExample.setElements([ - { - content: response.html - } - ]); - ajaxExample.open(); -}) - -``` - -## Animations - -Animations are created with CSS, each effect has an in and out value and they are used to attach the correct classes to the node. - -For example if you are using - -```javascript -const glightbox = GLightbox({ - openEffect: 'zoom', - closeEffect: 'fade', - cssEfects: { - // This are some of the animations included, no need to overwrite - fade: { in: 'fadeIn', out: 'fadeOut' }, - zoom: { in: 'zoomIn', out: 'zoomOut' } - } -}); -``` - -The open effect will use cssEfects.zoom.in and will add the class gzoomIn, if you take a look at the CSS you'll see: - -```javascript -.gzoomIn { - animation: gzoomIn .5s ease; -} - -@keyframes gzoomIn { - from { - opacity: 0; - transform: scale3d(.3, .3, .3); - } - to { - opacity: 1; - } -} -``` - -### Adding a custom animation - -You can create any animation you want, you can find some inspiration in the Animate.css library, for example you can add the bounce animation like this: - -```javascript -const glightbox = GLightbox({ - openEffect: 'bounce', // Define that we want the bounce animation on open - cssEfects: { - // register our new animation - bounce: { in: 'bounceIn', out: 'bounceOut' } - } -}); -``` - -```css -/*A g will be appended to the animation name so bounceIn will become gbounceIn */ -.gbounceIn { - animation: bounceIn 1.3s ease; -} - -@keyframes bounceIn { - from, - 20%, - 40%, - 60%, - 80%, - to { - animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - } - - 0% { - opacity: 0; - transform: scale3d(0.3, 0.3, 0.3); - } - - 20% { - transform: scale3d(1.1, 1.1, 1.1); - } - - 40% { - transform: scale3d(0.9, 0.9, 0.9); - } - - 60% { - opacity: 1; - transform: scale3d(1.03, 1.03, 1.03); - } - - 80% { - transform: scale3d(0.97, 0.97, 0.97); - } - - to { - opacity: 1; - transform: scale3d(1, 1, 1); - } -} -``` - -## Themeable - -You can completely customize the structure of GLightbox and use CSS to change any part you want. - -```javascript -const customLightboxHTML = `
- Code name
- "Gie"
- A touchable Pure Javascript
-
- lightbox with mobile and video support.
-
- 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 - . -
- -
-
- 
-
-
- - 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. -
-
-
- 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
-- 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. -
- - -GLightbox is built using es6 and transpiled with babel for older browsers and can be used with nodejs.
- -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.
- -- The documentation can be found in the github page. - View Documentation -
- -- GLightbox is free to use for personal and commercial projects. - MIT license -
-
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
-