How to Create a jQuery Slide Gallery with WordPress Posts

Posted by admin_mwc on 17 June 2010 9:00 AM in Wordpress Help | 11 Comments

This is a tutorial to replace my old tutorial on how to add SmoothGallery to WordPress. The principles of adding SmoothGallery and a jQuery slide gallery are almost the same. I’ve did some research and found what I consider to be an excellent slide gallery jQuery plugin.

Introducing, the FeaturedBox jQuery slide gallery plugin….

How to Create a jQuery Slide Gallery with WordPress Posts

The FeaturedBox plugin costs $7 or $5 if you buy credits at CodeCanyon.net. This is so much easier than using the SmoothGallery, which runs on the MooTools Javascript library. I don’t need to edit a lot of code to get this up and running. I have a live example of the FeaturedBox on the home page of this web site.

First Things First – Include jQuery into Your WordPress Theme

You will need the jQuery Javascript library because the FeaturedBox plugin runs on it. Please refer to my tutorial on adding jQuery to WordPress to find out how to do it.

Include the FeaturedBox Javascript File into Your WordPress Theme

<script src="/wp-content/themes/TEMPLATE/js/featuredbox.js" type="text/javascript"><!--mce:0--></script>

Add the following code in between the <head> tags of your header.php template file.

<script src="/wp-content/themes/mwc1/js/featuredbox.js" type="text/javascript"><!--mce:1--></script>

Please replace the “TEMPLATE” text with your theme’s directory name.

If you want to display the FeaturedBox only on the home page, you could add WordPress conditional tags to display the FeaturedBox only on the home page.

Merge the FeaturedBox style.css with Your WordPress Theme’s style.css

/* FEATURED BOX */
#featured_box_wrapper_wrapper
{
	display: none;
}
#featured_box_wrapper, .featuredbox
{
	position: relative;
	display: block;
	height: 380px;
	margin: 0px 0px 10px 0px;
	border: 1px solid #EDEDED;
	overflow: hidden;
}
.featuredbox ul.slides
{
	margin: 0px;
	padding: 0px;
	list-style: none;
}
.featuredbox ul.slides li
{
	position: absolute;
	top: 0px;
	left: 0px;
	height: 380px;
	margin: 0px;
	padding: 0px;
	list-style: none;
}
.featuredbox .description
{
	position: absolute;
	width: 100%;
	height: 56px;
	bottom: 0px;
	left: 0px;
	margin: 0px 0px 0px 0px;
	padding: 8px 8px 8px 8px;
	background: transparent url("images/bg-featured-box-desc.png") repeat scroll 0 0;
	z-index: 100;
}
.featuredbox .description h2
{
	margin: 0px;
	padding: 0px 0px 5px 0px;
	font-weight: bold;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 13px;
	font-style: italic;
	color: #FFFFFF;
}
.featuredbox .description p
{
	margin: 0px;
	padding: 0px 8px 0px 0px;
	font-weight: normal;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 13px;
	font-style: italic;
	color: #FFFFFF;
}
#featured_box_wrapper .navigation
{
	position: absolute;
	top: 0px;
	right: 0px;
	height: 300px;
	margin: 1px 1px 0px 0px;
	padding: 8px 8px 0px 8px;
	background: transparent url("images/bg-featured-box-navi.png") repeat scroll 0 0;
	z-index: 100;
}
#featured_box_wrapper .navigation ul
{
	list-style: none;
	margin: 0px;
	padding: 0px;
}
#featured_box_wrapper .navigation li
{
	margin: 0px;
	padding: 0px 0px 8px 0px;
}
#featured_box_wrapper .navigation li img
{
	border: solid 1px #FFFFFF;
}
#featured_box_wrapper .navigation li.hover img
{
	border: solid 1px #EFA40D;
	cursor: pointer;
}
#featured_box_wrapper .navigation li.active img
{
	border: solid 1px #EFA40D;
}
.featuredbox .box-slide1, .featuredbox .box-slide2
{
	position: absolute;
	top: 0px;
	left: 0px;
	margin: 0px;
	padding: 0px;
	z-index: -1;
}
.featuredbox .box-slide1
{
	background-color: #CCF;
}
.featuredbox .box-slide2
{
	background-color: #F96;
}

I added the code into my WordPress theme’s style.css. I made some changes to suit my web site’s design. Instead of specifying a fixed width for the FeaturedBox, I used the code “display: block;” to let the FeaturedBox stretch to the maximum width of the web page.

Create a Dedicated WordPress Category for the FeaturedBox

How to Create a jQuery Slide Gallery with WordPress Posts

I created a category titled “featured projects” for my FeaturedBox. If you click on the category in the WordPress admin section, you will see a URL similar to the screen shot above. Note down the category ID number because we will be needing it in a while.

Add the FeaturedBox to Your WordPress Template

$(document).ready(function()
{
	$("#featured_box_wrapper").featuredbox(
	{
		slidesAnimation: "slide-left",
		slidesSpeed: "slow",
		descriptionAnimation: "fade",
		descriptionSpeed: "slow",
		navigationHide: true,
		rotateInterval: 5000
	});
});
<!-- FEATURED BOX - START -->
<div id="featured_box_wrapper">
	<!-- FEATURED BOX SLIDES - START -->
