How To Make a jQuery Image Slideshow in Thesis

Updated! 03/23/10

Well I can’t spell apparently. I had misspelled ‘slideshow’ in the code below. The issue is fixed and my wife is now administering me weekly spelling tests. Thanks, Scott and Willie.

Slideshow Made Simple

Making a jQuery image slideshow in Thesis is actually very easy. There are four basic steps:

• Insert a few lines of code into the header.
• Make a slideshow <div id="slideshow">.
• Put some images into your images folder.
• Write a little custom.css code magic.

To begin, I want to outline a few assumptions. I am going to assume that you have images of the same size (height and width). Also, although you can put any HTML into a “slide” I will only be using images. Lastly, I will be using a default transition effect called “fade” and I will not be adjusting all of the variables. In fact, if you read the Cycle Plugin documentation, you will see that there are about a million tweaks possible.

Update 2/18/09

For the sake of this tutorial, I am going to assume that you only want the slideshow to appear on your home page. If you want the slideshow on every page simply remove if (is_front_page()){...........}. Also, never be embarrassed to ask me for help! I am the Thesis Tutor, after all.

Now, onto the juicy parts!

First, copy and paste the following into your custom_functions.php:

function slideshow() {
if (is_front_page()) {
?><div class="slideshow">
    <a id="slide1" class="slide" href="http://yourblog.com/link"></a>
    <a id="slide2" class="slide" href="http://yourblog.com/link2"></a>
  </div>
<?php
}}
add_action('thesis_hook_after_header','slideshow');

function slide_script() {
echo "\n\n";
?>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
	fx: 'fade' //You can change transition effects here.
	});
});
</script>
<?php
}
add_action('wp_head','slide_script');

It is important to note that you can add as many images as you please, just be sure to give them each a unique id so you can target them later in the CSS.

Next, drop the images you want to use in the slideshow in your images folder.

Last, we need to add some CSS to whip this little slideshow into shape. So, open up your custom.css and paste this little bit of code in there:

.custom .slideshow .slide { display: block; height: ---em; width: ---em; outline: none; }
.custom .slideshow #slide1 { background: url('images/image-1.jpg') no-repeat; }
.custom .slideshow #slide2 { background: url('images/image-2.jpg') no-repeat; }

Be sure to insert your images names and height/width. By default, the font-size is 10px. Therefore, to convert to ems, simply divide pixels by 10. Yes, it is THAT easy.

That should cover it, folks. Happy coding!