內容簡介
Five Number Lightbox 是一款輕量級的圖片燈箱外掛，能在文章中點擊圖片時以覆蓋層的形式顯示，而不需重新載入新頁面。此外掛不依賴任何外部庫，並且自動處理現有的圖片標記，提供簡單的使用體驗。
【主要功能】
• 無需設定頁面，輕鬆使用
• 自動識別圖片連結
• 支援鍵盤導航與可及性功能
• 適用於行動裝置的滑動操作
• 不改寫 HTML 結構，保持原樣
外掛標籤
開發者團隊
原文外掛簡介
Click an image in a post and it opens in an overlay instead of loading the raw file in a new page.
The plugin is about 12KB in total and loads no libraries. No jQuery, no framework, no external requests, no tracking, no settings page to configure before it does anything. On a page with no eligible images, neither the CSS nor the JavaScript is loaded at all.
Step-by-step instructions, including how to move over from an older lightbox plugin: Five Number Lightbox – setup and usage
It works without editing your posts
Most lightbox plugins need your images marked up a particular way. This one handles what is already there:
Images inserted with no link at all, which is what the block editor produces by default. The full-size file is found automatically.
Images linked to their media file.
Images already carrying the classic rel="lightbox[group]" markup that several older lightbox plugins wrote into post content. These are left exactly as they are, so a site with years of old posts keeps the grouping it was published with.
Images in the same post form a set, so you can page through them with the arrow keys or the on-screen arrows.
It does not rewrite your HTML
Attributes are added to tags that already exist. Nothing is wrapped, moved or re-nested, so the page structure stays exactly as you wrote it. Images inside
Parsing is done with WordPress’s own HTML API rather than regular expressions, so quoting and unusual attribute values are handled correctly.
It tries not to get in the way
Images already displayed at full size are skipped. There is nothing to enlarge, so an overlay would just be an extra click.
Images smaller than 400px wide are skipped, since those are usually icons or logos.
If the full-size file is missing, the overlay closes and the browser follows the link normally rather than trapping the reader behind a dark screen.
Ctrl-click, Cmd-click and middle-click still open the image in a new tab.
Keyboard and accessibility
Esc closes, left and right arrows move between images.
Focus moves into the overlay when it opens, stays inside it while open, and returns to the image you clicked when it closes.
The dialog is exposed with role="dialog" and aria-modal, and the image counter is announced.
prefers-reduced-motion is respected.
Mobile
Swipe left and right to move between images. Vertical drags are ignored so scrolling does not page the set. Your place on the page is kept when the overlay closes. Neighbouring images are not preloaded when the browser reports that the reader has asked to save data.
