Byronyasgur's Blog

Random Web Developer Stuff, Mostly WordPress

Simple WordPress Header Image Rotation Slideshow Fader

on July 7, 2011

EDIT : This article is obsolete … From the Cross Slide github page

“This code is obsolete in more that one way. There are much better alternatives around to build slideshows without using binary plugins, including CSS3 animations and the Canvas element. Therefore this plugin is unmaintained and unsupported”.

 

I wanted to do a simple image rotation/slideshow for WordPress without using a plugin …. ( I mean without using a WordPress plugin … I am actually using the CrossSlide jQuery plugin to handle the jquery, but it’s very easy to use. (I am just using it’s ‘fade’ capability here.)

So this is how to get this jQuery plugin working in WordPress. The technique below could also be easily adapted to get any other jQuery plugin working in WordPress.

There are 2 ways to do this, the way I am doing it is to add the main bit of code to your theme’s functions.php file; but it could also be done by putting the code into a plugin with some adapting.

I will give the steps here and the code sections below

Before you start Make sure jQuery is included in your theme – There are 2 methods of doing this and there is some debate about it however the WordPress community by an large prefer this method (which is also the simplest).

  1. Create a directory directly within your theme directory called ‘js
  2. Create a file called ‘header.js’ containing the code below and put that file into directory ‘js
  3. Download the javascript code for the crossSlide jQuery plugin (  direct link here ) and put the code into a new file called ‘crossslide.js’. Put this file also in the ‘js’ folder. ( note that the file is called crossslide.js NOT crosslide,js )
  4. If necessary you can adjust the code in ‘header.js‘ to have more or less images by copying the image lines – make sure you have a comma between each and leave out the last comma.
  5. Switch the fake urls of the images in my code for your actual images urls ( Tip: You can put your images anywhere on the web but if you just upload them to the media library you can grab their urls there – dont put them anywhere they’d be overwritten by the next wordpress update though )
  6. Copy the php code into the ‘functions.php‘ file in the theme folder ( not the wordpress functions.php file)
  7. Open your ‘header.php‘ file and create a div with id=”header” in the position that you want the rotation to show … ( you may not want it in the header so you could put it in ‘sidebar.php‘ for instance either )
  8. Add some styling to this div in your ‘style.css‘ file. You will want to give it a height and width to get it working. You will need to put the first image into this div too which will work both while the page is loading up and also you can use this for whatever no javascript method you use. The initial contents will be overwritten so it shouldn’t matter too much what  markup you use to get the image to display.
  9. Adjust the settings on the crossfire code in the ‘header.js‘ file if necessary
  10. If you get no output i would strongly suggest looking at the console in firebug ( if you don’t already have firebug you would need it for this kind of work)

The code for header.js

// This jquery invokes the crossSlide jQuery plugin – the images can be from any location

jQuery(document).ready(function() {
    jQuery(‘div#header’).
    crossSlide({sleep: 3,fade: 2},
    [
        { src: ‘http://mysite.com/headerImage1.jpg’ },
        { src: ‘http://mysite.com/headerImage2.jpg’ },
        { src: ‘http://mysite.com/headerImage3.jpg’ }          
    ]);
});

The code to go in functions.php

function enqueue_crossslide() {
   wp_enqueue_script(‘crossslide’, get_bloginfo(‘template_directory’) . ‘/js/crossslide.js’, array(‘jquery’));
   wp_enqueue_script(‘header’, get_bloginfo(‘template_directory’) . ‘/js/header.js’, array(‘crossslide’));
}    
add_action(‘wp_enqueue_scripts’, ‘enqueue_crossslide’);

Advertisements

13 responses to “Simple WordPress Header Image Rotation Slideshow Fader

  1. Mat Tibbits says:

    When I follow your instructions above the images do not show up. In my console I get the following error: “Object [object Object] has no method ‘crossSlide’.

    Any ideas what I’m doing wrong

    • byronyasgur says:

      Not sure, but here are a few things to check:
      Check your source code to make sure you are indeed getting all of the following into your page (jquery, crossslide.js and header.js)… then make sure they are in the right order, jquery must come before crossslide which must come before header…… if not you’ve got an error somewhere.
      Also you probably want to make sure you’re using the most recent version of jquery too.

      • Mat Tibbits says:

        jquery was being included twice. One was the default WP jquery and the other was my include in the header.php. I sorted that out and now everything is working.
        Thanks for pointing me in the right direction. Much appreciated.

  2. Scampi says:

    Hi, this is a great piece of code, almost perfect for me, however is there a way to adapt the header.js to put the images in as a background on the div or even the body tag? thanks in advance.

  3. Goa Metro says:

    Nice article. Keep it up.

  4. I am not sure how to implement this: should the #header div in header.php start out with an image in it? Or just an empty div?

    • byronyasgur says:

      Yes you would usually put the first image into this and it will then be overwritten by the jquery. I have changed the text above to explain this better. I have also made a slight change to the last line of the php code ( it is now adding the js at wp_enqueue_scripts instead of at init which I believe is better) …. I have also changed the recommended method of adding jquery from the CDN method to the WordPress method.

  5. Glauco says:

    Thanks, works fine but for anyone who is having problem with the code, be careful copying and pasting it because there are some curved quotes (’) which need to be changed to straight ones (‘) or else the code doesn’t work.
    Also, a question: is it possible to modify the header.js file to include title tags for the images, and maybe to turn the images into links? Some people may find this useful. I know you can do this with the first image in the div’s HTML code, but what about all the other images?
    Thanks!

  6. Emmanuel says:

    pls i want to add two different slide shows into my wordpress header file how do i do that?

    • byronyasgur says:

      From the Cross Slide github page … “This code is obsolete in more that one way. There are much better alternatives around to build slideshows without using binary plugins, including CSS3 animations and the Canvas element. Therefore this plugin is unmaintained and unsupported”.

      So I would advise you to find a different way to do this TBH.

      As far as 2 sliders in the header. You will just need to find a slider system that allows for multiple instances on the one page and then double up on the code (presumably giving them different id tags or something )

Comments are closed.
%d bloggers like this: