How to create a simple post gallery with jQuery Nivo Slider

ad code=1 align=left

In making WordPress theme, adding or integrating useful and fancy features is a plus point to its quality. So today, I will guide you through the process of making a simple post gallery feature with jQuery Nivo Slider into your wordpress site. As you’ll find, the process is really quite simple.

STEP 1: Load JQuery

Initially off, we need to load jQuery within wordpress for Nivo Slider to work when called. To realize this, you need to house the code not more than on header.php before the tag and make sure it’s on the top of wp_head() function.

STEP 2: Make the Primary Function

The next step is to add the function that will return the post gallery markup within the content. In this step, we will hook our function into WordPress Shortcode System as raw code will not be executed inside your content.

Let’s start with the base and the parameters with defaulting value initially

function nivo_post_gallery($atts) {
	extract(shortcode_atts(array(
		"id" => get_the_ID(),
		"width" => 500,
		"height" => 300,
		"bcolor" => "#000",
		"show_title" => false,
		"link_to" => fake
	), $atts));
}

As you can see, our function can receive six (6) parameters through the attributes variable.

• id – the ID of post where we get the metaphors glue on it.
• width – the width of the metaphors
• height – the height of the metaphors
• bcolor – the border affect of the container of our post gallery
• show_title – a boolean parameter that we can set whether we want to show the title attribute of the metaphors or not
• link_to – a boolean parameter that we can set whether we want to add the link to the image or not

Next is to get all metaphors attached to a post and return the markup. Here, I’ve added the data that passed in the attributes variable

function nivo_post_gallery($atts) {
	extract(shortcode_atts(array(
		"id" => get_the_ID(),
		"width" => 500,
		"height" => 300,
		"bcolor" => "#000",
		"show_title" => false,
		"link_to" => false
	), $atts));

	$args = array(
		"post_type" => "attachment",
		"post_mime_type" => "image",
		"numberposts" => null,
		"post_status" => null,
		"post_parent" => $id
	);
	$attachments = get_posts($args);
	if($attachments) :
		$output = '
';
		foreach($attachments as $attachment) :
			if($show_title) $title = $attachment->post_title;

			if($link_to) {
				$output .= '';
			}
			$output .= '';
			if($link_to) {
				$output .= '';
			}
		endforeach;
		$output .= '

';
	endif;

	return $output;
}

Lastly on this step is to hook our function into WordPress Shortcode System

add_shortcode('nivo-gallery','nivo_post_gallery');

STEP 3: The Nivo Slider

Download Nivo Slider and house the jquery.nivo.slider.js and nivo-slider.css in your template folder. To organize things a bit more, I’ve produced a “js” folder.

Next is make the initialization function to include these necessary files which contains the functionality and defaulting styling of nivo slider when the page loads.

function nivo_gallery_init() {
?>




(optional) Adding a small styling code to make it more prettier 
function nivo_gallery_init() {
?>



	.nivo-gallery { overflow:hidden; margin-bottom:10px; }
	.nivo-caption p { padding:10px !vital; margin:0 !vital; }
	.nivo-prevNav, .nivo-nextNav {
		show:check;
		padding:4px 8px;
		affect:#fff;
		background-affect:#000;
	}




And now, let’s call the Nivo Slider method when the page loads.
function nivo_gallery_init() {
?>



	.nivo-gallery { overflow:hidden; margin-bottom:10px; }
	.nivo-caption p { padding:10px !vital; margin:0 !vital; }
	.nivo-prevNav, .nivo-nextNav {
		show:check;
		padding:4px 8px;
		affect:#fff;
		background-affect:#000;
	}


jQuery(dialogue box).load(function(){
	jQuery('.nivo-gallery').nivoSlider();
});



The final step is to hook our initialization function into WordPress.
add_action('wp_head','nivo_gallery_init');

And with that, viola! we’re done! 
Just type [nivo-gallery] into your editor and WordPress will automatically replace the text into our custom post gallery with jQuery Nivo Slider.

mind the implementation demo
this video is a no-audio demo


Conclusion
I hope you learned something useful in this tutorial. Just by using a third party script, we’re able to add powerful and awesome functionality to our WordPress themes. Subscribe to our RSS Feed or follow us on Chirrup to get more wordpress tutorial like this.

    



			
			

				
	

	
Tags »  a-no-audio-demo, data, function, function-nivo, image, initialization, jquery, press-shortcode, process, video
	
		
	

Related Post to How to create a simple post gallery with jQuery Nivo Slider
 	



	

Hold on a second, is Blackberry growing as fast as Android?
September 27, 2010
 There has been much said about the imminent demise of RIM’s Blackberry in the face of the unstoppable momentum of Android (and previously...




READ MORE




	



	

Fliphoto Photoblog Theme
July 29, 2011
 Fliphoto Photoblog Theme Fliphoto is a clean and simple WordPress theme for photoblogging . Just like the name, it has the flipping functionality...




READ MORE




	



	

Irix WordPress Theme
July 1, 2010
 Live Preview Irix Demo Features - Two columns , Widget Ready, Fixed width - Compatible with major browsers: MSIE, Opera, Firefox, Safari, etc...




READ MORE




	



	

Low Cost Web Hosting Service Providers
March 25, 2011
 For new businesses, it is necessary to find a low cost web hosting solution, but, initially, it may seem to be a hard...




READ MORE