<ul>
	have_posts())
	{
		$portfolio_highlights-&gt;the_post();
		#RETRIEVE THE FEATURED BOX SLIDE IMAGE URL
		$picture = get_post_meta($post-&gt;ID, 'picture', true);
		#RETRIEVE THE FEATURED BOX SLIDE URL
		$url = get_post_meta($post-&gt;ID, 'url', true);
		#FEATURED BOX SLIDE IMAGE URL EXISTS
		if(!empty($picture))
		{
		?&gt;
	<li>
<div><a title="Read more..." href="&lt;?php echo $url; ?&gt;"><img src="&lt;?php echo $picture; ?&gt;" alt="&lt;?php the_title(); ?&gt;" /></a></div>
<div><a title="Read more..." href="&lt;?php the_permalink(); ?&gt;"><img src="&lt;?php echo $picture; ?&gt;" alt="&lt;?php the_title(); ?&gt;" /></a></div>
<div></div>
<div><img src="&lt;?php echo $picture; ?&gt;" alt="&lt;?php the_title(); ?&gt;" width="120" height="60" /></div></li>
</ul>
<!-- FEATURED BOX SLIDES - END --></div>
<!-- FEATURED BOX - END -->

I display my FeaturedBox on my home page, therefore I added my code on my home page template. Please add the code above to wherever your FeaturedBox should be.

The Javascript code that loads the FeaturedBox is customised to my FeaturedBox. Please refer to the numerous examples of the FeaturedBox to find a setting that suits your needs.

The key code to edit here would be:

new WP_Query('cat=120&amp;posts_per_page=4');
  • Edit the code after cat=XXX to your category number.
  • Edit the code after posts_per_page=X with the number of posts you wish to display.
<img src="&lt;?php echo $picture; ?&gt;" alt="&lt;?php the_title(); ?&gt;" width="120" height="60" />

You might want to edit the size of the thumbnail to suit the design of your WordPress theme.

Create a WordPress Post for the FeaturedBox

How to Create a jQuery Slide Gallery with WordPress Posts

Whenever you create a new post that you want to display in the FeaturedBox, remember to do the following:

  1. Enter some text into the “excerpt” box.
  2. Enter the URL of the FeaturedBox thumbnail into the “picture” custom field box.
  3. Enter the URL of the FeaturedBox slide into the “url” custom field box.
  4. Select the category of the FeaturedBox.

I wish I could make the integration of FeaturedBox into WordPress a lot simpler but this is what I’ve got at the moment. I am only using a fraction of what the FeaturedBox can do because I am only displaying pictures in my FeaturedBox. The FeaturedBox actually lets you display videos, flash and HTML objects.

About the Author

admin_mwcVince is a web designer & developer with a passion for creating web sites with clean and functional designs and source code that is valid, efficient, readable, secure and search engine friendly.

Vince is also an animal lover and vegetarian. He is currently taking his first baby steps to realise his dream of living off-the-grid in Australia so that he can live freely in a self-sufficient and eco-friendly manner.

Similar Posts

11 Comments On “How to Create a jQuery Slide Gallery with WordPress Posts”

AbsoluteZero

On 18th June 2010 6:13 PM, AbsoluteZero said:

I’m very eager to try this. I think you left some text out. I’m pretty sure I could figure it out, but it would be reassuring to see it.
——————————————-
Add the following code in between the tags of your header.php template file.

{missing text}

Please replace the “TEMPLATE” text with your theme’s directory name.

{missing text}

AbsoluteZero

On 18th June 2010 6:23 PM, AbsoluteZero said:

Also please advise where “new WP_Query(‘cat=120&posts_per_page=4′);” where goes in text.

Thanks

Vincent

On 19th June 2010 3:35 AM, Vincent said:

Sorry for the missing code. They must have went missing after I switched to the HTML mode of my visual editor in WordPress.

The code “new WP_Query(‘cat=120&posts_per_page=4′);” goes where you want your FeaturedBox to appear. It could be your home page template or your page template or whatever.

AbsoluteZero

On 21st June 2010 6:48 PM, AbsoluteZero said:

Thank you very much!!!! I finally got it working!! Yay!!!! I had to tweak “$” to “jQuery” because there was a conflict with a preexisting jquery plugin and/or script.

Now my new problem is that I can’t get the slideshow to show more than 3 slides. I’ve altered this code “new WP_Query(‘cat=120&posts_per_page=4′);” and I’ve even tried “new WP_Query(‘cat=120&showposts=4′);”
but whenever I add a new image it just delets the first image from the slideshow. I’m very close to getting this ready for primetime. Please advise. And thanks again!

AbsoluteZero

On 21st June 2010 6:58 PM, AbsoluteZero said:

Disregard last comment. User error! It’s working perfectly now! Thanks a bunch!

AbsoluteZero

On 21st June 2010 9:01 PM, AbsoluteZero said:

Is there any means already built in to add a next, prevvious and pause buutons? For example see http://www.historynet.com

Thanks

Vincent

On 22nd June 2010 1:00 AM, Vincent said:

I think the closest to previous and pause buttons would be “Example 4″ in the FeatureBox package?

olatrop

On 29th August 2010 7:31 PM, olatrop said:

Love your blog, it’s exactly what i am hoping to add on my next theme. I however have an issue getting it to work on my theme. i need help and would be glad if you can help me with the integration on my theme. I will send you my email vial your contact form.

XO39

On 28th November 2010 2:43 AM, XO39 said:

Hi Vince,

Thanks for the very nice tutorial. However, it seems that the code is broken in many places, and I can’t make it to work properly. There is something wrong and I can’t find what it is.
If you can correct the code and post it again, it will be much appreciated.

Regards

-XO

XO39

On 29th November 2010 5:07 AM, XO39 said:

OK, I got it finally to work, but I’m wondering if there is a way to pause the slideshow when hovering on an image or on the navigation, that’s is the only missing feature I’m interested in.

Vince Law

On 9th December 2010 11:23 AM, Vince Law said:

I am not sure how to pause the slideshow.

Post a Comment