Creating a Product Slider in WordPress with Slides jQuery Plugin
First thing we need is to make sure we have jQuery attached to our site. Now I’m sure you can all remember how to do it the nice neat WordPress way, but for those that are joining us for the first time here it is again.
|
1 2 3 4 |
function add_slides_js() { wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js', NULL, '1.6.4'); } add_action('wp_enqueue_scripts', 'add_slides_js'); |
I’ve used Google’s hosted jQuery, but if you have your own copy you can just use get_bloginfo('stylesheet_directory').'/path/to/file.js' instead.
What Are We Making?
A good question. I love a good image for illustrative purposes & this tutorial is no different. In true Blue Peter style, here’s one I made earlier.
Images © Lisa Marie Art & Illustration. Used with permission.
This slider is slightly different from others we’ve gone over before in that it doesn’t show images from different posts. Rather it shows all the available images for one post. As such it would generally be used on the single post view (single.php) of your WordPress site.
What is Slides?
Slides is a jQuery plugin by Nathan Searles which can be used to make practically anything slide. Text, images, anything. First thing you need to do though is go and grab it. So, go download it from the Slides website and then attach it to your page using the technique I mentioned earlier (for attaching jQuery). Those familiar with WordPress might like to throw in a conditional such as is_single() to only load the Slides plugin on single post pages.
Slides jQuery
In a strange twist we are going to start with the Javascript this time. It’s pretty simple to setup the slides.
|
1 2 3 4 5 6 7 8 9 10 |
jQuery(function($){ $("#slides").slides({ preload: true, preloadImage: '<?php bloginfo('stylesheet_directory'); ?>/img/loading.gif', play: 5000, pause: 2500, hoverPause: true, generatePagination: false }); }); |
I’ve chosen to use bloginfo() to fill in the URL to my preloader image. Feel free to hard code it instead. You may also be wondering why I turned off the pagination. Well the answer should become clear very soon.
Slides HTML/PHP
Okay, now we get onto the HTML. The reason I chose to do the Javascript first is because it’s easier to explain the HTML & PHP together. First let’s take a peek.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<div id="slides"> <div class="slides_container"> <?php $prodimages = get_posts( array( 'posts_per_page' => -1, 'post_type' => 'attachment', 'post_mime_type' => 'image', 'post_parent' => $post->ID, 'order' => 'ASC' ) ); foreach($prodimages as $prodimage) : ?> <div> <?php echo wp_get_attachment_image($prodimage->ID, 'full'); ?> </div> <?php endforeach; ?> </div> <ul class="pagination"> <?php reset($prodimages); foreach($prodimages as $prodimage) : ?> <li><a href="#"><?php echo wp_get_attachment_image($prodimage->ID, 'product-thumb'); ?></a></li> <?php endforeach; ?> </ul> <div class="clr"></div> </div> |
You might be able to see that the reason I turned off the pagination is so we could generate our own using images. Let’s go through what exactly is going on here.
First notice that the slides plugin requires us to have an outer container (slides) and inside that a slide container + the pagination.
First inside the slides container. We use get_posts() to grab the attachments for this post. The options are fairly self explanatory. You may be wondering why posts_per_page is set to -1 though, it just means we want all of the images attached to this post. Also post_mime_type limits it to only pulling back attachments that are images.
We run through each post using a foreach and use the attachment’s ID to grab the full size image. You can easily swap out full for a different size such as thumbnail, medium, large, you can even use a custom one if you are using the WordPress thumbnail system.
Inside the pagination we use reset() to move the internal pointer back to the start of our posts, and then we run through the posts again this time grabbing a custom thumbnail size that Lisa Marie made for her website using the WordPress thumbnail system. Again though you can use your own, or one of the predefined sizes.
Slides CSS
I’m not able to give the CSS used as it’s Lisa Maire’s, but here are two basic, needed CSS rules.
|
1 2 3 4 5 6 7 8 9 10 |
#slides .slides_container { width:366px; overflow:hidden; display:none; } #slides .slides_container div { width:366px; height:274px; display:block; } |
These two rules define the width & heights needed by the slides. Also display none is needed in the slides container as it stops a horrible flash of unstyled contented while the Javascript/images is/are loaded.
That’s it. Hopefully this tutorial has been helpful to you. If you have any questions or you need any additional help let me know via the comments. Or if you are in need of hands on help you can hire me via my Hire Me page.
