How I broke a javascript gallery script to make a Flash-like slideshow
Friday, April 2nd, 2010
This is a story about a site redesign. The site was for the mother of a client we’ve worked with on other projects. It was a kind of site we don’t normally do, but we took the gig because it was a referral and someone we know and like working with. The original site was built in WordPress, and our job would be to fix it up, make it more SEO-friendly and just generally take what they did and make it better.
When I got access to the WordPress backend and found that, rather than building a new theme, the previous designers just added styles to the WordPress Default theme, I figured just how right I was to just take what they did and make it better. They also controlled the layout via tables and built no custom page templates, all of which told me that they didn’t understand the possibilities and/or were not very skilled WordPress designers or they were just really lazy.
One of the first things I noticed on the site was that there was a lot of graphics that were mostly text. Search engines can’t read images, so this text – much of it was the sort of keywords that would be valuable for search engines to crawl – was useless (at least from a search engine standpoint). In addition, said text was, in many cases, jaggy and ugly. My question: why bother making text into an image if it doesn’t look smooth and clean? Either use a unique font you can’t get with available web fonts and make it look nice, or just use regular text. So the first step was taking several graphics like this and removing all the text, and then adding the text to the code and styling it with CSS. To get a more unique and attractive look (i.e. to make it look more visual and like the graphic it was replacing) I added subtle text-shadows and styled the font using @font-face.
There was also one of those Flash slideshows as a major feature of the home page. You know, the Flash slideshows with an image and some text. None of it is interactive; you can’t click on anything to link to a page or anything, and those images, too, had text buried in them that would be relevant for search engines, using the sorts of phrases that I would expect users to actually use in search queries. My next question: why use a Flash slideshow when you could have the exact same effect, and make the text searchable, by using available javascript-based technologies like AJAX? The next task, then, was to find some jQuery slideshow script similar to Dynamic Content Gallery or Featured Content Gallery. In fact, since it was WordPress, I considered building one of those into the theme and using a redirect to point them all to the same page, but ultimately, this would be a bit of a lame hack and I found a better solution.
First, I found a simple jQuery image slide show that I could customize the code for (demo here). Like Featured/Dynamic Content Gallery and a multitude of other slideshows like them, there was a caption that would rise up from the bottom and then slide back down when the image transitioned. But up and down didn’t really work for the layout I was using. I really needed it to either be there all the time (like it would be if it were a static image in a Flash slideshow) or come in from the right side. Here’s the relevant javascript code:
//Display the caption
$('#slideshow-caption').css({opacity: 0.7, bottom:0});
And…
//Hide the caption first, and then set and display the caption
$('#slideshow-caption').animate({bottom:-70}, 300,() {
//Display the content
$('#slideshow-caption h3').html(title);
$('#slideshow-caption p').html(desc);
$('#slideshow-caption').animate({bottom:0}, 500);
});
The above lines of code control the captions displaying/hiding, the height of said caption area, opacity, etc. In both cases, I replaced “bottom” with “right” just to see what happened. What happened was the text didn’t slide at all – it just stayed there until the next slide – precisely what I really wanted to do anyway. Some styling with @font-face for the captions and, voila, a working alternative to the Flash slideshow.
See the final product here: The Art of Eyebrows
___________________
Chris Reynolds is one half of Arcane Palette. He has a personal blog, jazzsequence, where he writes about music, technology and social media and shares links, videos, and posts various personal music and writing projects.
Scenario Writing Studio was a redesign for an author/screenwriter with whom we’d worked before on 
