Lightbox 2.0 is the updated version of the Lightbox dialogue plugin in BlueConic. It provides the same modal overlay functionality as the original Lightbox plugin but uses plain JavaScript instead of the Fancybox (jQuery-based) library.
This update improves performance, reduces dependencies, and aligns with modern web standards while keeping the dialogue configuration experience the same.
Before you begin
Before using Lightbox 2.0, understand how it differs from the legacy Lightbox plugin:
Existing Lightbox dialogues continue to use the legacy plugin.
Existing dialogues are not automatically upgraded.
Custom CSS applied to existing dialogues continues to work as before.
Lightbox 2.0 uses different HTML class names, which affects new dialogues only.
What changed
The configuration experience remains the same, but the underlying implementation has changed:
Fancybox removed
The legacy plugin used Fancybox (jQuery-based). Lightbox 2.0 uses native JavaScript.New CSS class names
The rendered HTML uses different class names (for example,.bcModalinstead of.fancybox-skin).No jQuery dependency
Lightbox 2.0 does not load jQuery, improving page performance.Applies only to new dialogues
These changes affect dialogues created with Lightbox 2.0, not existing ones.
What stayed the same
Dialogue configuration tabs (Who, When, Where, What, Why)
Targeting and triggering behavior
Templates and rendering behavior
Custom CSS and CSS URL fields
Close button, overlay, and animation options
Creating a Lightbox 2.0 dialogue
Select the Lightbox plugin
Navigate to Dialogues in the main navigation bar.
Click Add dialogue.
Select Lightbox from the gallery.
The option labeled Lightbox is Lightbox 2.0.
The legacy plugin appears as Lightbox (legacy) if available.
Configure the dialogue
Configure the Who, When, Where, What, and Why tabs.
In the What tab, open the Properties panel to configure:
Width and height
CSS and styling
Animations
Close behavior
Test and activate
Save the dialogue.
Test it on your live site or in the simulator.
When to use Lightbox 2.0
Use Lightbox 2.0 when:
Creating new dialogues
Building new experiences that require modern performance and maintainability
Next steps
Review Updating CSS for Lightbox 2.0 dialogues if you plan to recreate existing dialogues or apply custom styling.
FAQ
Do I need to migrate existing Lightbox dialogues?
No. Existing dialogues continue to use the legacy plugin and work as before.
Why does my CSS not apply to a new Lightbox dialogue?
Lightbox 2.0 uses different class names. Update your CSS to target the new structure.
Can I upgrade an existing dialogue to Lightbox 2.0?
No. Recreate the dialogue using the Lightbox 2.0 plugin.
Should I still use the legacy Lightbox plugin?
Use Lightbox 2.0 for all new work. Keep legacy dialogues only if they already meet your needs.