Slideshow Image Gallery for the Thesis Theme

A difficult (but resolved) Next Gen plug-in issue with Thesis and other themes caused the Mules to wonder if there were not an alternative route. Not a plug-in, but something that could be accomplished without editing core Thesis or WordPress files, a slideshow or image revolver that allows for a flexible “fade-in, fade-out” solution using CSS and JavaScript. Our scars are deep – we’ve since removed the word “simple” from this tutorial. 

Note: We have also removed the functionality from the upper-right — trust us, it works, but after a couple of months, we grew weary of the JS code output on every page of our site, as this is a global tutorial.

Luckily, an excellent solution already exists, and our example of a functional rotating image gallery for Thesis use draws heavily, if not exclusively, from the work of others in the “slideshow” department. First, the Mules added a dash of new DIV love to custom.css, which we presume Thesis users know how to go about doing:

#photodiv { background-repeat: no-repeat; }

Next, we ate several apples. You should try one. Golden, green, red, they’re all good. Back at it! We then, for our single-page example, slapped this code into our Custom Multimedia Box Code, which in Thesis, is below the content area for creating new posts. As you’ll swiftly recognize, all you Thesis users will want to use your own slideshow images – the first one is defined here, and we’ve used a copyrighted image to keep things pasture perfect, so kindly use your own, eh?

<div id="photodiv">
<img id="photoimg" src="http://www.doublemule.com/blog-images/slideshow1.jpg" />
</div>

Remember to remove the idiotic forward quotes if WordPress has its way – whatever happened to PRE and CODE actually listening? Anyway, considering this is a custom slide show gallery deal, so far things have been generally simple painless until now. Let’s keep it that way. Calling the JavaScript from within a custom hook is not so difficult, right?

Oh Dear Lord.

We here edit custom-functions.php and stab in this glorious hunk of demonic code [txt file]. It’s not the right way – in fact it’s quite horrid – but it’s nearly dark, the fence is down, and there’s a cornfield over yonder. Tonight is our only chance. Upload your slide show’s jazzy new code after pasting it into custom-functions.php and call it done.

Figure out how to call an onload function and you could externalize the JS file and save a great deal of clutter in your custom-functions.php file. Eh, pretty much done. You’ll want to change the image array in the custom PHP file to display your own images (duh). You can also adjust the time an image in the slideshow gallery is displayed, how quickly the fade transition effect occurs, and set the “rotations” (number of times the slideshow repeats). The Javascript output is nicely commented, thanks to the humans who put the time into making this originally, so we’ll not get into details on this aspect of the slideshow’s functionality.

This tutorial presumes you wish to have the same gallery and slideshow appear globally on your blog or site domain.  Since we did not, after 45 days of the top right image clomping around in our code, we have removed this functionality.

To remove Internet Explorer rendering issues, if you wish to show the fading gallery on only selected posts/pages, and not on certain others, you’ll need to use conditional statements to avoid problems. Along with JS, CSS, and PHP, the Mules are convinced that IE is the devil. But that is a tutorial for another time. About conditional page selection. We’re not messing with the devil. Corn!