Simple, lightweight lightbox plugin for WordPress. Formerly the WP JQuery Lightbox.
The LightPress Lightbox was formerly the WP JQuery Lightbox. Along with the name change, we’ll be doing signficant development on this plugin in 2024, including the addition of additional, modern lightboxes (both free and pro). We’ll still continue to include, support, and enhance the original lightbox!
This plugin adds a simple, lightweight lightbox for viewing images. See demos here.
Features
See the plugin in action here: lightpress.io
Background and Thanks
Special thanks to Ulf Benjaminsson, who created this plugin and maintained it for many years.
The original WP JQuery Lightbox included with this plugin lets you keep Lightbox 2 functionality but sheds the bulk of the Prototype Framework and Scriptaculous Effects Library. Warren Krewenki ported Lightbox to jQuery and this plugin is mostly a wrapper to his work.
Copyright (C) 2010-2023 Ulf Benjaminsson.
Copyright (C) 2023-Present LightPress LLC.
This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA
wp-jquery-lightbox
-folder to the /wp-content/plugins/
directory[gallery link="file"]
All galleries in a post make a single slideshow. To create separate slideshows, use group
:
[gallery link="file" ids="1,2,3" group="mon"] [gallery link="file" ids="4,5,6" group="tue"]
You can manually add a rel="lightbox"
attribute to any link:
<a href="image-1.jpg" rel="lightbox" title="my caption">image #1</a>
Note the use of title-attribute to set a caption
To manually group sets of related images, follow step 3 but additionally include a group name in the rel
attribute:
<a href="image-1.jpg" rel="lightbox[roadtrip]">image #1</a> <a href="image-2.jpg" rel="lightbox[roadtrip]">image #2</a> <a href="image-3.jpg" rel="lightbox[roadtrip]">image #3</a>
You can use the data-download
attribute to set a custom download link:
<a href="image-medium.jpg" rel="lightbox" data-download="image-superlarge.jpg"> [...] </a>
To disable lightboxing of an image link, just set any other rel-attribute: rel="nobox"
Keyboard support: Arrows, P(revious)/N(ext) and X/C/ESC for close. Swipe left / right on touch devices.
Infinite-Scroll and similar “endless pages”-plugins should call doLightbox();
whenever it loads new content. Check your plugin for a setting
named “callbacks” – code that is called after each new page is loaded. Add this line;
if(typeof doLightBox !== 'undefined' && typeof jQuery !== 'undefined'){ doLightBox(); }
On the server side you can apply lightbox to any content by running jqlb_apply_lightbox($your_html_content, "any ID");
It returns a string with all image links lightboxed, grouped by "any id"
.
If you have problems with WP jQuery Lightbox, please make sure you try these steps before asking for help. If you ask for help and I find any of these steps would fix the problem, I will just link you back here to do the work yourself.
If you’re running a custom theme:
Make sure you have wp_head();
just before the closing </head>
tag of your theme, or you will break many plugins, which generally use this hook to reference JavaScript files.
For the same reason, always have wp_footer();
just before the closing </body>
tag of your theme.
Many JavaScript optimizers, combiners, minifiers, etc. conflict with wp_localize_script
, used to configure this plugin and many others.
If you have problems with jQuery Lightbox; first disable all JavaScript-optimizing plugins. (Optimize Scripts, W3 Total Cache, WP Minify etc)
If you develop JavaScript optimizers for WordPress, please play nice with the default API…
Lastly:
Disable all other plugins, one at a time. Try the lightbox between each.
Revert to the default theme. Did it help? Fix your theme.
Search the forums for similar symptoms.
Still have problems? Post a link and describe what issue you’re having, and tell us what of these steps you’ve already tried.
If you have problems with WP jQuery Lightbox, please make sure you try these steps before asking for help. If you ask for help and I find any of these steps would fix the problem, I will just link you back here to do the work yourself.
If you’re running a custom theme:
Make sure you have wp_head();
just before the closing </head>
tag of your theme, or you will break many plugins, which generally use this hook to reference JavaScript files.
For the same reason, always have wp_footer();
just before the closing </body>
tag of your theme.
Many JavaScript optimizers, combiners, minifiers, etc. conflict with wp_localize_script
, used to configure this plugin and many others.
If you have problems with jQuery Lightbox; first disable all JavaScript-optimizing plugins. (Optimize Scripts, W3 Total Cache, WP Minify etc)
If you develop JavaScript optimizers for WordPress, please play nice with the default API…
Lastly:
Disable all other plugins, one at a time. Try the lightbox between each.
Revert to the default theme. Did it help? Fix your theme.
Search the forums for similar symptoms.
Still have problems? Post a link and describe what issue you’re having, and tell us what of these steps you’ve already tried.
WP jQuery Lightbox grabs texts from three different HTML nodes;
title
-attribute of link-to-imageimg
tag’s title
attribute (if 1 is empty)img
tag’s alt
attribute (if 1 and 2 is empty).gallery-caption
or .wp-caption-text
(in that order)Look at how the default TwentyTwelve theme uses these in its galleries and set up your theme so it outputs what you need in these places.
It’s a problem of z-index. Check the z-index property for the problematic elements, and force them to be less than 100. (Thanks dway!)
Inserting Images into Posts and Pages
Upload images to a post (see previous question) and use WordPress’ built-in gallery shortcode: [gallery link="file"]
Note the link="file"
– this is crucial! By default the gallery will link your humbnails to a page displaying your image. With link="file"
the thumbnails links
directly to the image files – allowing Lightbox to function.
WP-jQuery Lightbox lets you configure the animation duration and disable image resizing from the admin panel. Set duration to 0 to disable animations entirely.
wp_footer();
just before the closing </body>
tag of your theme, or you will break many plugins, which generally use this hook to reference JavaScript files. jqlb_apply_lightbox($your_content, "any ID");
It returns a string with all image links lightboxed, grouped by "any id"
.wp_localize_script
, used to configure this plugin and many others.Indeed you can!
Translations and help with implementing them would be nice.
group
with the gallery-shortcode)data-download
-attribute