=== WP jQuery Lightbox === Contributors: pandaboxwp Tags: lightbox, photo, image, gallery Requires at least: 5.0 Tested up to: 6.4.3 Stable tag: 1.5.3 Requires PHP: 7.0 License: GPLv2 or later Very simple and lightweight lightbox plugin for WordPress. Formerly the 'WP JQuery Lightbox'. == Description == A simple, lightweight WordPress lightbox plugin. [See demo here](https://pandaboxwp.com). **Features** * Automattically detect images so they open in a lightbox with no need to adjust markup. * Works seamlessly with WordPress core images and galleries, and galleries from many plugins. * Play or puase slideshow within lightbox. * Enhanced mobile support with swipe gestures on touch devices, improved scaling to maximizes use of screen space, and live adjustment to the browser window and orientation of your phone. * Browse images with your keyboard: Arrows, P(revious)/N(ext) and X/C/ESC for close. * Admin panel to configure options. sv * Localization support. * Lightweight and fast. See the plugin in action here: [pandaboxwp.com](https://pandaboxwp.com) **Background and Thanks** Special thanks to [Ulf Benjaminsson](http://www.ulfbenjaminsson.com), who created this plugin and maintained it for many years. This plugin lets you keep [Lightbox 2](http://www.huddletogether.com/projects/lightbox2/) functionality but sheds the bulk of the Prototype Framework and Scriptaculous Effects Library. Warren Krewenki [ported Lightbox to jQuery](http://warren.mesozen.com/jquery-lightbox/) and this plugin is mostly a wrapper to his work. == Screenshots == 1. Default frontend appearance. == Installation == 1. Upload the `wp-jquery-lightbox`-folder to the `/wp-content/plugins/` directory 1. Activate the plugin through the 'Plugins' menu in WordPress 1. Check out the jQuery Lightbox-panel in your admin interface for usage details and configuration. = How to Use: = 1. With [WordPress built-in gallery](http://codex.wordpress.org/Gallery_Shortcode): [`[gallery link="file"]`](http://codex.wordpress.org/Gallery_Shortcode) 1. 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"]` 1. You can manually add a `rel="lightbox"` attribute to any link: `image #1` Note the use of title-attribute to set a caption 1. To manually group sets of related images, follow step 3 but additionally include a group name in the `rel` attribute: `image #1` `image #2` `image #3` 1. You can use the `data-download` attribute to set a custom download link: ` [...] ` 1. To *disable* lightboxing of an image link, just set any other rel-attribute: `rel="nobox"` 1. Keyboard support: Arrows, P(revious)/N(ext) and X/C/ESC for close. Swipe left / right on touch devices. 1. [Infinite-Scroll](http://wordpress.org/extend/plugins/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(); }` 1. 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"`. = Trouble shooting: = 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. 1. Make sure your site is not throwing any javascript errors. Use [your browsers javascript console](http://webmasters.stackexchange.com/questions/8525/how-to-open-the-javascript-console-in-different-browsers) to find out. If you're running a custom theme: 1. Make sure you have [`wp_head();`](http://codex.wordpress.org/Function_Reference/wp_head) just before the closing `` tag of your theme, or you will break many plugins, which generally use this hook to reference JavaScript files. 1. For the same reason, always have `wp_footer();` just before the closing `` tag of your theme. 1. Many JavaScript optimizers, combiners, minifiers, etc. conflict with [`wp_localize_script`](http://codex.wordpress.org/Function_Reference/wp_localize_script2), 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... * [More info about this issue](http://wordpress.org/support/topic/122-worked-13-does-not-work-for-me?replies=19) Lastly: 1. Disable all other plugins, one at a time. Try the lightbox between each. 1. Revert to the default theme. Did it help? Fix your theme. 1. 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. == Changelog == = 1.5.3 (2024-03-12) = * Improve mobile panzoom behavior * Remove nav for single images * Option to use alt as title = 1.5.2 (2024-03-12) = * Fix new nav arrow size = 1.5.1 (2024-03-12) = * Replace dashicons with svg for nav arrows = 1.5 (2024-03-07) = * Added new nav arrow style options * Added overlay color/opacity options * Added border color/width options * Added image shadow option * Added option to hide infobar * Improved styling = 1.4.9.3 (2024-02-08) = * Added pinch-to-zoom support for mobile * Improved mobile styling = 1.4.9.2 (2024-01-12) = * Update author and contributors * Update tested WordPress version * Update minimum PHP version to 7.0 = 1.4.9.1 (2023-11-05) = * Add webp support * Remove donation links = 1.4.9 (2023-11-03) = * Updated readme author and description * Fixed image centering on small screens * Removed white space from end of lines * Updated default settings for resize_on_demand and margin_size * Capitalized slideshow links = 1.4.8.4 (2023-10-24) = * Removed screenshots and banner image from repository = 1.4.8.3 (2021-01-26) = * Added setting to control whether jQuery is loaded in the header or footer. = 1.4.8.2 (2021-01-26) = * Migrated lightbox to modern jQuery (Thanks: [Joseph Rézeau aka papijo](https://www.rezeau.org/)!) * Improved support of Gutenberg editor's image captions (Thanks: [Joseph Rézeau aka papijo](https://www.rezeau.org/)!) * Tested up to WordPress 5.6 and PHP 7.4.12 = 1.4.8.1 (2019-03-24) = * Tested for WordPress 5.x and PHP 7.0 = 1.4.8 (2015-12-31) = * Fixed translations not being loaded properly * Fixed support for WordPress 4.4 = 1.4.7 (2015-09-21) = * Support for WordPress' new translation system. * Updated translation for Portugese (Thanks: Pedro Mendonça) * Added images and CSS for Portugese (Thanks: Pedro Mendonça) = 1.4.6 (2015-03-20) = * "Download link" now correctly open a download dialogue instead of displaying the file * Title, caption and all control elements can now be turned on / off individually * Added support for custom style sheets (just copy original to your theme's style folder, and hack away) * Restructured the HTML slightly, making styling easier * Added specific CSS selectors for all elements * Fixed animation speed setting being ignored * Dropped quirks support for Internet Explorer 8 * Removed help-text setting = 1.4.5 (2013-06-09) = * Fit to screen edge on low rez displays (<500px) * Added global setting to hide title & caption * Reduced the amount of code running for each image shown * Updated German translation (thanks [Niko23](http://wordpress.org/support/topic/translation-of-client-side-text?replies=5#post-4230050)) * Fix: swipe direction * Fix: slideshow now waits for images to display before starting timer. * Fix: support for latest jQuery * Fix: WordPress encoding wrong quote mark in captions, causing duplicate texts to display. = 1.4.1 (2013-02-03) = * Added swipe gestures on touch devices * Added slideshow * Added support for multiple sets in one post (use: [`group`](http://wordpress.org/extend/plugins/wp-jquery-lightbox/installation/) with the gallery-shortcode) * Added support for arbitrary Download links via the [`data-download`-attribute](http://wordpress.org/extend/plugins/wp-jquery-lightbox/installation/) * Added support to pick text from the image ALT-attribute (if title is not available) * Added translations: Norwegian Bokmål (thanks [Ole Martin Kristiansen](http://hvorerole.com/)!) * Fix regexp to deal with urls like www.gif.org. (Thanks Yannick Berker!) * Fix changed common IDs to avoid collisions. (you'll have to update your CSS now!) (Hat tip; Pollmann Frederic) * Fix better support of Infinite Scroll and similar * Fix toggling visible state on unrelated object, embed and select nodes. [mwolfe02](http://wordpress.org/support/topic/lightbox-shows-hidden-selectembedobject-blocks?replies=1) * Fix leaky CSS on admin page = 1.3.4.2 (2011-02-01) = * Fallbacks for people using older jQuery = 1.3.4.1 (2011-01-31) = * Updated deprecated jQuery calls (thanks; David Naber) = 1.3.4 (2011-12-29) = * Maybe fix for [mixed HTTP/HTTPS sites](http://wordpress.org/support/topic/mixed-http-and-https-installation-problems) * [Support for query params in image links](http://wordpress.org/support/topic/automatic-lightbox-functionarity-failes-to-work-with-image-links?replies=2#post-2302997) * [Fixed button messup in Firefox](http://wordpress.org/support/topic/plugin-wp-jquery-lightbox-broken-in-firefox?replies=9) * Fixed depth fight with the default twentyeleven theme header * [Fixed admin bar covering the lightbox](http://wordpress.org/support/topic/plugin-wp-jquery-lightbox-show-download-link-not-working?replies=4#post-2400784) * Added info on how to disable lightbox for specific links (bogus rel-attribute) * Added translations: [Romanian](http://wordpress.org/support/topic/wp-jquery-lightbox-romanian-translation?replies=1), [French](http://wordpress.org/support/topic/plugin-wp-jquery-lightbox-french-translation?replies=2#post-2187626) and [Hebrew](www.sagive.co.il) * Updated: Russian language icons (thanks; Ilya Gorenburg), [Japanese translation](http://wordpress.org/support/topic/plugin-wp-jquery-lightbox-japanese-translation-for-133?replies=1) = 1.3.3 (2011-06-12) = * Fixes [for Internet Explorer](http://wordpress.org/support/topic/plugin-wp-jquery-lightbox-jquery-version-and-ie-issues) (A million thanks to [David Grayston](http://www.grayston.net/2011/internet-explorer-v8-and-opacity-issues/#more-342)!). * Fix for [mixed HTTP/HTTPS installations](http://wordpress.org/support/topic/mixed-http-and-https-installation-problems). * Added setting to have margins to screen edge. * Added setting to put info & navigation on top. * Added setting for help text. * Added Japanese translation ([Thanks redcocker](http://wordpress.org/support/topic/plugin-wp-jquery-lightbox-japanese-translation)). = 1.3.2 (2011-05-16) = * Added support for auto-lightboxing comments too * Added Russian and Czech translations (incl. images). Thanks again Denis! * Added Polish translation ([thanks Fisiu](http://wordpress.org/support/topic/plugin-wp-jquery-lightbox-polish-localization?replies=1)) * Fixed fallbacks to avoid [breakage over JavaScript optimizers](http://wordpress.org/support/topic/122-worked-13-does-not-work-for-me?replies=19#post-2091734). * Known issues: [1.3.x is garbage on IE7 and IE8](http://wordpress.org/support/topic/plugin-wp-jquery-lightbox-jquery-version-and-ie-issues?replies=3). I've got no clue and no time - **help appreciated!** = 1.3.1 (2011-05-02) = * Forgot to include languages files! :) = 1.3 (2011-05-01) = * Improved scaling to make maximum use of display area. * Supports orientation / resize changes - Lightbox reflows with site. * Added translation support (Thanks; [Martin S](http://sukimashita.com/) & Denis N. Voituk). * Added option to display download link. * Added support for disabling all animations (set duration to 0). * Fixed "duration" not having an effect. * [For Developers: public method to apply Lightbox to any string.](http://wordpress.org/extend/plugins/wp-jquery-lightbox/installation/) = 1.2.2 (2011-04-14) = * Use WordPress bundled jQuery instead of forcing the Google CDN * Fixed the settings link on the Plugins page = 1.2.1 (2010-10-24) = * [Use only caption if title is identical](http://wordpress.org/support/topic/plugin-wp-jquery-lightbox-title-captions-bug-found-solved-and-fix-proposed?replies=8#post-1748874) * Removed a forgotten debug call = 1.2 (2010-10-12) = * Added support for Media Library titles and captions. * Minified the javascript (8.6KB vs 17.8KB) * Minified the CSS (2.0KB vs 2.7KB) = 1.1 (2010-10-09) = * Honors empty captions. * Fixed typos on admin page. * [thanks, josephknight!](http://tinyurl.com/3677p6r) = 1.0 (2010-04-11) = * Release. == Upgrade Notice == = 1.4.8 = Fixed support for WordPress 4.4, Fixed translations not being loaded properly = 1.4.7 = New Portugese translation. Support for WordPress' new translation system. = 1.4.6 = Lots of bug fixes and performance improvements. New CSS styles! = 1.4.5 (2013-06-09) = Support latest jQuery. Better use of small screen estate, fixed buggy features (slideshow, swipes) and reduced system load. = 1.4.1 = Swipe gestures, slideshow, sets and lots of fixes. Check your config screen after update! = 1.3.4.2 (2011-02-01) = * Fallbacks for people using older jQuery = 1.3.4.1 (2011-01-31) = Updated deprecated jQuery calls (thanks; David Naber) = 1.3.4 = Lots of fixes, translations and support for the Admin Bar and Twentyeleven theme. = 1.3.3 = Fixes for Internet Explorer. Added Japanese translation. = 1.3.2 = Support for auto-lightboxing comments. Added Polish, Russian and Czech languages. = 1.3.1 = Added missing files from previous release... Also: mobile support, larger display area. = 1.3 = Enables larger viewing area, improved mobile experience and translations. = 1.2.2 = Use WordPress bundled jQuery instead of forcing the Google CDN = 1.2.1 = Removed forgotten debug call. Important upgrade! = 1.2 = Support caption and titles from the Media Library = 1.1 = Honors empty captions and fixes some typos. = 1.0 = First release. == Frequently Asked Questions == = Trouble shooting: = 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. 1. Make sure your site is not throwing any javascript errors. Use [your browsers javascript console](http://webmasters.stackexchange.com/questions/8525/how-to-open-the-javascript-console-in-different-browsers) to find out. If you're running a custom theme: 1. Make sure you have [`wp_head();`](http://codex.wordpress.org/Function_Reference/wp_head) just before the closing `` tag of your theme, or you will break many plugins, which generally use this hook to reference JavaScript files. 1. For the same reason, always have `wp_footer();` just before the closing `` tag of your theme. 1. Many JavaScript optimizers, combiners, minifiers, etc. conflict with [`wp_localize_script`](http://codex.wordpress.org/Function_Reference/wp_localize_script2), 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... * [More info about this issue](http://wordpress.org/support/topic/122-worked-13-does-not-work-for-me?replies=19) Lastly: 1. Disable all other plugins, one at a time. Try the lightbox between each. 1. Revert to the default theme. Did it help? Fix your theme. 1. 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. = Can the lightbox display the image description instead of the title? = WP jQuery Lightbox grabs texts from three different HTML nodes; 1. `title`-attribute of link-to-image 1. `img` tag's `title` attribute (if 1 is empty) 1. `img` tag's `alt` attribute (if 1 and 2 is empty) 1. HTML content of `.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. = I can see elements of my site through the overlay = It's a problem of [z-index](http://www.w3schools.com/Css/pr_pos_z-index.asp). Check [the z-index property](http://www.w3schools.com/Css/pr_pos_z-index.asp) for the problematic elements, and force them to be less than 100. (Thanks [dway](http://wordpress.org/support/topic/plugin-wp-jquery-lightbox-title-captions-bug-found-solved-and-fix-proposed?replies=20#post-2052340)!) = How do I add images to a post? = [Inserting Images into Posts and Pages](http://codex.wordpress.org/Inserting_Images_into_Posts_and_Pages) = How do I create a thumbnail gallery? = Upload images to a post (see previous question) and use [WordPress' built-in gallery shortcode](http://codex.wordpress.org/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. = Must fade-in and animation of all *box-scripts be so slow? = 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. = For developers: = 1. Always have `wp_footer();` just before the closing `` tag of your theme, or you will break many plugins, which generally use this hook to reference JavaScript files. 1. Apply lightbox to any content by running `jqlb_apply_lightbox($your_content, "any ID");` It returns a string with all image links lightboxed, grouped by `"any id"`. 1. Many JavaScript optimizers, combiners, minifiers, etc. conflict with [`wp_localize_script`](http://codex.wordpress.org/Function_Reference/wp_localize_script2), 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... * [More info about this issue](http://wordpress.org/support/topic/122-worked-13-does-not-work-for-me?replies=19) = Can I help you in any way? = Indeed you can! Translations and help with implementing them would be nice. == Additional Info == Copyright (C) 2010-2023 Ulf Benjaminsson. Copyright (C) 2023-Present PandaboxWP 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