# 网格灯箱图片显示顺序错误

**URL:** https://meta.discourse.org/t/grid-lightbox-images-show-in-wrong-order/402817
**Category:** Bug
**Tags:** lightbox
**Created:** [2026年五月12日 21:12 UTC](https://meta.discourse.org/t/grid-lightbox-images-show-in-wrong-order/402817 "2026-05-12T21:12:55Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![Shauny](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/shauny/32/362012_2.png) [@Shauny](https://meta.discourse.org/u/Shauny)
#### Post date: [2026年五月12日 21:12 UTC](https://meta.discourse.org/t/grid-lightbox-images-show-in-wrong-order/402817/1 "2026-05-12T21:12:55Z")

</div>

当您使用网格并点击第一个项目，然后使用方向键在它们之间切换时，系统并非按照您上传的顺序进行切换，而是以不同的顺序进行。请在下方尝试：

 ![img-1](https://global.discourse-cdn.com/meta/original/4X/2/2/a/22ac988c37d38fc494651d36843a9a164b0ca5c9.webp)  
 ![img-2](https://global.discourse-cdn.com/meta/original/4X/0/4/6/046c3230dff29b1b1c785edc941d214ac1961f29.webp)  
 ![img-3](https://global.discourse-cdn.com/meta/original/4X/e/1/6/e16762bd8b802cc19de8c961a566ac1cd58a2f21.webp)  
 ![img-4](https://global.discourse-cdn.com/meta/original/4X/f/9/9/f99dcf254db70e103b346272cf60f26c4f0a2327.webp)

切换顺序为：1、3、2、4

---

<div class="post-metadata">

### Author: ![zogstrip](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/zogstrip/32/512781_2.png) [@zogstrip](https://meta.discourse.org/u/zogstrip)
#### Post date: [2026年五月13日 09:16 UTC](https://meta.discourse.org/t/grid-lightbox-images-show-in-wrong-order/402817/3 "2026-05-13T09:16:40Z")

</div>

感谢 @Shauny 的报告。这次调试和修复的过程很有趣 🤓

> <https://github.com/discourse/discourse/pull/39968>
>
> Inside a \`\[grid\]\` block, the lightbox arrow navigation followed column-balanced …DOM order instead of the original markdown order. For four images this resulted in 1, 3, 2, 4 because \`Columns\` distributes items by height into the shortest column.
> 
> \`lightbox.js\` collects items via \`querySelectorAll(".lightbox")\`, which returns nodes in document order — the same scrambled order the layout algorithm produced.
> 
> \`Columns\` now tags each item with \`data-lightbox-position\` carrying its original index before reordering. A new \`sortLightboxItems\` helper in \`lightbox.js\` reorders items within each grid by that attribute before they reach PhotoSwipe. The existing RTL reverse continues to apply on top, so right-to-left navigation now mirrors logical order rather than the scrambled layout.
> 
> https://meta.discourse.org/t/402817

cc @davidb

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [2026年五月14日 22:00 UTC](https://meta.discourse.org/t/grid-lightbox-images-show-in-wrong-order/402817/4 "2026-05-14T22:00:25Z")

</div>

此主题在 23 小时后自动关闭。不再允许新回复。