WordPress.org

Ready to get started?Download WordPress

Plugin Directory

blueimp lightbox

Official blueimp Gallery lightbox for WordPress.

How to enable the lightbox functionality for default WordPress galleries?

In the Gallery settings, set the "Link To" option to "Media File".

How to manually activate the lightbox functionality for a link?

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.

How can I enable the lightbox HTML5 fullscreen mode for a link?

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.

How can I display HTML5 videos in the lightbox?

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.

How can I display YouTube videos in the lightbox?

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>

How can I display Vimeo videos in the lightbox?

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>

Where can I find more documentation for this plugin?

Head over to the blueimp Gallery project page and check out the Gallery docs.

Requires: 3.6.1 or higher
Compatible up to: 3.9.0
Last Updated: 2014-5-2
Downloads: 6,654

Ratings

5 stars
5 out of 5 stars

Support

1 of 2 support threads in the last two months have been resolved.

Got something to say? Need help?

Compatibility

+
=
Not enough data

0 people say it works.
0 people say it's broken.

100,1,1
50,2,1
100,2,2