Categories
Tutorials

Carousel of Zodiac Heads

The new installation of monumental sculptures in front of Robertson Hall is the perfect opportunity to show off the Jetpack plugin's new Carousel feature, which extends the WordPress native gallery feature with a presentation overlay that dynamically expands to fill the entire browser window.

Below are photographs of Ai Weiwei’s “Circle of Animals/Zodiac Heads” that I recently. A second gallery of closeups and some basic instructions for adding galleries follow.

The easiest way to add a gallery is to drag multiple images at the same time over to the image upload dialog that pops up when you click the “Add media” button. You can select additional images, as well. Then you click “Create Gallery” on the left, then the “Create a new gallery” button at the bottom, edit your gallery, then click the “Insert gallery” button.

The Carousel feature is not mentioned in the Add Media dialog, but the feature is automatic if Carousel is turned on under the Jetpack options. There is also a configuration option to display embedded EXIF data.

Because the Fancybox plugin is also active on the published site, when you close the gallery overlay, you then have to close the Fancybox popup, which is a bit annoying. If you want to use Fancybox for individual images, but Carousel for galleries, you have to add a custom jQuery selector to the Fancybox settings. Go to Settings → Fancybox for WP and click on the “Galleries” tab. Select “Use a custom expression to apply FancyBox” and paste the following line of code into the textarea and save changes (make sure no line breaks get inserted into the pasted code):

jQuery(thumbnails).not("dt.gallery-icon > a").addClass("fancybox").attr("rel","fancybox").getTitle();

I use the "Title” field for the Carousel captions instead of the “Caption” field because I don't like the way the Caption field displays in the thumbnail grid.

We ask that you resize your images before uploading them to your WordPress site; otherwise, you will quickly fill up your sites’s storage quota. For example, a raw 8-megapixel image from the iPhone 4S is about 3 to 3.5 megabytes. The same image when resized to 1280 by 960 pixels and saved using Photoshop’s Save for Web dialog (50% quality JPEG) is around 200 kilobytes.