Yesterday I was inspired to create a short montage of ocean and beach related photos to accompany a SoundCloud recording I made while strolling the shore. The built in Wordpress gallery is fairly limited, but in May I discovered the cycle jquery plugin for a photo sharing post. While the on page script worked at the time, it has since run into issues so I've been looking for an alternative. I found a nifty interactive image browser called Fancybox a few weeks back, and this post describes how you can incorporate it's functionality into your own blog or site.
The Markup
The html markup is straight forward, and the important bits are href's to the zoomed in photo, and 150x150 or small photos for the gallery. The entire set is aggregated in a ul element or unordered list for css child properties that we'll look at in a moment.
Style and Script
At the top of the reference scripts is jquery, followed by the required mousewheel, and fancybox scripts which I entered into gists on github. The astute reader may notice that the jquery fancybox css is referenced in my media upload directory. It was just easier using Wordpress to upload the file than Hostmonster's file manager.
Text Control Plugin
I had one remaining issue of Wordpress putting < p> </p>, and <br /> tags in the post. The Text Control plugin makes the post editable by informing Wordpress not to enter any format or character encoding.
Sample Gallery
Here's what a gallery looks like. It's easy to customize the css on the images to adjust their size or layout.
Image gallery (click and scroll with mouse wheel or tap)
References