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.
4. Check for Broken or Cached Image Links
- 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.