Photo Booth Strips With Lightbox

In this tutorial Mary Lou will show you how to create some cute looking photo strips and integrate Lightbox. The idea is to show some photo strips and make them navigable by scrolling with the mousewheel. When clicking on a picture it will show the larger version using jQuery Lightbox. She will also optimize it for touch devices.

Let’s first write the HTML for the four photo strips. Each photo strip will consist of a main container with the class pb-wrapper. The strip itself is an unordered list and Mary Lou will wrap it into the pb-scroll division. At the bottom of the photo strip she’ll add the title of the strip. Each photo strip wrapper will also have a position class like pb-wrapper-1, pb-wrapper-2, etc. She will then define custom positions, heights and rotations for each. The wrappers for the photo strips will have a fixed position. This will help you define a height relative to the screen size. She’ll add some nice box shadow and a textured repeated background image to make it look more like paper.