Lesson 4 of 6 · 4 min

Browsing and Downloading Media

Walk through the client-side experience of filtering, lightbox-viewing, and downloading individual files or the full package.

Browsing and Downloading Media

Video coming soon

4/6

Lesson Notes

01

Once a client opens the delivery link, the first thing they see after the hero header is the approval section, then the media gallery. The gallery defaults to the All tab, which groups files into labeled sections (Photos, Videos, Floor Plans, Virtual Tours, Documents, Brochures) with section headings and count labels. Clicking any tab in the filter strip — for example 'Photos (24)' — collapses all other types and shows only that type in a 2-to-5-column responsive grid, letting clients focus on what they need.

02

Clicking any thumbnail opens a full-screen lightbox overlaying a near-black background. For photos, the image fills as much of the viewport as possible while maintaining aspect ratio. For videos, an HTML5 video player starts automatically. For documents, a sandboxed iframe renders the PDF inline. For virtual tours, a fullscreen iframe renders the tour with the 'xr-spatial-tracking' permission enabled for WebXR support. Keyboard arrow keys navigate between items in the current filtered set, and the Escape key closes the lightbox. A counter at the bottom-right (e.g. '3 / 24') shows the current position.

03

Individual file downloads are available directly from the gallery grid — no lightbox required. Photos show two download links below the filename: 'Print Quality' (the full-resolution original) and 'Web Quality' (a web-optimized JPEG at a smaller file size, only shown when the file has a webReadyCdnUrl). Videos and floor plans show a single 'Download' link. Virtual tours and documents show 'Copy Link' and 'View' actions instead of a download link, since they live at external URLs. These per-file actions are only shown when downloads are not blocked by an unpaid invoice.

04

The Download button in the fixed top navigation bar opens a 'Select Content for Download' dialog before triggering the bulk ZIP package. The dialog lists each available content type as a labeled checkbox with the file count: Images — Print Quality, Images — Web Quality, Floor Plans, Videos, Documents, and Brochures. All types are checked by default. Uncheck any you do not need, then click 'Download Selected.' The system requests a download artifact, which is prepared asynchronously. While it prepares, the button reads 'Preparing download...' with a spinner. Once the ZIP is ready, the browser begins the download automatically — no popup blocker issues, since the redirect navigates window.location.href directly to the CDN-signed ZIP URL. Maximum preparation time before timeout is five minutes.

05

When an unpaid invoice is linked to the project and marked as blocking, the gallery remains visible for browsing but all download links disappear and a banner reads 'Payment is required for this listing before downloads are allowed.' An amber payment banner appears at the top of the page showing the amount due with a 'Pay Now' button that opens the payment page in a new tab. Once payment is completed, reloading the delivery page lifts the restriction. On the iOS app, the Deliverables tab's media grid allows viewing all media in the native lightbox regardless of invoice state; download actions are handled through the web delivery link, which the agent can open from the Property Assets card using the in-app WKWebView.

Key Takeaways

  • The gallery tab strip filters by type; All groups content with section headings and per-type counts.
  • Clicking any thumbnail opens a full-screen lightbox with keyboard navigation and a position counter.
  • Individual photo thumbnails show Print Quality and Web Quality download links; videos and floor plans show a single Download link.
  • The Download button opens a dialog to select content types before triggering an async ZIP package — up to five minutes to prepare.
Related documentation at docs.vremly.com