Alex Wilson Photography

jQuery plugin and Zenphoto theme: Silhouette v0.4

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.

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)

New image gallery interface theme: Silhouette

After 2 years with my Galleria and jCarousel mash-up theme for my gallery, I decided it’s time for another face-lift.

While it’s still in development, and a little rough around the edges, I’ve enable the new theme for my gallery. I’m calling it “Silhouette”, and when it’s finished I should have it available both as a zenphoto theme and as a jQuery plugin.

Silhouette features a single large horizontal scrolling/carousel view of the gallery. You can navigate by clicking on images or with the arrow keys. Like my previous theme, I’m going for something that feels Flash-like, but is powered using just HTML/CSS/Javascript.

One neat feature of this theme is that it only loads the full versions of images a few spots before and after what you are looking it. It uses scaled-up thumbnails for the placeholder images. This saves on bandwidth and helps load times so it doesn’t try to load the full versions of the entire album right at page load.

There are still a few kinks to work out (the first image doesn’t always slide right to the middle), and I don’t yet have all the features in place that I originally had in mind (like being able to link to a specific image in the gallery), but I thought it far enough along I’d share it — if you have any comments on it in its current state, please let me know!

New pictures!

First, I’ve updated the galleries with well over 150 new images, with loads of new 2009 albums for stuff I’ve shot since January.

Art community sites

I was emailed an invite to Artician today. It looks like an alternative to DeviantArt, so I thought I’d give it a try. I got as far as registering, but I’m not sure I’m in love with it.

It still appears to be very much in beta: Uploads not working, import not working, page titles like “Browse -> AJAX TEST -> Browser Photography”, etc…. and that’s just stuff I ran into in a few short minutes.

My biggest beef, though, is that it’s dripping with ads. While I certainly understand the need for them to pay for hosting, bandwidth, and development, but the ads there are obnoxious. I don’t normally see ads, as I run Ad Block Plus, but when trying out a site like this, I’ll check to see how it looks for those poor souls not running APB. They do have a subscription option, but I think a much more appealing model (and site) is to have the paid subscriptions get extra portfolio space, and charge enough to keep the overall ads to a minimum.

And it’s not like DA isn’t covered in ads as well… but it’s too bad, as I’d love to see a good alternative to DA. I don’t see Artician having any anything above and beyond DA, and I doubt that with its bugs and ads it’ll be able to gain a fraction of the user base DA has.

Enough complaining for now… I’ve been slowly but surely catching up on a massive backlog over the past few months. I’ve got tons of new images to share, I’ll be starting on some gallery updates soon!

Imitation is the sincerest form of… something…

Apparently someone (other than me) has been using my site as a reference (i.e. their own) when trying to book shoots with models.

Just to be clear, it’s really only “me” if you you get a message from…
my email: alex@alexwilsonphoto.com
MM: http://www.modelmayhem.com/AlexWilson
Facebook: http://www.facebook.com/profile.php?id=122613949

Of course, trying to use someone’s site when the site name doesn’t match the name you’ve given is pretty stupid, but it seems the internet has never suffered a shortage of stupidity.

Combined Gallery and Blog RSS feeds

I’ve added an aggregate RSS feed that contains both the Gallery and the Blog feeds. You can visit/add the feed from this link, or you can grab it from the root of the website.

WordPress update

I’ve updated the underlying WordPress to v2.5. My next task is to change the theme around a bit so it matches the gallery a bit better. In the meantime, please bear with me — the site may jump from theme-to-theme as I switch stuff, and certain features may disappear or move around as I try different themes to see what works. I’ll try to get things straightened out over the next day or two.

Edit: It’s not a perfect match, but it’s way closer now. Things should hopefully be pretty stable now. I’m going to leave it like this for a bit while I decide if I want to tweak the gallery theme to match the blog theme, or the other way around.

In the studio: Shooting silhouettes

It goes without saying that I love silhouette images. You get the shape and form of the figure, but the dark shadows obscure details. Nudes can still be mysterious, and portraits are full of intrigue.

For the word purists, a true silhouette would be just the outline of the form, and no detail at all of anything inside the edge lines. The amount of detail varies, but most of my images would be more accurately labelled near-silhouettes or pseudo-silhouettes, but that’s just awkward, so let’s assume a more lax definition for the term silhouette. I’ll save my thoughts on taxonomy like “high-key shadow” images for another post.

