Official blueimp Gallery lightbox for Wordpress.
blueimp Gallery is a touch-enabled, responsive and customizable image and video gallery, carousel and lightbox, optimized for both mobile and desktop web browsers.
It features swipe, mouse and keyboard navigation, transition effects, slideshow functionality, fullscreen support and on-demand content loading and can be extended to display additional content types.
This is the official WordPress plugin for the Gallery lightbox functionality.
By default it automatically adds lightbox functionality to image links ending with gif, jpg, jpeg and png extensions. The plugin provides an options page to disable the automatic feature and to restrict the list of media types. It is also possible to add lightbox functionality for a link manually.
blueimp-lightbox
folder to the /wp-content/plugins/
directory.In the Gallery settings, set the “Link To” option to “Media File”.
Simply add the attribute data-gallery
to the link tag and it will be opened in the lightbox:
<a href="banana.jpg" data-gallery>Banana</a>
If multiple links on the page have the data-gallery
attribute, the lightbox enables gallery navigation between the linked resources.
To enable the HTML5 fullscreen mode, add the #blueimp-gallery-fullscreen
value for the data-gallery
attribute:
<a href="banana.jpg" data-gallery="#blueimp-gallery-fullscreen">Banana</a>
Please note that this only has an effect in browsers which support the HTML5 fullscreen API.
Other browsers will simply display the lightbox without HTML5 fullscreen mode.
Add the data-gallery
attribute and a type
attribute with the video content type to the link:
<a href="cats.mp4" type="video/mp4" data-gallery>Cats</a> <a href="dogs.ogv" type="video/ogv" data-gallery>Dogs</a>
Please note that this is only supported in browsers which can play native HTML5 video and support the required video codec.
Add the data-gallery
attribute, set the type
attribute to text/html
and add a data-youtube
attribute with the YouTube video ID:
<a href="https://www.youtube.com/watch?v=zi4CIXpx7Bg" type="text/html" data-youtube="zi4CIXpx7Bg" data-gallery>LES TWINS - An Industry Ahead</a>
Add the data-gallery
attribute, set the type
attribute to text/html
and add a data-vimeo
attribute with the Vimeo video ID:
<a href="https://vimeo.com/73686146" type="text/html" data-vimeo="73686146" data-gallery>KN1GHT - Last Moon</a>
Head over to the blueimp Gallery project page and check out the Gallery docs.