Webflow sync, pageviews & more.
NEW

Has anyone experienced a similar issue with the Webflow Lightbox element? When opening the lightbox on our Gallery page, an old image is displayed multiple times. We have tried changing the group name but the issue persists. Additionally, the positioning of the lightbox images is inaccurate. Any suggestions on how to fix this? Thank you!

TL;DR
  • Rebind Lightbox to correct CMS fields or recreate it to clear old data or broken bindings.
  • Ensure proper Lightbox group naming, check for outdated images, clear browser cache, and test without custom code or conflicting styles on a staging site.

Webflow Lightbox issues displaying old images or incorrect positioning are usually caused by incorrect bindings, CMS reference issues, or image caching. Here’s how to troubleshoot and resolve these problems step-by-step.

1. Check Lightbox CMS Binding or Static Images

  • Inspect the Lightbox element in the Webflow Designer and confirm where the images are sourced from—static images or a CMS Collection.
  • If using a CMS Collection, check that the correct Image Field is bound to the Lightbox and that each Lightbox item is properly linked.
  • If you previously updated image content, stale images may still be included due to lingering bindings or old images not being deleted.

2. Verify Lightbox Group Names

  • You mentioned already changing the group name, which is a good step. Make sure:
  • Each Lightbox element inside your CMS Collection List (or static list) shares the same group name if you want them to display as part of one modal group.
  • If they should open independently, each instance should have a unique group name.

3. Remove or Reset Old Lightbox Items

  • Sometimes old Lightbox items are duplicated due to symbol usage or manual duplication.
  • Delete the current Lightbox element, then add a new one from scratch to avoid inherited issues.
  • If your Gallery is built using a Collection List, try removing and re-binding it, ensuring no legacy bindings stay connected.
  • Go to Webflow CMS > Collection and make sure the images shown in the Lightbox still exist and aren’t outdated or broken.
  • Publish to a staging domain (webflow.io) to check if the issue persists outside of the Designer.
  • Clear browser cache or open the page in Incognito/Private Mode to confirm it’s not a cached image issue.

5. Inspect Custom Code or Third-Party Scripts

  • If you've added custom code (especially JavaScript affecting lightbox behavior or layout), temporarily remove or comment it out to test.
  • Avoid using any scripts that duplicate or reposition images unless absolutely necessary.

6. Fix Lightbox Layout Issues

  • Ensure the Lightbox media’s image frame has not been modified (e.g. stretched or moved).
  • Lightbox popup styling and behavior are controlled by Webflow and not directly editable, but:
  • Ensure no conflicting custom CSS is applied.
  • Check your project’s global styles and confirm there are no transform, translate, or z-index conflicts.

Summary

To resolve your Lightbox repeating old images and display issues, rebind or recreate the Lightbox with correct CMS image references, double-check group names, and clear any caching. Also verify no custom code or styling is interfering with image layout. Always re-test on a fresh staging publish.

Rate this answer

Other Webflow Questions