Exhibition Artwork Lens

Quick Start

Copy assets/ beside your page, include assets/style.css, then copy the complete <section class="exhibition" data-exhibition-planner> from index.html.

Code snippet omitted: it ships with the download.

No build step or scroll plugin is required. Keep the Barlow / Barlow Condensed Google Fonts link from the example, self-host licensed copies, or replace the font variables. Demo body styling and the outer <main> landmark belong only to index.html; copy the section root into your existing page landmark.

Using It With Your Own Design

Keep the root and data-art-* / data-lens-* hooks. Edit the title, dates, venue, curatorial text and visit information directly in semantic HTML. The title's heading level can change without affecting styling.

The root variables group colours (--exhibition-ground, --exhibition-ink, --exhibition-ticket, --exhibition-ticket-ink), display/body fonts, content width, gutter, spacing, corners, lens size and image framing. Text uses opaque cream/cobalt or deep blue/cream. Check contrast after changing colours: normal text needs at least 4.5:1 and meaningful controls 3:1.

Replace the photograph

[data-art-photo] is an ordinary image inside a picture. The bundled gallery file is assets/img/soft-forms-gallery.webp (1536×1024), with a 768×512 responsive derivative. Edit src, both srcset paths, alt and intrinsic width / height. Change the root --exhibition-photo-ratio and --exhibition-photo-position percentage values to frame your subject. The mobile named container rule uses a 4:3 frame.

The lens creates one decorative duplicate automatically from the original image's currentSrc. It recalculates the actual cover crop and optical translation after image loading, source changes and resizing. No second image path, SVG editing or animation changes are needed. Use a high-resolution source for detailed magnification; the effect cannot invent detail absent from the photograph.

Artwork captions

Each li[data-art-object] contains its own heading and description. data-art-x and data-art-y locate that object's centre in the source photograph, as normalized coordinates between 0 and 1. For example, 0.22,0.49 identifies the left terracotta vessel in the supplied landscape photo.

Change captions to describe what is actually visible in your replacement photograph, then update those source coordinates. The closest item's caption appears beside the lens experience while all captions remain visible below. Add, remove or reorder complete items, then mount again. Counts are derived from markup; one item works, and zero items removes the spatial readout without disabling magnification. There is no fixed three-item dependency.

Visit formats are ordinary static articles. Edit or reorder them freely. The example links reach the local arrival-information block and do not make a reservation. Replace their href with your own booking/information destinations and remove data-visit-link to leave those destinations untouched. For multiple no-JS copies, use distinct arrival IDs and matching fallback hrefs; enhanced roots create unique IDs automatically.

Behaviour and Options

Root attribute	Default	Meaning
data-lens-zoom	2.5	Magnification, clamped to 1.25–4
data-lens-response	0.2	Tracking duration in seconds, clamped to 0.08–0.8
data-lens-x, data-lens-y	0.77, 0.59	Initial point as normalized display frame coordinates

The rendered --exhibition-lens-size controls desktop diameter; the named mobile rule uses a smaller aperture. A generous source frame leaves more room for moving the lens. Bounds keep the aperture and grab handle inside the photograph.

Code snippet omitted: it ships with the download.

mountAll(container) returns independent instances inside a document/container. Remounting an existing root first reverts it. Teardown never kills the host's GSAP work.

Accessibility and Integration

Move the desktop pointer over the photograph, or drag the native grab button. Touch drag belongs only to the generous handle, leaving ordinary page scrolling available elsewhere. Arrow keys on the handle move the actual lens; Home centres it. Native horizontal/vertical ranges also support standard keyboard controls. A concise drag cue, labelled horizontal/vertical controls and visible focus are provided.

The lens banks slightly with movement and settles elastically. Reduced motion gives direct positioning without tilt or spring, and live preference changes preserve the latest requested point. No autoplay or ongoing ticker runs at rest.

Without JavaScript or GSAP, the normal photograph, all captions and static visitor information remain available; enhancement-only controls and instructions are absent. The generated optical image is decorative and its controls have meaningful labels. Captions use their ordinary semantic source markup.

The section grows naturally and adapts to its own named container. There is no sticky/pinning, smooth-scroll dependency or global heading/button reset. Mobile places the caption and sliders directly beside the photographic response without clipping longer copy.

Dependencies and Credits

• GSAP core: demo pin 3.15.0; GSAP 3.12+ APIs. GSAP licence.
• Barlow and Barlow Condensed by Jeremy Tribby, SIL Open Font License. Google Fonts.
• Generated concept photography depicts fictional sculptures and a fictional exhibition. It is not real artist/venue documentation or a client result. Included local WebPs are ordinary replaceable demo media.

Internal direction, image masters/manifests and build-only thumbnail inputs are excluded from buyer delivery.