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
imagesfolder. - Write a little
custom.csscode 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!
{ 6 trackbacks }
{ 136 comments… read them below or add one }
← Previous Comments
Tutorial is fantastic. You made it very easy. Thank you. I have one question can I slow the show down a little so the image stays for maybe double of what it currently is before rotating?
There are a lot of instructions on manipulating the slideshow found here: jquery.malsup.com/cycle/
Offsets my sidebar to the bottom of the page ??
That is a css problem. Check your custom.css
I’m having an issue with the way the slideshow is working in Chrome (browser). It’s not overlaying the images; instead, they are all stacked, pushing my homepage content down by 10 frames. Can you please suggest a fix?
The same is happening in Opera and Safari. In Firefox, it works fine, however.
I’d have to see your code. I use the same thing on my homepage and it works in all browsers…
I’m having the same issue in all Browsers. Just to be clear, I would like to have the banner images display in the Header and essentially scroll through a slide show of all the images that are called from the code in the custom.php file. So that there is an ongoing slide show in the header. What is happening now is that all the images are loading at once and are all tiled below the header on the home page. The side bar is then pushed to the bottom of the page below the last image. There is very little else in either the custom.css file or custom_functions.php file
Thanks so much for any help you can provide.
I was having the same trouble! I found that since you have the js references in the code, you need to click off Javascript under Design Options/ Home Page Display Options. Hope this helps.
I’m having the same problem, the slides are vertically stacked and static rather than fading. I’ve tried turning off both the jQuery libraries, too. I’ve restored them. Very puzzled because it is exactly what I have been looking for particularly as it is not in Flash and could work on the Apple iOS platform.
I really appreciate the job you’ve done. I hope you can help me. I’m not strong on code…
Thanks
Got it! I’ve spent so much time trying to get this going…. I tried to take your advice about getting rid of redundant jquery libraries, etc., and just could not get it running without the vertical stacking. Finally, I found that I had overlooked the Javascript options in Thesis Home Page Display Options. I unchecked the boxes and it actually works! http://PinePlainsViews.com
Thanks ever so much! It’s a big help.
Hi Matt – First of all, thank you for these wonderful tutorials. I am a total newbie and your instructions have been the best I’ve found by far. Oh and sorry if this is extremely silly and/or been answered.
I followed your tutorial for ‘How To Make A Rotating Header Image In Thesis’, which is up and running. Next I wanted to add a slide show below the feature box, before the content box. I’ve entered the code per your instructions and the slide show images are now stacked and sitting above the feature box, below the header/navigation. Clearly I’ve missed a step. Here are your initial steps…
Where does this step fall exactly? I’ve entered the custom code you’ve provided. Is this considered to be a part of that code or is this code I need to construct and enter separately from yours?
* Make a slideshow .
Any other insight into the problem I encountered is greatly appreciated. Thank you again for your time and tutorials!!
feel free to share a link and we’ll take a look.
I followed all the instructions but it didn’t work – spent about 2 hours fiddling with this.
Eventually gave up and have used a WP slideshow plugin – installed in less than 5 mins!
This is definitely for more advanced users who are looking for functionality that no current “slideshow” plugin is capable of offering. Not to mention this is WAY less code overhead. So, for developers that is crucial.
Hi Matt,
Thank you for all of the tutorials first of all! I am fairly new to Thesis and jquery. I have been following this tutorial and am sure I am missing something because it is not working.
The goal is to enable this as a rotating image on the front page of the site. I have disabled posts on Wordpress as I mainly need it to show images and have replaced the main post page to a static secondary page.
Could you advice how I activate this to work properly?
It worked great! Thanks a million Matt!
Hi Matt,
Thanks very much for your tutorial… this is exactly what I was looking for. However, it isn’t working… I think I must have messed up somewhere. My site is http://www.hanspropertyperu.com
In the custom_functions I changed link & link2 to http://www.hanspropertyperu.com/images/picture1.png
and also changed the height & width. Not sure what else I should have done.
Can you get back to me? Thanks again,
Art
Never mind, I figured it out.
Thanks for the tutorial. I’ve done all of the coding but the images are in a square and have moved the columns down the blog. Can you help me figure out how to fix this?
Thanks,
Jack
Hi Matt,
How do you move the slide show to be below the Nav Bar?
Thanks,
Noel
Curious. Can I use this within the feature box?
If not, this will take place of the header, correct?
You can use this anywhere you like. Wherever you hook this into place, it will appear. That could be the footer, sidebar, above/below content, feature box,etc.
Great tutorial…I’m new to wordpress so really enjoying your easy to follow instructions.
I have implemented the slideshow and it is working but I can’t see the images, it’s all white!!
The images are scrolling through as I can see it in the bottom browser bar and I can put my cursor where it is meant to be showing and it changes to the ‘link hand’.
Any ideas?
I’m having the same issue that Annette described (slideshow is running but the images aren’t showing). However, the solution she found doesn’t seem to be working for me. The snippets in question:
In my custom functions file:
In my custom. css file: .custom .slideshow #slide1 { background: url(‘http://www.healingartistwebsites.com/custom/images/goldenheader1.jpg‘) no-repeat; }
.custom .slideshow #slide2 { background: url(‘http://www.healingartistwebsites.com/custom/images/goldenheader3.jpg‘) no-repeat; }
I would really appreciate some help. Many thanks!
Hi Matt,
Just worked out why my images weren’t showing.
I changed this background: url(‘images/slides/loxton_riverfront.jpg’)
to background: url(/images/slides/loxton_riverfront.jpg)
Thanks
Thnx.x..!! Nice Work…Guys..!!
The tutorial worked great for Firefox and Chrome but I get my slides stacked when I view it in IE 8. Any suggestions? I can’t seem to find an answer anywhere that works.
Hi,
I love your slideshow however I have two questions.
On my main page…I want to be able to put text right next to the slideshow, but can’t.
Second,
is there a way to put a different slideshow on multiple pages in a site?
Hi Matt, once again, thanks for your tutorial.
You said we can hook the slideshow anywhere we want. Could you explain me how do I move it ?
I would like to hook it on the right of my home page, with the text on the left.
Thanks,
Stefan
The code is ok , the only problem i have is because Internet Explorer does not load the jquery.It works fine in all other browsers.
Hi!
Slight issue. I used this slideshow on this site konasff.com and it works brilliantly. I try to use it on this site – ashleywelton/wordpress.com and it breaks the site. Giving me this error –
Parse error: syntax error, unexpected T_FUNCTION in /home/content/a/s/h/ashleywelton/html/wordpress/wp-content/themes/thesis_18/custom/custom_functions.php on line 35
Line 35 is the first line of the function slideshow() etc
The only difference is the site that works is running wp 3.0.1 and the one that doesn’t is wp3.1. Any ideas??
Thanks!!!
Alright, well I’ve got it so that it’s no longer breaking the site, but the script doesn’t work and the css is all messed up. It’s EXACTLY the same code as the one working on my other site. I’m so stumped. Help!? Thanks!!
I love these one person conversations. ; )
Figured it out. Uncheck the Include JavaScript Libraries on the individual page as well as in the thesis options.
Sweet. Thanks for the code!
I used your tutorial once and it was a flawless process. I just tried it again and am having issues. Would you be able to look at my code and tell me if there is something wrong?
Thanks.
Website: oneotatest.com (want slideshow to the right of the text on the homepage)
customfunctions:
function slideshow() {
if (is_front_page()) {
?>
$(document).ready(function() {
$(‘.slideshow’).cycle({
fx: ‘fade’ //You can change transition effects here.
});
});
<?php
Customcss:
.custom .slideshow .slide { float: right; display: block; height: 265px; width: 425px; outline: none; }
.custom .slideshow #slide1 { background: url('/images/boardofdirectors.jpg') no-repeat; }
.custom .slideshow #slide2 { background: url('/images/breakfastbar.jpg') no-repeat; }
Hi,
Question – not 100% sure how to describe this, but the images ‘flash’ in the top left of the content box before being positioned center and then the slideshow starts. It works, but it looks unprofessional. How do I stop them from flashing before starting the slideshow??
ashleywelton.com – homepage slideshow
thanks!!
ashley
Hi,
Thanks very much for this…I’ve been trying to install a simple slideshow for days, and your code here has provided the perfect solution. I’ve been driven half crazy with crappy plugins and difficult to understand tutorials! The comments were also really helpful…you solved several of my teething problems in your responses to others who had similar issues. The code is running on a test site at the moment but I will send you a link to our site when finished.
Thanks a million!!
Hey Matt,
Thanks for the tutorial. I’m curious, when I edit out the ” if (is_front_page())” it crashes my site. How much of that needs to be taken out?
Nevermind…guess I didn’t see that this was clearly answered in a previous comment. Only say the front page of them!
Anyway, still trying to figure out why it won’t show up right now, but I’ll get it. Working on condensing the images.
Hello -
Just wondering whether anyone has any idea how to make the slideshow change slides only when the page is loaded, rather than cycling through photos.
Thank you!!
Hi Matt,
Thank you very much for this tutorial. Top quality information! You’re the tutor!!!!
hi.
i added this code in this page:
http://kidumi.com/dorivry.co.il/projects/
the images show but there’s no sliding effect…
As Murphy’s law would have it, I figured the problem out shortly after sending my question to you. So no need to respond. Thanks!
Love the tutorial. quick qstn; how would I add the slideshow to the main content area of thesis with text wrapping around it?
help. i guess i’m such a newby, i can’t even get it to do anything. first of all i’m doing this through the Thesis Custom File Editor i’m confused: on the custom_functions.php add in. what do i fill in for the href info.
this is also what my custom.css looks like.
.custom .slideshow .slide { display: block; height: —em; width: —em; outline: none; }
.custom .slideshow #slide1 { background: url(‘images/slideshow_001.jpg’ height=”640″ width=”960″) no-repeat; }
.custom .slideshow #slide2 { background: url(‘images/slideshow_002.jpg’ height=”640″ width=”960″) no-repeat; }
.custom .slideshow #slide3 { background: url(‘images/slideshow_003.jpg’ height=”640″ width=”960″) no-repeat; }
.custom .slideshow #slide4 { background: url(‘images/slideshow_004.jpg’ height=”640″ width=”960″) no-repeat; }
.custom .slideshow #slide5 { background: url(‘images/slideshow_005.jpg’ height=”640″ width=”960″) no-repeat; }
this seems like a perfect solution for what i want. a big slideshow on my homepage. i want this to work.
how can i add slide-out effects that are menu-driven? i want the image to slide-out when the user presses a button. actually i want to use a video embed.
Hi There, I am trying to make a slideshow for my sons website but he wants different images rotating on different pages. I can get it to work on home page http://www.clothesireland.com/ but not sure how to code so appears on other pages?
Matt – it’s light, customizable, PERFECT – Thanks
Thanks for this very simple and wonderful tutorial. I wanted to add captions to the 4 slide images. How would I do that?
I wish to have a marquee images in feature box, with a semi transparent background, displaying the title over them. Can you suggest what are all the alterations I’d make. I have tried this, but I’m lazy to change the custom functions often to change the feature posts
Matt, This is a great script however somewhere along the lines of construction my slideshow has disappeared. Ive tried uninstalling plugins and overwriting the script but all to no avail. If you get a sec could you please take a look at http://www.frontstreetgrind.com/ please?
Its unbelivable this is the first slide-show-tutorial wichs works. Thanks a lot.
But one question:
I didn’t found out how i can slow down the fading, everything i test from http://jquery.malsup.com/cycle/options.html doesn’t work. how can i change die Speed between slide 1, slide 2, slide 4 that poeple could read the text???
How do you get this up into the header? It works great below the header!
Is there a way to make the rotating images clickable? I’m trying to use your tutorial to recreate the effect on homepage of http://www.WebMD.com but need to make sure users can click through to an article first. Thanks so much!
Is there a way to add numbers to the slides in the slideshow like on the homepage of this website? http://www.drhyman.com Thanks!
Thank you for your tutorial. Very clearly communicated, very useful, and free of clutter.
Thanks!
Great tutorial. Have implemented this for a couple of clients and they are always very happy with the results.
Thanks so much! This is exactly what I was looking for! One small thing- I noticed it pushed my sidebar content down after I inserted it. Do you what caused that? I’d love to be able to move it back up. Thanks!
The tutorial was simple and Great thanks A LOT! But…. I have found for whatever reason a couple of people have javascript disabled in their browser. So what I’d like to do is have an image placed in the spot of the slideshow if their is a detection of no javascript. I think you can use the “noscript” tags but every time I place them in the code my page gets screwed up! Can you possibly give the code where you could add “noscript” or another solution. With no javascript enabled the images stack on top of each other. here is my demo site location = sites.viaburst.com/option1
You have a ton of interference from poorly built plugins. Your site has 4 jquery versions, jquery UI and 2 cycle plugins. Start by removing the links to google and github. If that doesn’t work get rid of nextgen gallery and put back the google and github links. I hope that gets you on your way.
It’s really working very well now. It just took me a while to get rid of the different jQuery versions and plugins but when I finally realized that the Javascript options in Thesis Home Page Display Options was putting in code I was able to clean things up.
Thanks again. I’m delighted with it and intend to use it on other sites! (I sent a thank you, well worth it.)
← Previous Comments