How to Integrate SmoothGallery into WordPress

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:

  1. jd.gallery.css
  2. mootools.v1.11.js
  3. jd.gallery.js

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

1
2
3
4
5
<head>
<link rel="stylesheet" type="text/css" media="screen" href="<?php echo bloginfo('template_directory'); ?>/css/jd.gallery.css" />
<script type="text/javascript" src="<?php echo bloginfo('template_directory'); ?>/js/mootools.v1.11.js"></script>
<script type="text/javascript" src="<?php echo bloginfo('template_directory'); ?>/js/jd.gallery.js"></script>
</head>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<head>
<?php
#DISPLAY SMOOTHGALLERY
if(is_home())
{
?>
<link rel="stylesheet" type="text/css" media="screen" href="<?php echo bloginfo('template_directory'); ?>/css/jd.gallery.css" />
<script type="text/javascript" src="<?php echo bloginfo('template_directory'); ?>/js/mootools.v1.11.js"></script>
<script type="text/javascript" src="<?php echo bloginfo('template_directory'); ?>/js/jd.gallery.js"></script>
<?php
}
?>
</head>

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”.

How to Integrate SmoothGallery into WordPress

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

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!--INITIALIZE SMOOTH GALLERY-->
<script type="text/javascript">
function startGallery()
{
	var myGallery = new gallery($('myGallery'),
	{
		timed: true,
		showCarousel: false
	});
}
window.addEvent('domready', startGallery);
</script> 
 
<div id="myGallery">
<?php
#RETRIEVE THE SMOOTH GALLERY POSTS
$smoothgallery_posts = new WP_Query('cat=120&posts_per_page=5');
 
#DISPLAY SMOOTH GALLERY ELEMENTS
while($smoothgallery_posts->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))
	{
	?>
		<!-- SMOOTH GALLERY ELEMENT - START -->
		<div class="imageElement">
			<h3><?php the_title(); ?></h3>
			<?php the_excerpt(); ?>
			<?php
			#SMOOTH GALLERY URL EXISTS
			if(!empty($url))
			{
			?>
			<a href="<?php echo $url; ?>" title="Read more" class="open"></a>
			<?php
			}
			#SMOOTH GALLERY URL DOES NOT EXIST - USE POST URL
			else
			{
			?>
			<a href="<?php the_permalink(); ?>" title="Read more" class="open"></a>
			<?php
			}
			?>						
			<img src="<?php echo $picture; ?>" class="full" alt="<?php the_title(); ?>"/>
			<img src="<?php echo $picture; ?>" class="thumbnail" alt="<?php the_title(); ?>"/>
		</div>
		<!-- SMOOTH GALLERY ELEMENT - END -->					
	<?php
	}
}
?>

Let me explain how my code works…

1
2
#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

How to Integrate SmoothGallery into WordPress

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:

118
119
120
121
122
123
124
125
126
127
128
129
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:

