Full Screen Galleries Pt. 1: The Base Gallery
The latest Wonderwall content template will be launching soon launched on Thursday as a way to showcase their amazing high resolution celebrity photos. It's a simple immersive experience, which presented some interesting technical challenges. In this three part series, I'm going to talk about my approach and some of the technical details that enable the design to shine.
Full Screen Galleries: Example Victoria's Secret Fashion Show
First up, an overview of the experience we're trying to build for the base, not-zoomed-in gallery.
Regular horizontal carousel composed of slides, with a single photo per slide
One slide in view, with a "peek" into the next slide (to the right)
Slides scale according to the browser size
Time to dust off your percentages. We want to percolate the browser size down to the gallery DOM elements. So width: 100%, height:100% on every element from the body down to your gallery.
The gallery DOM is simple, but each element in the nesting has an important job. There is also a diagram showing how the DOM fits together.
https://gist.github.com/4019663
galleryViewport: We want this element to mirror the browser window size and prepare for the horizontal carousel.
https://gist.github.com/4019684
gallerySlides: Make some space for a header and footer. Set a big width, proportional to the browser width to accommodate a realistic upper bound for the gallery size - I use @maxSlideCount:50, so width=5000%. The width is needed for IE to prevent the UL wrapping at 100%. We're going to be moving the UL for navigation, so let CSS3 animate the transition.
https://gist.github.com/4019705
gallerySlide: Float left, display inline block, vertical-align - a simple horizontal carousel. The width and margin-right have to be calculated relative to the parent UL.gallerySlides, whose 5000% width we now have to think of as 100%. LESS makes it easy to calculate based on the number of slides you want to accommodate. We have @maxSlideCount:50, so the parent width=5000%. The width of a single slide therefore will be a 50th the width of the parent, or 100%/@maxSlideCount=2%. We want a peek into the next slide that is 15% of the browser window. LESS to the rescue: (((100%/@maxSlideCount)/100) * 15).
https://gist.github.com/4019773
The result of this is a cross-browser horizontal carousel with slides that scale with the browser and a consistent peek into the next slide. The navigation buttons you saw in the DOM should be positioned relative to the viewport, but you could also have them per-slide.
Up Next in Part 2: Making the slide photos scale with the browser