Polaroid Slideshows with jQuery Cycle Plugin

The Cycle plugin for jQuery has many options that can be modified to create stunning slideshows. The look and feel of the slideshows are controlled with CSS and the behavior or animation of the slides is controlled by JavaScript. The Cycle plugin requires jQuery v1.3.2 or later.

Polaroid Photos

Sometimes you want to have a little fun with a project, like when somebody brings a Polaroid camera to a party. Taking Polaroid snapshots became wildly popular in the 1970s because it was the only camera that would produce a hand-held photo on the fly. All the other cameras had film that you would need to finish taking pictures on, and then send in to a photo developer to expose the negatives and print the photos. Polaroid cameras were like the iPhones of the 70s, and due to that popularity everybody knew what a Polaroid was — an instant photo.

Polaroid photos looked a little different from photo developer developed photos. They were always glossy and of a different format than the typical 3 1/2 inch tall x 4 7/8 inch wide snapshot that you’d get from the photo shop. With or without a border, the images on photo shop developed prints were rectangular, not square.

Polaroid cameras are still around today and their photos measure 3.5 inches wide by 4.25 inches tall. A white border around the image measures approximately 0.25 inch at the top, 0.1875 inch on the sides, and 0.875 inch at the bottom. The bottom border is larger so that you can write a caption there. Subtracting the size of the borders from the overall dimensions leaves 3.125 inches for the inner width and 3.125 inches for the inner height of the photographic image. Thus, Polaroid images are square instead of the standard rectangular format common in other photos.

Styling the Polaroid Photo

We can use CSS to make our images look like Polaroids. Introduce a dark, thin border and some padding for each image. In this case we’ll target the slides with the class .polaroid. Note that the container size may have to be enlarged to accommodate the padding and border from both sides of the image. This is especially important when all the images are not of the same dimensions.

CSS:

[plain]
#slide_polaroid {
margin:10px;
z-index:3;
}
#write_caption {
position:relative;
top:-40px;
left:100px;
z-index:4;
}
.polaroid img {
padding:18px 14px 33px 14px;
}
.polaroid {
width:200px;
height:200px;
background-color:#fcfcfc;
color:#000;
padding:18px 14px 63px 14px;
border:1px solid #000;
position:relative;
}
[/plain]

The jQuery Cycle plugin is used to control the slideshow action. A function is called after each slide is shown on the screen to print the image alt text for the slideshow image captions.

JavaScript:

[crayon]
$(‘#slide_polaroid’).cycle({
fx: ‘fadeZoom’,
timeout: 2000,
slideExpr: ‘img’,
after: function() {
$(‘#write_caption’).html(this.alt);
}
});
[/crayon]

Output:

We’re getting close with the above, but a little better slideshow effect would be to bring the whole polaroid through the effect, not just the inner square image.

This brings up one of the nice features of using jQuery Cycle for slideshows: any content can be used for the slides. That means a <div> containing an image and textual content — such as a caption — could be identified as slides.

Polaroid Slideshow

For this example each image and caption is wrapped in a <div>, and Cycle is called like so:

HTML:
[plain]

[/plain]

JavaScript:
[crayon]
$(‘#slide_polaroids’).cycle({
fx: ‘shuffle’,
timeout: 3000,
delay: -2000,
slideExpr: ‘div’
});
[/crayon]

Output:

This slideshow hard codes captions in the HTML instead of displaying the image alt text dynamically. It just depends on the purpose of the slideshow and how many slides you have as to which approach you’ll use for captions.

Styling Double Mat Framed Prints

Give your slides the look of double matted, framed photos with a little CSS and a different special fx.

Here, the .frame class is set to “ridge” for the <div> and <img> border properties using slightly different colors to make a double matted picture frame look. Black and grey backgrounds and a small amount of padding serves as the mat boards for the illusion. The JavaScript Cycle fx parameter is set to “fade” for the slideshow.