118
119
120
121
122
123
124
125
126
127
128
129
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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
*: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.

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
/* 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…

194
'backgroundPosition':"center center",

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

194
'backgroundPosition':"center left",

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

194
'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.

About the Author

Similar Posts

Facebook Comments

-->

23 Comments On “How to Integrate SmoothGallery into WordPress”

On 18th October 2008 10:24 AM, Christian Schenk said:

You’re definitely right that my website isn’t very good at explaining how to use the plugin. I’m currently rewriting everything in the hope that it’ll be much easier for you to understand my work.

On 26th October 2008 9:43 PM, NaSHoOo said:

Hi!,

first of all, sorry for my english, im learning it slowly…

I want to give you my congratulations for this tutorial, its just what im looking for…

But, i have a problem when i insert it on my WP theme…

Can you give me your email and talk about that? Please, i really need your help…

Thanks! :-)

On 28th October 2008 10:45 AM, NaSHoOo said:

Please, i really need help. Anyone can help me with the smoothgallery integration in my theme??

Thanks for all

On 29th October 2008 4:05 AM, Vincent said:

I have replied to your email but you did not tell me what your specific problem was even after I asked you about it. I am not sure how to help you if you cannot define the issue.

On 29th October 2008 12:45 PM, NaSHoOo said:

Hi Vincent,

first of all, thank you for your answer. I will send you an email with 2 screenshots showing you what happens ok?

And again, thanks for your help.

Greetings

On 29th October 2008 1:17 PM, Vincent said:

Sure no problem. I will help you.

On 11th November 2008 1:13 PM, hubba said:

hi vincent,

I have a problem to make a URL appear in the smooth gallery info pane . how do I go about doing that? I am using nextgeneration smoothgallery plugin for wordpress.

On 12th November 2008 2:03 AM, Vincent said:

Sorry hubba, I tried using the nextgen smoothgallery plugin but I could not get it up and running the way I wanted it to work.

This tutorial does not use any WordPress plugin.

On 12th November 2008 7:56 AM, hubba said:

hello vincent

Thank you for taking the time to do that!

I know it does not use the plugin but you were kinda using the same libraries with some slight modifications right?

But the image management in your code here does not quite flow in with ngsg concept. I’ll clarify what I meant in a bit..

nextgeneration smoothgallery concept seems to be ( yes, I am not sure.. but I feel this is only logical .. can’t find any good conclusive summary about nextgeneration smoothgallery .. so I have to come up with my own) that images can be classified into a galleries or albums without having them on a post or page first. The presentation of these images in the gallery/albums are then being done by smoothgallery part of the plugin when the user use the shortcodes like [smooth=galleryid] in their post or page in their wordpress site.

the portion where I say I will clarify what I meant about your intergration method does not quite flow ..is probably because of my ignorance in understand and reading your code. So I went back and re-read your article again.

So please correct me if I am wrong :

Your intergration method is based on the assumption that:
1. for every post /page that has an image (one image) you will pull out the image from the post/page (your example here is about the posting but can be used for pages as well by just changing the function used )

2. and display the images in a smoothgallery in the home page of the site.

3. the gallery has the extra ability for a user/reader to click on a image in your gallery on the home page to go to another alternative URL or go to the the post/page where the image is first being posted.

4. You are using the default image management provided by wordpress itself.

5. this is the reason why you are able to assign a custom field to your image (which is on a post already and make your code works.

Am I correct in the above? Please kindly correct me if I am wrong.. so that I can try to formulate my targert on how to approach this modification for nextgeneration smoothgallery on my site.. or try to fix up my site to adapt your approach and still achieve the same intended output.

phew.. that was alot to type.. thank y ou for reading this.. please do let me know if I am correct about your integration assumption.

Thanks. hubba.

On 13th November 2008 12:13 AM, Vincent said:

“1. for every post /page that has an image (one image) you will pull out the image from the post/page (your example here is about the posting but can be used for pages as well by just changing the function used )”

I can use an image for my SmoothGallery even if it is residing on another web site. I manually enter the URL of the picture into the “picture” custom field. It does not have to be a picture that belongs to a post or page.

“3. the gallery has the extra ability for a user/reader to click on a image in your gallery on the home page to go to another alternative URL or go to the the post/page where the image is first being posted.”

This is controlled by adding the a URL of your choice to the “url” custom field. If you do not enter this, it will simply link to the post.

========

Please note that my implementation uses WordPress posts to display the content in the SmoothGallery and not some gallery plugin. I do use NextGen gallery but not with SmoothGallery because I could not get it to work like this.

On 13th November 2008 7:33 PM, David said:

How do you adjust the positioning of the entire gallery? I am trying to get it in a particular place on my site and cannot figure this out.

On 15th November 2008 12:42 PM, Vincent said:

To adjust the positioning, you need to know how to use CSS. I cannot offer you tips on how to display it on your web site because I have not seen it.

Here are few general tips…

- Adjust the margin and padding
- Set a fixed width or set display: block;
- Do not put the smoothgallery div within another div

On 19th December 2008 12:53 AM, Logeuie said:

I’ve been working at this all day, but nothing is working. My specific problem is that i’ve followed this tutorial step by step but when I go into “Pages” and load in the info then I try to preview it nothing shows. The page nothing comes up. Im not sure if im doing something wrong when I create the gallery.php or what? Let me know what you think the problem is, thanks in advance

On 30th December 2008 3:16 AM, Vincent said:

You are not supposed to copy and paste the code in a WordPress page.

You are supposed to create a .PHP file in your text/HTML editor and upload it into the wp-contents/themes/themeXXXX/ folder where “themeXXXX” is the theme you wish to add the SmoothGallery to.

On 18th February 2009 1:13 AM, Nick said:

Thanks for doing all this, great! I have one question: what do I do with the code in Step 5? Do I make a gallery.php file or what?

I probably just missed something…

On 13th April 2009 7:08 PM, dylanmichael said:

this is exactly what I’ve been looking for, however I’ve run into some problems on installation. If you could email me so we could figure something out, I’d really appreciate it. Love the work.

dylanmichael
star@gmail.com

On 2nd August 2009 12:31 PM, melvin said:

Hi,

My site as follows:
http://www.dynadi.com/wordpress/?p=76

I can’t seem to find the problem. Slide is not showing. Could someone kindly help me on this? Thank you so much.

On 4th February 2010 8:03 PM, virg said:

Hello thanks for the tutorial! I integrated the smooth gallery but for some reason it display the content from my page instead of posts. Is there a reason for that?

On 14th June 2010 11:20 PM, AbsoluteZero said:

Hello. This is the third permutation of Smooth Gallery installation I’ve tried. I think it would be ideal. But I keep getting the “Handler could not be removed” error. Can you point me in the right direction?

Thanks,

On 15th June 2010 4:28 AM, Vincent said:

I have given up on the SmoothGallery. Try FeaturedBox instead if you are using the jQuery library.

On 15th June 2010 5:46 AM, Vincent said:

Check out my blog post on the FeaturedBox on 17 June when it is published:

http://www.maverickwebcreations.com/2010/06/17/create-jquery-slide-gallery-wordpress-posts.html

On 15th July 2010 8:34 AM, Dan said:

The fix for the arrows for smoothgallery does not seem to work. As the website for jondesign is down I was wondering if you could help. You are my last resort :)

thanks

Dan

On 16th July 2010 4:03 AM, alleyoopster said:

Hi,

I am using smoothgallery in wordpress with the nggallery. Everything is setup and working really well, but IE does not animate the arrows as it does in other browsers. I have tried the fix above for the arrows and it has no effect. Can you please tell me what else I can do? I would use another gallery, but I do not know of another galley that has the features I want, is customizable, is jscript and works with nggallery

thanks
Dan

4 Trackbacks On “How to Integrate SmoothGallery into WordPress”

Post a Comment


(Required)


(Required)