# Lightbox Plus Colorbox # Contributors: Programmattic LLC, dzappone Donate link: http://www.23systems.net/plugins/donate/ Tags: lightbox, colorbox, jquery, jquery colorbox, photo, photos, image, images, video, ajax, gallery, lightview, picture, overlay, slideshow, content, forms, youtube, vimeo, nextgen Requires at least: 4.0 Tested up to: 4.5.1 Stable tag: 2.8 License: GPLv2 and (components under MIT and BSD compatible licenses) License URI: http://www.gnu.org/licenses/gpl-2.0.html Lightbox Plus Colorbox creates beautiful overlays of larger images, simple slide shows, videos, and inline or external content. ## Description ## Lightbox Plus Colorbox uses Colorbox to create beautiful image overlays in a lightbox for WordPress. Lightbox Plus Colorbox displays larger versions of images to your users without having to leave the current page. Lightbox Plus Colorbox is also capable of adding a lightbox to WordPress gallery images, NextGEN image galleries, displaying simple slide shows, displaying YouTube videos, Vimeo and other videos, and showing inline content such as forms and external content all in gorgeous overlay. The use of the dark or light background, which dims the page over which the lightbox has been overlaid, also serves to highlight the image, video, or content being displayed. Lightbox Plus Colorbox captures the image, link, or caption title for display in the lightbox. Lightbox Plus Colorbox make use of the following tools: [Colorbox](http://www.jacklmoore.com/colorbox) was created by Jack Moore and is licensed under the [MIT License](http://www.opensource.org/licenses/mit-license.php). Lightbox Plus Colorbox uses WordPress' built in jQuery library and also uses the [PHP Simple HTML DOM Parser](http://simplehtmldom.sourceforge.net/) helper class to navigate page content for inserting the Lightbox attributes into elements. **ATTENTION: Please update to version 2.8 as soon as possible to address Cross-Site Request Forgery (CSRF)/Cross-Site Scripting (XSS) Vulnerabilities in Lightbox Plus Colorbox versions 2.7.2 and earlier.** ### Release Notes ### * Lightbox Plus Colorbox now requires PHP 5.3 or greater. * Lightbox Plus Colorbox is undergoing a complete rewrite to improve performance and bring it in line with the latest WordPress coding standard. * This will be released as with a new version matching the latest version of WordPress when released. * Version 2.8 should be the last release before the update and we will only provide security updates to this version. * See changelog for what's been updated. ### Troubleshooting ### Please read the [FAQ](http://www.23systems.net/plugins/lightbox-plus/frequently-asked-questions/) first if you are having problems. At present due to other commitments and that the plugin is provided freely we can offer no free support and it is provided as is. There are plans for a support option in the works. You can get community support for Lightbox Plus Colorbox via the [support forums](http://wordpress.org/support/plugin/lightbox-plus). **Please do not contact Jack Moore the author of Colorbox for issues with Lightbox Plus Colorbox as he has nothing to do with the WordPress plugin.** ### Requirements ### Server * WordPress 4.0 (May work with earlier versions but you probably upgrade to the latest version anyway) * PHP 5.3+ * PHP 5.5+ recommended * Works with PHP 7.0.x * jQuery (WordPress built in) Support for PHP 4 has been completely removed asof version 2.1 - DO NOT UPDATE if you want Lightbox Plus Colorbox to work with PHP 4. Client * Modern Browsers * Firefox, Chrome, Safari, Opera, IE 10+, etc. * Mobile Browsers * Firefox, Chrome, Safari, Opera, IE Mobile, etc. * Legacy Browsers * IE 8, IE 9 (limited style support) ### Usage ### Note that getting the caption to appear in the overlay image by using the caption options built into WordPress Lightbox Plus Colorbox uses the image title which is generated by "Edit Image Title" field and not the "Edit Caption Field." You can also manually add lightbox tags to your images using the following instructions. 1. Add a rel="lightbox[uniqueID|filename]" attribute to any link tag to activate the lightbox, include a name between square brackets in the rel attribute. For example: image #1 Optional: Use the title attribute if you want to show a caption. 2. If you have a set of related images that you would like to group, follow step one but additionally include a group name between square brackets in the rel attribute. For example: image #1 image #2 image #3 ## Installation ## ### Automatic ### 1. In the admin panel plugins page click Add New 2. Search for Lightbox Plus Colorbox 3. Find Lightbox Plus Colorbox in the list an click Install Now 4. Click OK when prompted 5. Click activate plugin when prompted 5. In the admin panel under Appearance click on Lightbox Plus Colorbox to configure to your taste. 6. Enjoy! ### Manual ### 1. Extract lightbox-plus.zip to your `wp-content/plugins` directory. 2. In the admin panel under plugins activate Lightbox Plus Colorbox. 3. In the admin panel under Appearance click on Lightbox Plus Colorbox to configure to your taste. 4. It should now be completely set up and functional 5. Enjoy! ### Caveats ### Flash (i.e. YouTube videos, etc.) will sit atop the Lightbox Plus Colorbox display no matter what the z-index is. This is an issue with Flash. See [Flash content displays on top of all DHTML layers](http://go.adobe.com/kb/ts_tn_15523_en-us) at Adobe for details. To work around this issue you will need to add something like the following to your`` and `` tags: ## Frequently Asked Questions ## ### Lightbox Plus Colorbox doesn't work ### Well, yes, it probably does. It's used by thousands of websites and if it doesn't work for you then it is likely because there is some problem with how it interacting with other JavaScript on your site. The most common cause for it not working is a jQuery conflict cause by a theme or a plugin that either does not properly instantiate jQuery or instantiates a very old version of jQuery. Here are things to try in order to see what the problem is. 1. Check jQuery version and make sure you are using the latest included in WordPress * If it's an older version or not enqueued correctly it will cause problems * It may be in your theme or another plugin 2. You may be lacking `wp_footer()` function in your `footer.php` of your WordPress theme. * Look at the default theme to see how it is implemented and add it into your theme. 3. Try deactivating all plugins one at a time besides lightbox plus and see if if it starts working * If it does work after deactivating on then there's a plugin conflict 4. If deactivating plugins doesn't work then there might be a conflict with your theme * To isolate you can try an different theme and see if it works 5. Try changing to a different lightbox style/theme and see if that makes a difference * There may be a style conflict of some sort 6. Try deleting the plugin and reinstalling - it may have not completely updated correctly. * You'll have to reset your settings so you might want to write them down. ### It works for some images and not others, why not? ### The problem may be with your WordPress theme, mangling image display properties. Try using another theme, that doesn't interfere with posted images. It also seems that some more recent version of WordPress (or perhaps the plugin is causing this in some way I am not aware of) do not automatically add the link to the full size image. You must also make sure that when you are adding an image from the WordPress media dialog control you must make sure there is a link to the image in the Link URL field. The easiest way to get the correct link is to click on the link to image button beneath the field. [Visual depiction](http://www.23systems.net/wp-content/uploads/2008/07/file.png) of what is required when adding images in order for lightbox to function correctly. ### Lightbox Plus Colorbox doesn't work properly in browser X, Y, or Z (Chrome, Safari, Firefox, Opera, Explorer 6, 7, etc.)? ### Yes it probably does, the problems may be the same as above or there may be a conflict with another plugin or a style conflict. It has been tested in Chrome, IE 7+, Firefox 2+, Chrome, Safari 3+, Opera 8+ since development began. ### Does Lightbox Plus Colorbox work with PHP 4? If not, why not? ### No it doesn't. PHP 4 reached end of life on August 8th 2008 (about 8 years ago.) WordPress no longer supports PHP 4 and all plugin developers are encourage to follow. The best solution at this time is to ask your host provider to upgrade to PHP 5. You will know that Lightbox Plus Colorbox is not working because of PHP if you receive the following error: **Plugin couldn't be activated because of fatal error** `Parse error: syntax error, unexpected T_OBJECT_OPERATOR in /path/to/plugin/classes/filters.class.php on line 81` ### Can I use this plugin and Lightview Plus, Lightbox 2 (either one), jQuery Colorbox, WP lightbox JS Plugin, Fancybox etc at the same time? ### Maybe, but probably not as they will most likely interfere with each other as they usually modify the image URLs. Other image overlay plugins may possibly be compatible. ### Can I add my own styles and images for the overlay? ### Yes, you can easily create additional styles by checking the use custom styles checkbox. It will copy the existing styles to `wp-content/lbp-css` and you can modify any of the existing styles. You can all adding a new folder to that directory and using the existing styles as examples create your completely custom styles. ### How does Lightbox Plus Colorbox differ from other Lightbox plugins for WordPress? ### Performance wise the Colorbox jQuery plugin is smaller and generally faster and has more options than most lightbox JavaScript plugins. The regular expressions that handle the text are more robust handling a wider variety of characters and in addition it will also grab the image title from the image to use for the overlay image caption. ### Does Lightbox Plus Colorbox work with WordPress' built in gallery ### Yes it does. There are few simple requirements however. You must set **Link thumbnails to: Image File** or use `[gallery link="file"` for the gallery options. You must check *Use For WP Gallery* box under **Other Lightbox Plus Colorbox Settings** ### When resetting/re-initializing LBP the setting do not appear correctly when the page reloads, what gives? ### This problem is only apparent in Chrome and Opera. It seems to works fine in Internet Explorer, Firefox and Safari. There are some browser related issues and I am investigating the problem at this time. For Chrome the settings are being saved but not displayed immediately, click on the Lightbox Plus Colorbox link under appearance and you will see the current settings. Opera for whatever reason is completely failing to save re-initialization settings, you must manually set and save them or use another browser. And, no, it doesn't make sense since it's server side activity. ### Additional FAQs from Colorbox ### For additional information please see [Colorbox FAQ](http://www.jacklmoore.com/colorbox/faq) for information about the jQuery plugin used by Lightbox Plus Colorbox. ### Other Problems ### At present due to other commitments and that the plugin is provided freely we can offer no support and it is provided as is. You can get community support for Lightbox Plus Colorbox via the [support forums](http://wordpress.org/support/plugin/lightbox-plus). **Please do not contact Jack Moore the author of Colorbox for issues with Lightbox Plus Colorbox unless the issue is directly related to the JavaScript.** ### Known Problems ### * Does not work correctly with W3 Total Cache if you are using automatic minify settings. You can manually set up minify to work correctly bypassing Lightbox Plus Colorbox (jquery-colorbox.min.js) * In some instances performance may be slow in older versions IE - this may be due to plugin conflicts or slow JavaScript performance in IE. * Lightboxed video does not seem to work in IE on locally installed sites, for example viewing in IE 7.0 while running XAMPP, this seems to be a Windows only issue. ### Plugin Conflicts ### * Jetpack Carousel - When carousel is activate it take precedence over Lightbox Plus Colorbox for image use as of LBP 2.x * Flickr Mini Gallery - Verified. Download [hot fix for Flickr Mini Gallery ](http://23systems.net/downloads/file/flickr-mini-gallery-jquery-hotfix.zip)(includes instructions) as of LBP 1.6.3 * Tabbed Widgets - Verified as of LBP 1.6.3 * DMSGuestbook - Un-verified as of LBP 1.6.3 * Gengo - Un-verified as of LBP 1.6.3 Note: Some of these conflicts were with very old versions of Lightbox Plus Colorbox and may be mitigated at this time ## Screenshots ## 1. Lightbox Plus Colorbox - Image 2. Lightbox Plus Colorbox - Video 3. Lightbox Plus Colorbox - External Content 4. Lightbox Plus Colorbox - Inline Content (Form) 5. Lightbox Plus Colorbox - Options Page 6. Lightbox Plus Colorbox - Style Examples ## Change Log ## ### 2.8 ### * Validated against WordPress 4.5.x * Should use WordPress 4.0+ at a minimum. 4.5+ recommended * PHP 5.3 or higher now required for plugin to function. * Should detect if older version os used and deactivate if that is the case * Updated DOM parser to use QueryPath instead of Simple HTML DOM Parser * Uses PHP built in DOMDocument * Simple HTML Dom Parser removed * Minified `lightbox.admin.css` to `lightbox.admin.min.css`. * Added minification for inline JavaScript * Added option to disable for mobile browsers * Added option to make lightbox behave responsively depending on viewport size. * This predicates on the idea the user will not be switching platforms (i.e. you won't see it work in some test environments if switching from full size to mobile testing or you will see strange behavior when switching back to higher resolutions) * Updated gallery lightbox code for newer versions of WordPress * Added method to pull CDN hosted scripts and cache them instead of local scripts along with fallback option to local if CDN is unavailable. * All possible non-WordPress code scripts that are hosted by CDNs are now used by default. * Fixed CSRF and XSS vulnerabilities as reported by [https://www.pluginvulnerabilities.com/2016/04/05/cross-site-request-forgery-csrfcross-site-scripting-xss-vulnerability-in-lightbox-plus-colorbox/]() * Updated Colorbox to version 1.6.3 which includes the following fixes: * Fixed regression that caused error in IE8 when the calculated initial size was negative. Fixes 741 * Fixed iframe attribute name (allowFullScreen to allowFullscreen). Fixes 737 * Replaced the inline onclick handler for cboxPhoto with a namespaced event for easier unbinding. Fixes 719. * Added two new properties that expose how `` and `