This WordPress plugin helps you to embed JonDesign’s SmoothGallery in your blog.
Basically it’s this simple:
- upload some pictures to a post or page
- use the shortcode
smoothgallery - set some options
- watch your smooth gallery
You can download the plugin here.
Example
Have a look at this example. Kudos to my brother and his friends for taking these awesome pictures; thanks that I may show them here.
How to
Once you’ve activated the plugin you can start adding galleries to your posts and pages. I’ve split up this How to section into the following use cases.
- Getting started
-
Adding a smooth gallery to a post or a page is easy! Try this:
- go to the edit screen for a post or a page
- right below the input field for the title click on Add an Image
- upload some images and enter a sensible title and description
- reorder the images however you want them
- insert
[smoothgallery]somewhere in the content - add a custom field named
smoothgallerywith its value set toOn - hit save and click on View this Post/Page to see the result
If you’d like to customize the gallery check out the available options.
- Activating the development version
-
If you’d like to use the latest version of SmoothGallery just activate it in the file
config.php:- add a
#at the beginning of line 43 and 44 - remove the
#from line 45 and 46
The plugin now uses the new version; currently SmoothGallery 2.1beta1 with Mootools 1.2.
- add a
- iFrame it
-
Embedding the SmoothGallery inside an iFrame has several advantages:
- the JavaScript for SmoothGallery doesn’t interfere with incompatible frameworks like jQuery, PrototypeJS that you’re probably using on your site
- you can have more than one gallery on a single page
Just add
iframe=1as an attribute to the shortcode. If you’ve previously used the normal SmoothGallery and put all the options inside the custom field you’ll have to transfer these to the shortcode now. Say, you’ve goth:250andi:falsein your custom field then you would put this into the shortcode[smoothgallery iframe=1 height=250 showInfopane=false].Note that you don’t need the custom field anymore; just remove it. Furthermore you can’t use the shortcuts, e.g.
hforheight, use the long version instead, i.e.heightinstead of justh. Finally you can’t even use:instead of=in the shortcode either. - More than one gallery
-
All you have to do is adding the shortcode
[smoothgallery]several times to your content, with the iFrame option enabled. Have a look at the options on how to customize the appearance of the galleries.If you don’t want to use iFrames for some reason have a look at this alternative solution.
- A gallery in your sidebar or theme
-
I’ve created a separate page for this issue.
Some people want to do this because they’d like to have the images of the most recent posts inside a gallery; sometimes displayed in the header part of their theme. Read about this here.
- Images from Flickr or Picasa
-
Your images are hosted on Flickr or Picasa and you want to show them inside a SmoothGallery on your blog? No problem, follow these two steps.
- Open the file
config.phpthat comes with the plugin in an editor, search forENABLE_FLICKRandENABLE_PICASARSSand change the value fromfalsetotruefor one of them or both. If you’d like to use Flickr make sure to supply your API key (FLICKR_APIKEY) and secret (FLICKR_SECRET) as well. - Use the following attributes along with the shortcode:
flickrusername: supply your Flickr username and the most recent photos from your photo stream will be included in the gallery.flickrphotoset: use this if you want to show images from a particular set of photos.picasaurl: navigate to an album on Picasa, grab its RSS feed and supply it with this attribute in the shortcode.
Have a look at the examples to learn more about their usage.
- Open the file
- Using ReMooz to open the images
-
If you’ve linked to larger images in your SmoothGallery but don’t want them to open in a new window ReMooz comes to the rescue. Make sure to activate the development version first and keep in mind that this won’t really work if you’ve put SmoothGallery inside an iFrame.
Either add
r:trueto the custom field or adduseReMooz=trueas an attribute to the shortcode. - Generated thumbnails
-
If you’d like to use the carousel feature of SmoothGallery you’ll have to either generate thumbnails yourself or use the plugin to do this for you: just set
ENABLE_GENERATED_THUMBNAILSin the fileconfig.phptotrue. Furthermore make sure that the directorycacheundersmoothgallery/extrais read/writable by the webserver. - Custom links for images
-
By default, the shortcode generates markup that contains a link for each image to its large version. This is great if you’d like to have a pure image gallery. If you’d like to setup a gallery, say, for your featured posts with a teaser image and a link to the corresponding post, you can do this like so:
- go to Media Library
- edit an image
- supply a SmoothGallery link
and save. Once you’ve done that the image in the gallery uses the given URL.
- For control freaks
-
If you’d like to have more control over the exact markup that gets inserted inside your page, maybe you don’t want to use the shortcode but insert everything yourself. I’ve prepared two starting points for you:
- under Advanced Options on the edit screen scroll down to SmoothGallery and use the generated HTML markup
- generate the markup with this tool
No matter what you’ll use, you’ll end up with some markup that you can start customizing. Check out all the available options for full flexibility.
You also might want to check out the tool box which has got useful wizards to ease the creation of compatible markup.
Options
If you aren’t using iFrames and you don’t annotate your post or page with smoothgallery the CSS and JavaScript will not be loaded and the gallery won’t work. So, add a custom field with the key set to smoothgallery if you’d like to enable the SmoothGallery for a particular post or page. If the value is set to 1 or On the default values for the gallery will be used.
If you want to change the defaults you can use the following options. I’ve split up this section into options that come with SmoothGallery and the ones that I’ve added. It’s meant as a reference for you – so, if you’d like to change something you can look up the options here.
SmoothGallery options
Here are the most common options for SmoothGallery. If you need more: have a look at the top of the file utils.php that comes with this plugin.
| Option | Short version | Default value |
|---|---|---|
| showArrows | a, arrows | true |
| showCarousel | c, carousel | false |
| showInfopane | i, info, infoPane | true |
| embedLinks | l, links | true |
| timed | t | false |
| delay | d | 9000 |
I added some more options that aren’t part of SmoothGallery. They help you to customize the dimensions and other CSS related parameters.
| Option | Short version | Default value |
|---|---|---|
| height | h | 345 |
| width | w | 460 |
| bordercolor | b, border | 000 |
Example for the custom field
With the following code you would end up with a timed gallery that is set to 350×400 pixels and has got a white border. This goes into the custom field named smoothgallery:
w=350 h=400 timed=true b:fff
As you can see, you can use : instead of = too. Mixing the long and short version of the attribute names is okay.
Shortcode
The shortcode [smoothgallery] has got some more attributes. If you’re using the attribute iframe along with the shortcode you can use all the above plus the following attributes. Currently the shortcuts that may go into the custom field, e.g. h for height, aren’t supported here – use the long version instead, i.e. height instead of just h.
Please don’t confuse the following with the options that you can use along with the custom field – the following attributes are solely for the shortcode.
id- By default the shortcode uses the images attached to the current post or page. If you’d like to use the images attached to another post or page you don’t have to upload them again but just specify the
idof the specific post/page with this attribute. iframe- Add this parameter if you’d like to take advantage of a gallery inside an iFrame.
iframebgcolor- Adapt the background color of the iFrame. Just supply the color code without the preceding
#. imgsize- If you upload images with WordPress thumbnails will be created for you. We can try picking up these images instead of the original version with this parameter. Say, you’ve set the Thumbnail size for your images under Settings – Media to 150×150 pixels. If you add the parameter
imgsize=150x150to the shortcode the gallery will display the thumbnails instead of the originals. flickrusername,flickrphotoset- Either just supply your Flickr username and the most recent photos from your photo stream will be included in the gallery or add the attribute
flickrphotosetto show images from a particular set. picasaurl- Navigate to an album on Picasa, grab its RSS feed, supply it with this attribute in the shortcode and the gallery will use your images from Picasa.
dir- You just want to show some images that are in a directory on your webserver? Open the file
config.php, add your directory to the array inside the functiongetImageDirectoryand add the attributedirto the shortcode pointing to the path in the array, i.e.dir=0for the first path,dir=1for the second one and so on.
Examples for the shortcode
On this very page I’m using the following simple shortcode to generate the markup for the SmoothGallery:
[smoothgallery imgsize=400x266]
This will grab the images that I uploaded to this page for the gallery. The attribute imgsize says, that I don’t want to use the images with their original size, but the thumbnails that were generated by WordPress during the upload process.
Alongside this shortcode I put this into the custom field named smoothgallery:
w:400 h:266 l:false t:true d:6000
This makes sure that the width and height are set accordingly; that there’re no links to the large versions of the images; that it’s a timed gallery with six seconds between the transitions.
As you can see some options go into the custom field and others go into the shortcode. In case you’re adding the iframe attribute to the shortcode you have to supply all the options that originally went into the custom field in the shortcode; this is due to technical reasons and the way iFrames work.
If I wanted to use an iFrame instead, the above example would become (line break just for readability):
[smoothgallery iframe=1 width=400 height=266 embedLinks=false
timed=true delay=6000 imgsize=400x266]Note that you don’t need the custom field anymore; just remove it. Furthermore you can’t use the shortcuts, e.g. h for height, use the long version instead, i.e. height instead of just h. Finally you can’t even use : instead of = in the shortcode either.
The images for the gallery can be imported from virtually anywhere: Flickr, Picasa or a simple folder on your webserver just to name a few. If I wanted to show the images of my photo stream on Flickr I would use this shortcode:
[smoothgallery flickrusername=27834774@N05]
Just showing the photos of a particular set can be done using the flickrphotoset attribute. The same works with albums from Picasa: browse the albums there, copy the corresponding RSS feed and add it to the shortcode with picasaurl.
Confused ?
Are you confused because of all these options, attributes, parameters, shortcuts and shortcodes? Instead of getting angry at all this stuff please just stay relaxed, read the FAQ or add a comment with your problem to this page and I’ll try to come up with a sensible response. If that doesn’t help and you’re still puzzled I may help you out.
550 comments ↓
Hope you had a good thanksgiving, I am trying to have the link in the gallery, go to a new window, instead of in the same page, i tried removing target=_self to _blank but even if there is nothing there it still links with in. What i have is a screen shot of a video and when you click on it, it will link out to the actual video.
I am really stuck on this, so i really would appreciate any help or knowledge.
you’re using the iFrame feature? Have you tried
_parentinstead of_blank– worked for me almost always.I’m getting the Forbidden error for your plugin:
Forbidden
You don’t have permission to access /blog/wp-content/plugins/smoothgallery/smoothgallery.php on this server.
Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.
I’ve read through the comments and understand this is a server set up issue rather than a script issue. However I have set all permissions to 777 and I still get the error. The file loads fine when I access it directly from the address bar. What am I doing wrong?
Thanks.
changing the file permissions for the files that come with the plugin won’t help here. This issue came up more than once now and almost always it had to do with the web server’s configuration, i.e. from a user’s perspective it’s likely that you can’t fix this yourself, e.g. by changing file permissions or hacking your htaccess file.
I recommend asking your hosting company whether they are running an Apache web server and enabled mod_security or similar. Another problem might be some sort of “prevent hot linking” feature, disabling this may help too. I’m sorry that I can’t point you to the exact cause of this problem, there’re just too many things that can go wrong.
I’m using Hostgator and have hotlink protection disabled. I’ll google some more to see if anyone else has had this problem with Hostgator and how/if they solved it. I’m afraid they won’t change anything for me since I’m on a shared server, but if I find a fix I’ll post it here so others can benefit from it as well.
However – and I’m only writing this now so maybe other people who have this issue can find the solution right here – after I stopped receiving the
403 Forbiddenerror I started getting a brand new500 Internal Server Error.It turns out it was because I messed around with the permissions while trying to find a fix for the 403. All the folders need to be 755 and files 644. And with all, I mean the entire path to
smoothgallery.php.I fixed that and now it works like a charm.
Thanks and have a great weekend.
However I came upon a problem. I am using it with the latest wordpress and it appears to only allow me to put two images in the gallery from two different posts. if I try to add a new one it simply shows the newest two images added. is there anyway i can fix this?
It appears that it will only work for two photos at a time, where can I edit this number? thank you!
Very nice pics above…
Miker
sure, the plugin can assist you in doing just that. I recommend placing a sidebar into your theme and using the widget that comes with the plugin.
Once I activated smoothgallery, when I tried to access the website I got the following error message:
Fatal error: Call to undefined function insertsmoothgallery() in http:\\xxx\xxx\wp-content\plugins\smoothgallery\smoothgallery.php on line 123
Any suggestion?
Thanks,
are you running Windows? Some people reported this error and were using windows to test the plugin. As soon as they switched to Linux or MacOS the error disappeared. Unfortunately, I haven’t found a solution for this issue yet. Since almost nobody uses Windows to run a web server this shouldn’t be a problem in a production environment.
Thank you for your response. You are right. I was trying to figure it out for days.
For SmoothGallery-2.0 there is no problem but it is not Wordpress plug-in. When will you release SmoothGallery-2.0 for Wordpress plug-in.
Thanks
I am having an issue where my images are displaying in the slideshow, but they are also seen below it, at full size, scrolling down the page. Any ideas how to get rid of the duplicate images ?
Is there a way to pass an additional variable to start the smooth-gallery with a specific image?
Thanks.
just change the order of the images via the media library. If that’s not an option, have a look at this FAQ, scroll down to the item “How do I make the gallery go to a specific image” and you’ll see the necessary JavaScript code that you’ll have to use.
This plugin is everything BUT smooth
thank you for this feedback. Although I’ve tried to produce a “smooth” plugin I must admit that it isn’t that easy to use if you haven’t got a solid understanding of HTML, CSS, PHP and WordPress. I’ll try to improve this in the future.
Anyway, if you would tell me what exactly isn’t working for you or what you’re trying to do in general, I may assist you to implement the plugin and SmoothGallery on your site.
When i type: [smooth=id:2] i DO see the gallery but only the images in the top navigation and when i click them the screen stays blank, and when i click in the blank space, the picture opens in a new window.
http://www.zwarthuisje.nl/blauw/?p=35
See for yourself.
Thanks in advance
since you are using an extension to the plugin NextGen gallery which hasn’t got to do anything with my plugin, following my instructions won’t help you.
Please have a look at the SmoothGallery plugin for NextGen here and ask those guys how to integrate the gallery.
If you switch to my plugin I’ll be happy to help you resolving any issues you might experience using it.
I installed the plug-in, loaded images, and see the gallery running, but the images are scrolling too fast. I set delay to 9000, but still, the images are looping too fast. Why is this? What can I do to change this?
You made good plugin,10+ for plugin.I have a little problem.Everything is fine,i made no white space around slide show,no info panel, everything was fine.I made new page and type id of page in smooth gallery short code.It runs very well,but problem is when i click on image.When i do this,it open post links not in new window,it’s opened in same window instead of slide show with scroll bar.I dont know how to fix this.This is not easy plugin like most wordpress plugins.
Cheers, garginis
Thanks
if you’ve uploaded the images to a post/page and are using the shortcode, it’s as easy as opening the media gallery for the particular post/page and reordering the images. Just drag and drop the images up and down or change the numbers in the right column.
Thanks.
You made good plugin,10+ for plugin.I have a little problem.Everything is fine,i made no white space around slide show,no info panel, everything was fine.I made new page and type id of page in smooth gallery short code.It runs very well,but problem is when i click on image.When i do this,it open post links not in new window,it’s opened in same window instead of slide show with scroll bar.I dont know how to fix this.This is not easy plugin like most wordpress plugins.I tried to change add_pixels_to_iframe to 40 but it’s not working.
Cheers, garginis
please have a look at this FAQ item which tells you how to open links in another window when using the iFrame.
cheers,Garginis
Leave a Comment