Image slideshow is one of the feature for every website, as a theme developer you should take advantage of this to make your theme stand out. There are countless of jquery slideshow libraries on the wild waiting for you to use it, one of my favorite is Nivo Slider by Dev7Studios.
Today we will create a image slideshow and we will put it into our theme template, we will also use post attachments. This way our users can upload images and publish it and it will automatically go on the slideshow.
Our Image Slideshow
I’ve learned this through troychaplin.ca, and for this tutorial we will use some of his code 🙂 You can also head out to his site to learn it.
First thing is to download the Nivo Slider, put it on your js folder inside your WordPress Theme. Now open your footer.php and paste this code below.
<!-- jQuery Script -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<!-- Nivo Slider Script -->
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.nivo.slider.pack.js"></script>
<!-- Nivo Slider Function -->
<script type="text/javascript">
$(window).load(function() {
var total = $('#slide img').length;
var rand = Math.floor(Math.random()*total);
$('#slide').nivoSlider({
effect:'fade', //Specify sets like: 'fold,fade,sliceDown'
animSpeed:600, //Slide transition speed
pauseTime:6000,
directionNav:false, //Next and Prev
controlNav:true, //1,2,3...
pauseOnHover:false, //Stop animation while hovering
captionOpacity:1, //Universal caption opacity
startSlide:0 //Set starting Slide (0 index)
});
});
</script>
Now we will paste this code onto our functions.php
function nivo_get_images($size = 'large', $limit = '0', $offset = '0') {
global $post;
$images = get_children( array('post_parent' => $post->ID, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => 'ASC', 'orderby' => 'menu_order ID') );
if ($images) {
$num_of_images = count($images);
if ($offset > 0) : $start = $offset--; else : $start = 0; endif;
if ($limit > 0) : $stop = $limit+$start; else : $stop = $num_of_images; endif;
$i = 0;
foreach ($images as $image) {
if ($start <= $i and $i < $stop) {
$img_title = $image->post_title;Â Â // title.
$img_description = $image->post_content; // description.
$img_caption = $image->post_excerpt; // caption.
$img_url = wp_get_attachment_url($image->ID); // url of the full size image.
$preview_array = image_downsize( $image->ID, $size );
$img_preview = $preview_array[0]; // thumbnail or medium image to use for preview.
?>
<img src="<?php echo $img_preview; ?>" alt="<?php echo $img_caption; ?>" />
<?
}
$i++;
}
}
}
Now to call the image slideshow on our template, just paste this on your index.php or home.php (depending where you want it to be).
<div id"slide"><?php nivo_get_images('large','0','0'); ?></div>
Couple of things that you can do is to customize image sizes to ‘large’, ‘medium’, and ‘thumb’. You can change that on the functions
function nivo_get_images($size = 'large', $limit = '0', $offset = '0') {
and on the
<?php nivo_get_images('large','0','0'); ?>
Next is the css of the slideshow, paste this on your style.css.
#slide {
width:300px;
height:250px;
margin-bottom:40px;
}
#slide img {
display:none;
background: url(images/loading.gif) no-repeat 50% 50%
}
#slide .nivo-controlNav {
position:absolute;
left:50%;
bottom:-30px;
margin-left:-40px; /* Tweak this to center bullets */
}
#slide .nivo-controlNav a {
display:block;
width:22px;
height:22px;
background:url(images/bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
}
#slide .nivo-controlNav a.active {
background-position:0 -22px;
}
#slide .nivo-caption{text-indent:-9999px;}
#slide .nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(images/arrows.png) no-repeat;
text-indent:-9999px;
border:0;
}
Custom Image size
Here is the part where I needed a different size for the images, medium is too small for me, while large was way too big. This is where I found out Add Image Size, you can learn more about that here. Basically the size I am after is 490px 275px, since I am already using
add_theme_support( 'post-thumbnails' );
on my theme thumbnail, I want to add more sizes. I did add this on my functions.php (make sure to check your functions.php before pasting this)
if (function_exists('add_image_size')) {
add_image_size('home-slideshow', 490, 275, true);
add_image_size( 'post-thumbnails', 220, 180, true ); //(cropped)
}
home-slideshow is what we will use on the slideshow, so I will just change the ‘large’ on functions.php and we have this
<div id="slide"><?php nivo_get_images('home-slideshow','0','0'); ?></div>
on our page.
Couple of notes, your CSS may vary on the theme that you are using, try to play with the functionality of Nivo slider on your footer. Try changing them to true / false until you’re satisfied with the result.
Usage
If you paste it on your single.php you can try and create a post and add image on media, click save all changes and hit publish. You can check the page after that.
If you put it on index.php, the process is the same, just upload images on the homepage and you’re good to go. 🙂
I hope you learned something new today, as I have. Keep on reading about this topic and try different jquery slideshow so you can learn new trick. If there’s really cool slideshow that you know, and we can use put it in the comments below!
