Random App Attack #1 – App Summary

SRC URL

https://producingtechnology.com/54-gallery/baomengting_136032_15142565_photo-gallery.html

App Behavior Summary

The app is a class photo gallery titled "The Class Record, Vol. I, No. 1", displaying portrait photos of students from Cornell Tech's Spring 2026 Producing Technology course. It fetches images from producingtechnology.com/photos and presents them in an interactive, magazine-style browser.

The app offers the following features:

• Three layout views: Contact Sheet (grid), Broadsheet (large single-column), and Film Strip (horizontal scroll row)
• Three sort modes: A–Z (alphabetical by name), File Size, and Random
• Click-to-enlarge: Clicking any photo opens a full-size lightbox overlay
• Keyboard navigation: Left/right arrow keys move between photos in the lightbox
• On-screen nav arrows: ‹ and › buttons for sequential browsing
• Close button (×): Exits the lightbox back to the gallery grid

Things That Didn't Work As Expected

• Close (×) button context: When the gallery is loaded inside an iframe (as in browser.html), the × button has no clear target — it is ambiguous whether it closes the lightbox or tries to close the whole iframe view. No visible feedback was given.
• Random sort is a one-shot shuffle: Clicking "Random" re-orders the photos once but does not continuously re-randomize. It felt more like a "shuffle once" than a persistent random mode.
• Keyboard focus not auto-captured: Arrow-key navigation only works if the gallery has browser focus. If the user clicked elsewhere on the page (e.g., the sort buttons), keyboard navigation stopped responding without any visual indication of why.
• Film Strip layout overflow: In Film Strip mode, there was no visible scrollbar or swipe hint, making it unclear to new users that the strip is horizontally scrollable.

Prompt to Improve the App

Update this photo gallery app with the following improvements:

1. Persistent Random mode: When "Random" is selected as the sort, re-shuffle the order each time the user returns to the gallery view (not just once on click).
2. Focus ring on lightbox: When the lightbox opens, automatically move browser focus to the overlay so that keyboard arrow navigation works immediately without an extra click.
3. Film Strip scroll hint: Add a subtle animated scroll-arrow indicator on both ends of the Film Strip view so users know it is horizontally scrollable. Hide the indicator once the user has scrolled.
4. Photo count label: In the lightbox, display "Photo X of N" so the user knows their position in the gallery at a glance.
5. Touch/swipe support: Add swipe-left and swipe-right gesture handling in the lightbox so mobile users can navigate without needing the on-screen arrows.