The WPBakery image gallery element includes a lightbox feature that displays larger versions of images in an overlay popup when thumbnails are clicked. This provides a clean way for visitors to view images without leaving the page, and it supports navigation between gallery images. However, sometimes the lightbox does not work at all, and clicking an image opens it in the same browser tab or does nothing, leaving visitors frustrated and unable to view the images properly.
This problem can be particularly frustrating for photography portfolios, product galleries, or any website where image presentation is important. The gallery may work perfectly in the WPBakery editor but fail completely on the live frontend, or the lightbox may have worked previously and suddenly stopped working after a plugin update. Understanding why the WPBakery image gallery lightbox fails is essential for maintaining professional image displays.
The most common cause of this problem is that a caching or optimization plugin is delaying or removing the JavaScript library that controls the lightbox functionality. Another cause is that another plugin or the theme is loading its own lightbox script that conflicts with WPBakery’s. The lightbox may also be disabled in the gallery settings, or the image links may be configured to point to the attachment page instead of the image file.
Why WPBakery image gallery lightbox fails to work
WPBakery uses the prettyPhoto lightbox library by default, though some versions may use different libraries. The lightbox is initialized by JavaScript when the page loads, and it attaches click handlers to all gallery images. If the JavaScript file that contains the lightbox library does not load or executes after the gallery has already been rendered, the click handlers will not be attached, and images will open in the same tab or do nothing. This is a classic symptom of JavaScript defer or delay features in caching plugins.
Another common cause is that another plugin or the theme is loading a different lightbox library (like FancyBox or Magnific Popup) that conflicts with WPBakery’s lightbox. When two scripts try to control the same elements, neither may work correctly, or one may override the other. The browser console will typically show JavaScript errors that indicate a conflict, such as “prettyPhoto is not defined” or “$.prettyPhoto is not a function.” Deactivating conflicting plugins or excluding WPBakery scripts from optimization usually resolves these issues.
The gallery element settings also have an option to enable or disable the lightbox. If this option is set to “No” or “False,” clicking images will open them in the same tab or take the user to the attachment page. Checking the gallery settings in the WPBakery editor is an important diagnostic step. Additionally, if the image links are set to “Media File” instead of “Attachment Page,” the lightbox may not initialize correctly because the href attribute points directly to the image file without the necessary data attributes.
How to check if the lightbox library is loading on the frontend
Open the frontend of the website in a web browser and open the developer tools by pressing F12. Navigate to the Network tab and reload the page, then look for JavaScript files that contain “prettyPhoto,” “lightbox,” or “magnific” in their filenames. Check the status codes of these files; 404 errors indicate missing files, while 403 errors indicate blocked access. Also, check the Console tab for JavaScript errors that mention lightbox or prettyPhoto, as these errors will prevent the lightbox from working.
Step by step guide to fixing WPBakery gallery lightbox
Follow these steps in order to restore lightbox functionality in WPBakery image galleries. Start with the simplest solutions before moving to more advanced troubleshooting steps.
- Check that the lightbox option is enabled in the gallery element settings
- Ensure that image links are set to “Media File” (not “Attachment Page”)
- Disable JavaScript defer or delay features in all caching plugins temporarily
- Exclude WPBakery lightbox scripts from being deferred or delayed by caching plugins
- Clear all caches including plugin cache, CDN cache, and browser cache completely
- Temporarily deactivate all other plugins to test for lightbox conflicts
- Switch to a default WordPress theme to test if the theme causes the problem
- Check the browser console for JavaScript errors related to prettyPhoto or lightbox
- Update WPBakery to the latest version available from the official website
- Recreate the gallery element from scratch if the existing gallery is corrupted
How to exclude WPBakery lightbox scripts from JavaScript optimization
In WP Rocket, navigate to Settings → WP Rocket → File Optimization and find the “Excluded JavaScript Files” field. Add the following handles to exclude WPBakery lightbox scripts from being deferred: prettyPhoto, vc-js-composer, js_composer_front. In LiteSpeed Cache, go to Tuning settings and add the same handles to the JS Excludes list. After adding these exclusions, clear all caches and test the lightbox again. This ensures that the lightbox JavaScript loads early enough to initialize correctly.
WPBakery image gallery troubleshooting reference table
Here is a reference table for diagnosing lightbox problems in WPBakery image galleries based on specific symptoms you might encounter.
| Symptom | Most likely cause | Recommended solution | Image opens in same tab when clicked | Lightbox disabled in gallery settings | Enable lightbox in gallery element settings | Image opens attachment page instead of lightbox | Image link set to Attachment Page | Change image link to Media File | Lightbox flashes then closes immediately | JavaScript conflict with another plugin | Deactivate plugins to find the conflict | Lightbox works in editor but not on frontend | Caching or optimization plugin interference | Exclude lightbox scripts from defer/delay |
|---|
For more information about WPBakery image gallery settings, visit the WPBakery page on wpwizzy.com.
Preventing WPBakery gallery lightbox problems in the future
Exclude WPBakery lightbox scripts from JavaScript defer and delay features in all caching plugins as soon as the website is launched. Test the image gallery lightbox after every plugin update to catch problems early, and clear all caches immediately after making changes to gallery settings or after updating WPBakery. Use a staging website to test major changes before applying them to the live production site, and regularly check the browser console for JavaScript errors that might affect lightbox functionality.
Consider using a dedicated gallery plugin with more reliable lightbox features if WPBakery’s lightbox continues to cause problems. Document any custom exclusions added to caching plugins for WPBakery scripts for future reference, and keep WPBakery and all other plugins updated to their latest versions on a regular schedule. Test the gallery on multiple browsers and devices to ensure consistent lightbox behavior across all platforms.