How I broke a javascript gallery script to make a Flash-like slideshow

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});


//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


2e6c0a0ecb51c9d67263485a1713294d How I broke a javascript gallery script to make a Flash like slideshowChris Reynolds is one half of Arcane Palette and writes the majority of the blog posts on this site. He also has a personal blog, jazzsequence, where he shares links, videos, thoughts about music, technology and gaming, and posts various personal music and writing projects.

Easy javascript to spice up your search box and save space

class=”aligncenter” Hey again.  Been super busy around here lately, but something I found made me want to share.  This is a quick and easy trick that looks awesome and will save valuable space on your website.  Ever seen those boxes where you enter your email address or a search and it says “enter search/name/whatever here” and that text goes away as soon as you click there?  If you’re not using a Revolution/StudioPress theme, it’s probably not built into your site for you.  Here’s how to add that functionality.  (Note: for anyone familiar with javascript stuff, you don’t need to worry — there’s no external files attached to this one, just a quick code snippet and then you’re on your way.)

First, a little setting: this will work in any <input> box — that is a box that you type into.  So a search box, email submission form, whatever.  Also, you will need to edit code.  I am going to use WordPress as an example, and I am going to use the search box, but this can be applied to any input box once you know the basics.  Ready?  Here we go:

Find the default search form (searchform.php).  If your theme doesn’t have one, you can make one by copying searchform.php from the WordPress Default theme (or, really, any WP theme).  The searchform.php just handles the actual search box itself, so you’re not likely to mess anything up.  Once you have it, open searchform.php in your favorite text editor, HTML editor, or the Theme Editor in the WordPress admin.  You’ll probably see something like this:

<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
<label class="hidden" for="s"><?php _e('Search for:'); ?></label>
<div><input type="text" value="<?php the_search_query(); ?>" name="s" id="s"  />
<input type="submit" id="searchsubmit" value="Search" />

That’s your search form.  To make text display in the input box (which is where you type stuff), replace this line:

<input type="text" value="<?php the_search_query(); ?>" name="s" id="s"  />

with this:

<input type="text" value="Search this website..." name="s" id="s" onfocus="if (this.value == 'Search this website...')
{this.value = '';}" onblur="if (this.value == '') {this.value = 'Search this website...';}" />

If you want, you can change the “Search this website…” to be whatever text you want, but make sure you change it everywhere.  What it’s doing is a simple if statement that is triggered when you click inside the box (onfocus) or somewhere else (onblur): if the text in the box says “Search this website…” change the text to ” ” (i.e. nothing).  if the text in the box is ” ” (i.e. nothing), change it to “Search this website…”  Easy.  And now you can get rid of this part entirely:

<label for="s"><?php _e('Search for:'); ?></label>

thereby saving space.  Handy, and also visually interesting.  Also, as I said, no external javascript files to upload, and can be applied just about anywhere, once you get the hang of it.

If you liked this post, feel free to share with one of the links below, or follow our RSS feed.  Also, we’re on Twitter, and you can follow us there.  Thanks!