jQuery plugin and Zenphoto theme: Silhouette
March 5th, 2010
I’ve been able to work out a number of bugs and quirks with the new gallery code, and I have both the jQuery plugin and Zenphoto theme code available for those who are interested. This is still a work-in-progress, so I make no guarantees that all will work perfectly, so please treat this as a “preview” release.
Edit: Updated to version 0.5, new files below.
Silhouette is a jQuery plugin that takes a list of images and turns it into a horizontal scrolling gallery. I’ve built a Zenphoto theme that uses it. My previous gallery theme was a combination of Galleria with jCarousel used as a controller. This new theme is written from scratch, and I’ve tried to take features and functionality I liked best, and merge both the image view and scroll control into a single interface.
To see them in action, pop on over to any album in my gallery, such as this one. Please note that I have yet to go through my gallery (2000+ images!) and update the horizontal images to the correct size, so they will currently not look quite as clear due to scaling.
First, about the jQuery plugin on its own. Features:
- Adaptive loading: Full images are loaded dynamically in order to reduce bandwidth use, but are preloaded (if near enough to the current image) so the user isn’t waiting for loads. Thumbnails images are scaled up to the full size while waiting for full images to load.
- Navigation: Clicking on current image advanced to next image, or images to the left or right can be click to move to that image. Arrow keys can be used as well.
- Able to direct-link to images — using #num on URL will make it slide to that image number
- Degrades well, with no Javascript the HTML is a list of thumbs linked to full images
- Tested, at least somewhat, with FireFox 3.6, Chrome 5.0, Safari 4.0, Opera 10.5, IE 6 and 8.
Code to include and call the plugin:
<script type="text/javascript" src="jquery.silhouette.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$("#container").silhouette( {img_padding_right: 10 });
});
//]]>
</script>
The plugin drives off an unnumbered list, filled with thumbnail images linked to full images.
<div id="container">
<ul>
<li><a href="full_image-01.jpg" title="image 1">
<img src="thumb_image-01.jpg" alt=""/></a></li>
<li><a href="full_image-02.jpg" title="image 2">
<img src="thumb_image-02.jpg" alt=""/></a></li>
<li><a href="full_image-03.jpg" title="image 3">
<img src="thumb_image-02.jpg" alt=""/></a></li>
</ul>
</div>
Simple!
There are a number of options that can be passed in:
- current (default: 0) – The default image to be displayed. Passed-in value will be overridden with #num in URL. First image is 0.
- range (default: 4) – Number of images ahead and behind the current to pre-load the full image.
- container_height (default: 600) – The height of the gallery. The full-size images should be this tall.
- container_edge (default: 25) – Extra pixels to add to left side of container. (Temporary?) work-around since some browsers add horizontal scroll.
- scroll_speed (default: 400) – Number of milliseconds for scroll animation.
- scroll_easing (default: ‘swing’) – Easing for scroll animation.
- fade_speed (default: 400) – Number of milliseconds for fade animation.
- img_padding_right (default: 0) – Pixels to pad on right side of images.
- img_opacity (default: 0.25) – Opacity for faded-out images.
Download jQuery plugin: jquery.silhouette-0.4.js
Download jQuery plugin: jquery.silhouette-0.5.js
(fixes images not scrolling correctly to middle)
If you are using the awesome Zenphoto gallery, I’ve put together a theme that matches my own gallery using the Silhouette plugin.
The theme will require some customization, since I don’t have settings set up for it yet. It will work best if your full images are sized so that their height matches your container/gallery height, and you don’t want to have cropped thumbnails.
Download theme: silhouette-theme-0.4
Download theme: silhouette-theme-0.5
(adds support for protected image URLs, menu and Goggle Analytics settings via theme options)
Posted in: Updates
16 Comments
Comments RSS
TrackBack Identifier URI
Leave a comment
