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
  • Check all lightbox elements for duplicate or outdated image sources, especially in Media Settings and CMS bindings.
  • Inspect layout containers for positioning issues caused by custom CSS or conflicting structure, then clear browser cache and publish to staging to update changes.

If your Webflow Lightbox is showing an old image multiple times and positioning is off, the issue is likely due to leftover image references, incorrect linking, or caching artifacts.

  • Go through each lightbox link element on your Gallery page.
  • Make sure none of the lightbox components are re-using the same old image source, especially something inherited from a symbol or duplicated element.
  • Double-check that the thumbnail and full-resolution image assigned in the Media Settings are current and not pointing to the same file repeatedly.

2. Inspect Image Group Name Behavior

  • Changing the Lightbox Group Name only affects which images open together in the lightbox.
  • It doesn't control which images load or prevent duplication — you must verify that each lightbox item uses a unique image file, not instances of an old reference.

3. Clear CMS and Static Asset References

  • If your lightbox images are tied to a CMS Collection, ensure:

  • The image field is updated correctly in the CMS.

  • You’re connecting the correct field to the lightbox media source.

  • No static image is accidentally layered behind or within your Collection List item.

  • For static (non-CMS) galleries, ensure there are no nested lightbox components or hidden duplicates.

4. Fix Positional Issues

  • Positional problems often result from conflicting custom CSS, absolute positioning, or overlapping flex/grid structures.
  • Use Webflow's Navigator to check parent containers for any problematic positioning.
  • Set lightbox parent containers to relative if you're using absolute positioning in thumbnails.

5. Hard Refresh and Clear Cache

  • Browsers may cache old images, especially when replaced with files of the same name.
  • Try a hard refresh (Shift+Cmd+R on Mac or Ctrl+F5 on Windows).
  • Clear browser cache or test in Incognito Mode to confirm if the issue is cache-related.

6. Publish Updates to Staging and Check

  • After making updates, always click Publish to Staging Site and test there.
  • This ensures Webflow’s CDN clears any cached elements and reflects all recent changes.

Summary

To fix your Webflow Lightbox showing an old image multiple times and misalignment issues: ensure there are no duplicated references, verify image sources in CMS/static files, check for positioning conflicts in layout containers, and clear browser cache. Re-publish your site to update the CDN with your changes.

Rate this answer

Other Webflow Questions