Back to Community

Resolving Kadence Blocks Advanced Gallery Lightbox Conflicts and Issues

Content

Many users of the Gutenberg Blocks with AI by Kadence WP plugin rely on the Advanced Gallery block for its robust lightbox functionality. However, a common point of confusion and frustration arises when the lightbox doesn't behave as expected, often due to conflicts with other themes or plugins. This guide will help you diagnose and resolve the most frequent lightbox-related issues.

Common Lightbox Problems

Based on community reports, the most prevalent issues include:

  • Two overlapping lightboxes appearing when an image is clicked.
  • The lightbox failing to work entirely after switching to a new theme.
  • The lightbox veil not overlaying sticky header elements properly.
  • Images briefly appearing in a lightbox before opening in a new tab or window.

Why These Conflicts Happen

The core of the issue often lies in multiple scripts trying to control the same functionality. The Kadence Blocks plugin includes its own lightbox script to handle image popups. Many popular WordPress themes, such as OceanWP, Kadence, and others, also bundle their own lightbox scripts (e.g., Swipebox, Magnific Popup) to enhance their built-in features. When both the plugin and the theme try to initialize a lightbox on the same image, the result can be a broken user experience, with two lightboxes appearing or one canceling the other out.

How to Troubleshoot and Resolve Lightbox Conflicts

1. Identify the Source of the Conflict

The first step is to determine what is causing the conflict. Ask yourself:

  • Did the problem start after activating a new theme?
  • Did it begin after installing a new plugin?
  • Is the theme I'm using known to have its own lightbox functionality?

2. Disable the Conflicting Lightbox

Once you've identified the likely culprit, the solution is almost always to disable one of the lightboxes. A general best practice is to use the lightbox from your page builder plugin and disable the one provided by your theme to ensure consistency across all blocks.

  • If you are using a Kadence Theme: Navigate to Customize > General > Performance and toggle OFF the 'Enable Lightbox' setting.
  • If you are using another theme (e.g., OceanWP, Blocksy): You must search your theme's options for its lightbox setting. This is often found in the theme customizer under settings like 'Scripts & Styles', 'Performance', or 'Lightbox'. Consult your theme's documentation for the exact location. Disable the theme's lightbox feature.
  • If you have a dedicated lightbox plugin: You will need to choose between using the Kadence Blocks lightbox or the one from the standalone plugin. Deactivate one of them to resolve the conflict.

3. Configure the Kadence Blocks Gallery Correctly

Ensure your gallery block is set up properly to trigger its built-in lightbox:

  1. Edit your page with the Advanced Gallery block.
  2. In the block settings sidebar, go to the Link Settings panel.
  3. Set Link To to Media File.
  4. Set Link Triggers to Lightbox.

What If the Problem Persists?

If you've disabled other lightboxes and configured the block correctly but still experience issues, a plugin conflict might be the cause. To test this:

  1. Temporarily deactivate all your other plugins.
  2. Check if the lightbox works correctly.
  3. If it does, reactivate your plugins one by one, testing after each, to identify which one is causing the conflict.

Conclusion

Lightbox conflicts are a common hurdle when using powerful page-building tools alongside feature-rich themes. In most cases, the solution is straightforward: identify the duplicate functionality and disable it, typically within your theme's options. By following these steps, you should be able to enjoy the full, seamless lightbox experience offered by the Kadence Blocks Advanced Gallery.

Related Support Threads Support