How to Integrate SmoothGallery into WordPress

admin_mwc — Sat, 18 Oct 2008 00:00:21 +0000

I wanted to recreate the SmoothGallery effect for my own blog designs without installing the popular Options WordPress Theme. I did some research and found this WordPress SmoothGallery plugin that I found very hard to set up. Then I read a tutorial on how to integrate a slideshow in a WordPress theme and that was perfect for me.

This blog post will document my implementation of the SmoothGallery with special thanks to CatsWhoCode.com for the inspiration. I use SmoothGallery to highlight certain posts on my web site. You could use it for to display photos too. For web designers like me, you could use it to highlight your portfolio.

Step 1: Download SmoothGallery and Mootools

At the time of this writing, the latest version of SmoothGallery 2.0 and it includes Mootools 1.11.

Step 2: Copy the Javascript and CSS Files to Your WordPress Theme’s Folder

I like to organize my WordPress themes like this:

/wp-content/themes/mytheme/css – This is where I store all my CSS files other than the stye.css file.
/wp-content/themes/mytheme/js – This where I store all my Javascript files.

It does not really matter where you store the files but just make sure the following files are somewhere in your theme folder:

jd.gallery.css
mootools.v1.11.js
jd.gallery.js

Step 3: Add the SmoothGallery File References to Your WordPress Theme’s header.php File

Insert the 3 lines above in between the 2 head tags.

If you only plan to display the SmoothGallery on your home page, which is how it is displayed on WordPress blogs most of the time, use the is_home() function as above.

Step 4: Create a Category for the SmoothGallery Content

Create a new category for the posts that will be displayed in the SmoothGallery by going to “Manage” -> “Categories”.

Once you have created a category, move your mouse cursor over the category name to reveal the edit link. Take note of the category ID of the category, which is seen in the last character of the URL. e.g. cat_ID=5.

Step 5: Add the SmoothGallery Code to Your WordPress Template




have_posts())
{
	$smoothgallery_posts->the_post();
	#RETRIEVE THE SMOOTH GALLERY IMAGE URL
	$picture = get_post_meta($post->ID, 'picture', true);
	#RETRIEVE THE SMOOTH GALLERY URL
	$url = get_post_meta($post->ID, 'url', true);
	#SMOOTH GALLERY IMAGE URL EXISTS
	if(!empty($picture))
	{
	?>
		
		
			
			
			
			
			
			
			
			" class="full" alt=""/>
			" class="thumbnail" alt=""/>

Let me explain how my code works…

#RETRIEVE THE SMOOTH GALLERY POSTS
$smoothgallery_posts = new WP_Query('cat=120&posts_per_page=5');

You need to replace the number 120 with the category number you got from the previous step. You may also control the number of posts you wish to display in your SmoothGallery by changing the number in “posts_per_page=5″. For example, if you wish to display 10 posts, edit it to “posts_per_page=10″.

Once you have edited this code, it is time to post some content to the SmoothGallery!

Step 6: Add Content to the SmoothGallery

Add a new post into the category you created above. You may leave the content blank if you want but it is recommended that you include a short description of the post in the excerpt, which appears in the SmoothGallery.

I also use 2 custom fields. The “picture” custom field is compulsory and you will have to add a URL of a picture to it. The “url” custom field is optional. This field tells SmoothGallery to redirect the reader to another URL. If you ignore this, the default URL will be the post’s URL.

Step 7: Fix Some SmoothGallery Bugs!

Not a lot of people talk about these bugs but I know they can be a pain if you don’t fix them. I encountered 2 bugs when I first started using SmoothGallery:

1. Can’t Display SmoothGallery if You Only Have 1 Post

I found a fix for this at the SmoothGallery forums. Here’s what you need to do in the file jd.gallery.js:

if ((this.galleryData.length>1)&&(this.options.showArrows))
{
	var leftArrow = new Element('a').addClass('left').addEvent(
		'click',
		this.prevItem.bind(this)
	).injectInside(element);
	var rightArrow = new Element('a').addClass('right').addEvent(
		'click',
		this.nextItem.bind(this)
	).injectInside(element);
	this.galleryElement.addClass(this.options.withArrowsClass);
}

This is the original code. You need to move the code in line 128 outside the curly brackets like this:

if ((this.galleryData.length>1)&&(this.options.showArrows))
{
	var leftArrow = new Element('a').addClass('left').addEvent(
		'click',
		this.prevItem.bind(this)
	).injectInside(element);
	var rightArrow = new Element('a').addClass('right').addEvent(
		'click',
		this.nextItem.bind(this)
	).injectInside(element);
}
this.galleryElement.addClass(this.options.withArrowsClass); /* 1 image bug fix */

Once you have applied this fix, your SmoothWall will appear when you have only 1 post.

2. The Left and Right Arrows Don’t “Animate” in Internet Explorer

Again, I found a fix for this bug at the SmoothGallery forums.

*:first-child+html .slideInfoZone
{
    bottom: -1px;
}
*:first-child+html .jdGallery a.right, *:first-child+html .jdGallery a.left
{
    filter:alpha(opacity=20);
}
*:first-child+html .jdGallery a.right:hover, *:first-child+html .jdGallery a.left:hover
{
    filter:alpha(opacity=80);
}
*:first-child+html .jdGallery a.left { background: url('img/fleche1.gif') no-repeat center left; }
*:first-child+html .jdGallery a.right { background: url('img/fleche2.gif') no-repeat center right; }
*:first-child+html a.open:hover { background: url('img/open.gif') no-repeat center center;
    filter:alpha(opacity=80); }

Add the code above to the jd.gallery.css file and it should fix that bug once and for all. You should see the arrows flashing from dim to bright when you move your mouse over it.

Step 7: Styling the SmoothGallery

I can’t cover everything about styling the SmoothGallery to suit your needs here because our web site designs are different. What I can do is point out the things you should edit in the jd.gallery.css file.

/* SMOOTH GALLERY */
#myGallery, #myGallerySet, #flickrGallery
{
	display: block;
	height: 380px;
	margin: 0px 3px 10px 10px;
	border: 1px solid #EDEDED;
}
/* SMOOTH GALLERY TITLE */
.jdGallery .slideInfoZone h2
{
	margin: 0px;
	padding: 0px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 13px;
	font-weight: bold;
	color: #FFFFFF;
}
/* SMOOTH GALLERY DESCRIPTION */
.jdGallery .slideInfoZone p
{
	margin: 0px;
	padding: 0px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 13px;
	color: #FFFFFF;
}

If you would like to align the pictures in the SmoothGallery to the left or right, you need to apply a fix to the jd.gallery.js again…

'backgroundPosition':"center center",

The code above is the default setting that aligns the picture to the centre of the SmoothGallery.

'backgroundPosition':"center left",

Change the second center word to left and you picture should align to the left of the SmoothGallery.

'backgroundPosition':"center right",

Change the second center word to right and you picture should align to the right of the SmoothGallery.

A Live Working Example…

Just take a look at my home page to see it in action. I hope this post helped you in some way to enhance your WordPress site with the SmoothGallery script.

In a future post, I will cover more advanced SmoothGallery enhancements to make your web site look cool by hiding the SmoothGallery posts outside of the SmoothGallery. The biggest disadvantage of using SmoothGallery this way is that it requires you to sacrifice a category and the posts look kind of odd in your blog archives.

Maverick Web Creations » smoothgallery

How to Integrate SmoothGallery into WordPress