Worpdress: Building a JQuery Slideshow without a plugin

Recently, I had to add a slideshow to a wordpress site. It was a pretty simple request: it had to utilize the automatic wordpress gallery functionality in each page/post, needed to pull the image, image title, and image description using a fade out/fade in, and the client did not want it to be in flash.

I searched endlessly through plugins only to be disappointed. Some don’t work well or AT ALL with Wordpress 3.0; some won’t even install. Some don’t use the gallery function, therefore can’t have different slideshows on different pages. Some of the best ones were flash, so that wouldn’t work. And others just only called the image, while the functionality of one just didn’t make sense. Now I don’t want to call anyone out and call their hard work, bad work, so I won’t link any of the offending plugins here.

I began thinking; it cannot be that hard to build a slideshow in wordpress using the functionality that already exists. Besides if I didn’t use a plugin it wouldn’t break/would be easier to fix after a wordpress update. So using the jQuery cycle plugin I utilized wordpress’s built in calls and made my own 100% dynamic, married to gallery functionality slideshow.

Now onto the good part, how it’s done:

Go to the jQuery cycle page and download the necessary files/get links for necessary js. You’ll need to put the jQuery source and the jquery cycle scripts into your header and then call it in the document ready function as shown below:

  1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  2. <script type="text/javascript" src="path/to/cycle/jquery.cycle.all.min.js"></script>
  3. <script type="text/javascript">
  4. $(document).ready(function() {
  5.     $('.slideshow').cycle({
  6.   fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc…
  7.  });
  8. });
  9. </script>

So here’s the hard part, figuring out exactly how to call the image, title and description. I’m sure this would have been a lot easier if i actually knew PHP (don’t worry I’m learning), but each time I figure something out, PHP makes a little more sense.

In your template file after if (have_posts)… add the following code:

  1. <?php
  2. $args = array(
  3.  'post_type' => 'attachment',
  4.  'numberposts' => -1,
  5.  'post_status' => null,
  6.  'title' => $attachment->post_title,
  7.  'post_parent' => $post->ID,
  8.  'description' => $attachment->post_content
  9. );
  10. $attachments = get_posts($args);
  11.  if ($attachments) {
  12.  foreach ($attachments as $attachment) {
  13.  echo
  14.               '<div>',
  15.               '' .the_attachment_link($attachment->ID, $size = 'full', $attr = '', false).  '',
  16.               '<h2>' .$attachment->post_title . '</h2>',
  17.               '<p>' . $attachment->post_content . '</p>',
  18.               '</div> ' ;
  19.  }        
  20. }
  21. ?>

Now let’s break down the code:

post_type => attachment : tells wordpress database to call the attachment instead of post content
numberposts => -1 : call all attachments
post_status => null : can be changed to draft, published, etc
title => $attachment->post_title : defines the title of the attachment
post_parent => $post->ID : defines the current post
description => $attachment->post_content : calls the images description

  1.  echo
  2.               '<div>',
  3.               '' .the_attachment_link($attachment->ID, $size = 'full', $attr = '', false).  '',
  4.               '<h2>' .$attachment->post_title . '</h2>',
  5.               '<p>' . $attachment->post_content . '</p>',
  6.               '</div> ' ;

This part says find all of the above and then display as written: find the image, make the size full (can be changed the thumb etc), find the title and wrap it in an h2, find the description and wrap that in the p tags, and finally wrap the entire thing in a div. Now I’m not sure why, but the 2 single quotes before and after the_attachment_link were necessary to make it not break. If you wanted to wrap just the image in say a div class then you could do this:

  1.  echo
  2.               '<div>',
  3.               '<div class="image-class">' .the_attachment_link($attachment->ID, $size = 'full', $attr = '', false).  '</div>',
  4.               '<h2>' .$attachment->post_title . '</h2>',
  5.               '<p>' . $attachment->post_content . '</p>',
  6.               '</div> ' ;

So that’s my sans plugin wordpress slideshow. Questions?

Tags: , , , ,

2 Responses to “Worpdress: Building a JQuery Slideshow without a plugin”

  1. chris trude says:
    August 30, 2010 at 2:13 pm

    Great post Eileen!

  2. Eileen M. Carpenter says:
    August 30, 2010 at 2:18 pm

    Thanks Chris, glad you liked it!

Leave a Reply