I’ve had a few requests for details about how I shoot my silhouette images, so I thought I’d explain some of the setup, equipment, and techniques I use.

(more…)

How an image plays a song

In the PBS Ansel Adams documentary, there was one section that really struck me… remember that Ansel was an accomplished pianist…

John Szarkowski: I’ve tried to explain to myself why it is that there are so many distinguished photographers who are interested in music…. You can make certain parallels between the photographic gray scale and the musical scale, the diatonic chromatic scales, and chord structures. Certainly, it was important to Ansel’s way of thinking, or perhaps even way of feeling — he would talk about chords of tone, he insisted that the photograph be, seem to be, tonally complete, tonally fulfilled, resolved, and that it could have no holes in it. Of course, that’s fundamentally the classical idea of fundamental technique — you’re not supposed to look at the piece of paper, you look through it. It’s like a window, and anytime there’s a hole in that photograph, that makes it turn to paper, it ruins the illusion.

I like the analogy of the tones of a photograph working the brain much like chords of music. Ansel, with the Zone System, made the analogy a lot easier to see, with the quantification of the tones in an image. It’s then really easy to think of the different light and dark tones in an image as notes, and the image as a whole as a chord.

I want to take the analogy further, though, and think of a whole image as a song. But first, a quick tangent:

Eye tracking has been able to give great insight into how the visual perception system works, including how people look at images. When people look at a painting or a photograph, their eyes move through the image in often predictable patterns. The brain is drawn to focus on things like eyes and hands and bright areas and whatever else it thinks is foreground, and seeks them out first while ignoring the background until the image has been explored. While no-one looks at an image the exact same way, the brain is predictable enough that common composition rules like “watch out for bright areas near the edge of an image” can be drawn from it.

So, now let’s combine these two ideas of images tones as notes, and the eye moving through an image. As the brain scans over the changing “notes”, we have a song playing. Everyone plays their own song, but images with a strong visual hierarchy will lead most people though in image in a similar fashion. The main areas of visual interest become the chorus, as the eyes keep returning to them, while the rest of the image becoming the verses and bridges.

I think you can take this analogy a lot farther, if you want. Is a high-contrast image loud? Are small textures fast notes? Would you consider a dark image be in minor key? A series of images together can be thought of as movements in the same symphony. Those may be stretching it, but I think it’s fair to say that the composition of an image plays a big part in the song it plays — how the brain scans the image determines where the chorus is, and other areas the are scanned less are the tones for the bridges and verses.

That said, tonal composition certainly is not the only measure of the image. The subject has its own emotional impact and meaning. I’d like to think that the subject provides the lyrics in our analogy.

I’d like to thank Tammy Frederick, it was an e-mail from her that kicked my brain into thinking about this.

And, for the record, I am a horrible pianist.

Hundreds of new pictures

Work on the new gallery went well over the weekend. The interface is starting to come together, and I managed to sort through a huge amount of my images. There are now over 1400 images up in the gallery! This includes a lot of “new” stuff (from the last year, since I never really added to the experimental gallery), as well as a good number of older images, too.

That’s a lot of pictures, and I might pare that number down, especially as I try to strike the balance between showing off as many images as I can and keeping the clutter down so people can easily find the interesting stuff.

Since the gallery is now organized into a style/theme/subject-based hierarchy, I spent most of my time sorting them. That was hard. I find a lot of the images tend to straddle the line between two or more categories. In the end, I tried not to get too bogged down and just made quick decisions, so you’ll probably see a few that aren’t quite right.

There’s still a fair bit I want to do, including:
-Snazz up the interface a bit more — I’d really like the bottom scroller to follow along if you are using the top or image link to move through the album
-Tidy up the HTML/CSS
-Get it working better in IE. It looks and works *way* batter in FireFox at the moment. IE sucks. Right now the bottom scroller looks awful in IE, and hops up in down as the active image changes. Hopefully I can get it all pretty and nice like it looks in FireFox.
-Evaluate the album sizes. I think it’s still on the slow side, so less images in each album may be the fix if I can’t find better ways to speed it up.

Anywho, if you haven’t looked at the gallery since last night, please have a browse, or at the very least check out the Showcase albums to see some of my favourite images.

Any and all feedback is welcome!