WordPress SmoothGallery Plugin

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.

Bergpark - Bridge

Another stunning picture.

Bergpark - Bridge

Bergpark - Aqueduct

Wow! That's awesome.

Bergpark - Aqueduct

I’m collecting real world examples where this plugin was used: if you’re interested have a look at the showcase page.

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 smoothgallery with its value set to On
  • 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:

  1. add a # at the beginning of line 43 and 44
  2. remove the # from line 45 and 46

The plugin now uses the new version; currently SmoothGallery 2.1beta1 with Mootools 1.2.

iFrame it

Embedding the SmoothGallery inside an iFrame has several advantages:

  1. the JavaScript for SmoothGallery doesn’t interfere with incompatible frameworks like jQuery, PrototypeJS that you’re probably using on your site
  2. you can have more than one gallery on a single page

Just add iframe=1 as 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 got h:250 and i:false in 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. 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.

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.

  1. Open the file config.php that comes with the plugin in an editor, search for ENABLE_FLICKR and ENABLE_PICASARSS and change the value from false to true for 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.
  2. 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.

In case you want to resize images on the fly there’s a parameter called imgmax that you can use. This parameter special to Picasa will resize the image to fit in the frame of SmootGallery. Here’s an example:

[smoothgallery iframe=0 width=640 height=480 embedLinks=false
 timed=true delay=6000 bordercolor=fff imgsize=640x480
 picasaurl=https://picasaweb.google.com/[...]/4711?imgmax=640]

Notice the imgmax parameter at the end of the picasaurl.

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:true to the custom field or add useReMooz=true as 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_THUMBNAILS in the file config.php to true. Furthermore make sure that the directory cache under smoothgallery/extra is read/writable by the webserver.

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:

  1. under Advanced Options on the edit screen scroll down to SmoothGallery and use the generated HTML markup
  2. 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 id of 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=150x150 to 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 flickrphotoset to show images from a particular set. Hint: when you click on a set in Flickr, in the URL it says /sets/numbers#: that number is the one you should use with flickrphotoset.
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 function getImageDirectory and add the attribute dir to the shortcode pointing to the path in the array, i.e. dir=0 for the first path, dir=1 for 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.

Message from Certkiller We offer 642-436 training with braindumps that include custom design templates and other WP themes to help you pass 640-816 exams.

633 comments ↓

« Older comments
Newer comments »
  • Martin says:
    March 28, 2008 at 6:51 am
    Hi!

    Ich sehe in deinen Videos, dass du einen Mac benutzt. Ich selbst benutze seit jeher den Mac. Darum bin ich etwas verwöhnt was die Einfachheit anbelangt. Mein Verbesserungsvorschlag für dein Plugin wäre: Bilder vom Desktop auswählen. Die Bilder werden hochgeladen und automatisch eine Gallery erstellt. Man muss die Bilder lediglich in der richtigen Größe auf dem Desktop haben. Das wäre Top!

    Aber ist ja nur eine Idee. Ich finde dein Plugin auch so schon toll! Vielen Dank dafür und mach weiter so …

    Gruß Martin

  • Kimberly says:
    March 31, 2008 at 6:49 pm
    I’ve just selected your great theme LivingOS UPSILON 1 for my website but I can’t figure out where or how to change the photo gallery images and photo titles.

    I uploaded the folder smoothgallery into the plugin folder at the /wp-admin/plugins.php location but smoothgallery isn’t showing up to be activated. Did I even need to do that since the default photos are already showing quite well?

    Thanks for your help.

  • Christian Schenk says:
    April 1, 2008 at 6:18 am
    Hi Kimberly,
    I’m not the author of this theme, it’s Tim Hyde. The theme and this plugin aren’t related to each other, so you don’t have to upload my plugin.
    Instead have a look at the theme’s folder. There’s a file extra.php and you can configure the gallery there. If you need help with that write me an e-mail or contact the author of this beautiful theme here.
  • Manny says:
    April 6, 2008 at 6:09 am
    Hi Christian, thanks for the plugin.
    Is it possible to go into more detail on how to use the plugin on the home page or a page that is static? I read your reply to one of the comments regarding this issue, but I’m a novice when it comes to CSS so any additional information would be appreciated.

    Thanks.

  • Jeff Payne says:
    April 6, 2008 at 6:25 am
    Hello Christian,

    Thanks for taking my question. I have been using the Revolution theme for a website at http://www.trustpointlending.com. I have a SmoothGallery installed and works great as a plugin. You can see it perfectly in Firefox the far right column at top before the header. However in IE it makes that one column go wacko. Any advice. I am not an expert at this stuff so please if possible give me step by step. Thank you for your site and your advice.

    Most grateful,
    Jeff

    Jeff Payne

  • ceti says:
    April 7, 2008 at 3:26 pm
    Hi Christian,

    This is a great little plugin. Thanks so much for your efforts!

    However, I think WordPress 2.5 broke it somehow as the exact same code installed on a page does not work anymore. Sorry I can’t provide more details but maybe others have had the same problem.

  • ceti says:
    April 7, 2008 at 3:36 pm
    Never mind about that last post, my reinstallation was just incorrect. My university server just has complex settings, and changing those helped.

    Works perfectly!

  • Abel says:
    April 9, 2008 at 9:23 am
    Hi Christian,

    Are there known issues in running smooth gallery plugin in WordPress 2.5 ? My gallery seems not to work anymore after upgrading. I see you also upgraded this blog to 2.5 and your example above won’t display as well…

    Thanks!

  • Abel says:
    April 9, 2008 at 9:58 am
    @Manny

    Is it possible to go into more detail on how to use the plugin on the home page or a page that is static? I read your reply to one of the comments regarding this issue, but I’m a novice when it comes to CSS so any additional information would be appreciated.

    You may watch the how to videos here.

  • Christian Schenk says:
    April 16, 2008 at 9:23 am
    Hi Abel,
    this plugin should work just fine with WordPress 2.5. My example wasn’t working because I forgot to remove Prototype after upgrading.

    Maybe you’re interested in this post.

  • Abel says:
    April 16, 2008 at 12:17 pm
    Hi Christian,

    Thanks for that info :) Great support as usual!

  • ceti says:
    April 18, 2008 at 3:25 am
    Just a quick note: is absolutely necessary to include in your theme, preferably in your universal footer before and maybe even within the last .

    Some themes are poorly designed and don’t include this call, which is absolutely necessary for embedded PHP to function.

    Try this before going through your wordpress install and disabling a bunch of things.

  • David Stembridge says:
    April 21, 2008 at 1:19 am
    Hi Christian,
    have you tried using the plugin on Safari on a Mac?
    http://www.fbcwaynesboro.org/smooth-test
    is working great on firefox; but the’s a javascript error when it is loaded on safari.(javascript:void(0)
    Any ideas?
    Thanks! David
  • David Stembridge says:
    April 21, 2008 at 1:21 am
    Oh… one more thing, how do you get rid of the box that fades in at the bottom, when there is no title s description referenced? I’d actually like to have no arrows, or even the little light thing in the center showing, just the image fading. Is this possible?
    Thanks again!
  • David Stembridge says:
    April 21, 2008 at 2:50 am
    Ok, I figured it out, I added the following under custom field:
    it all works like a charm now!
    h:375
    w:600
    t:true
    d:4000
    showInfopane: false
    a:false

    I can now move to my home page!
    Thanks Christian!!!

  • Christian Schenk says:
    April 21, 2008 at 6:05 am
    Hi David,
    great that you figured it out yourself, I wasn’t fast enough to respond to that ;)
    @Safari: no problems so far, at least not on my page. So I guess some other script causes this error.
  • dinakar says:
    April 25, 2008 at 5:50 pm
    Hi christian,

    I have added the plugin NexGen gallery and then added the add on Smooth Gallery for it. I have created the gallery by specying [smooth=7, 400, 400, false, true, false, true]in my post. Am able to get the pictures on my post. But there is one problem. Instead of getting the full image in that 400×400 frame, am getting only some part of the entire image.(as my images are 1600*1200). But i want the entire image to be shown in that 400*400 frame(as shown in the example provided in this page). How can i get this done

    Regards
    Dinakar

  • Christian Schenk says:
    April 27, 2008 at 8:32 am
    Hi dinakar,

    But i want the entire image to be shown in that 400*400 frame(as shown in the example provided in this page). How can i get this done

    Resize the large pictures to 400×400 pixels with some image manipulation program; I’m using the GIMP for this.
    For issues with the SmoothGallery plugin for NextGen you may want to ask your question here.

  • skyle says:
    April 27, 2008 at 8:14 pm
    I searched for a question or explanation on the image source location for the plugin but could not find. Is it possible to designated a folder for images to be drawn from for the slideshow or does the name of each image need to be manually typed in every time you add an image? I suppose the text has to be linked to the image in some way if you’re using that feature. So then how about MYSQL where images and text can be linked and stored, and then pulled into the carousel? Maybe this is the wrong plugin but I’d love to make it work this way, even if the text for the images are derived from each sub-folder that they could be placed in. I would much appreciate your ideas.
  • Christian Schenk says:
    May 3, 2008 at 7:13 pm
    Hi everybody,
    I added a new feature: If you’re using WordPress to upload images, attach the images you’d like to show in a SmoothGallery to your post or page and the markup will be generated for you. All you have to do is to copy and paste the HTML from the box saying SmoothGallery located at the bottom of the Advanced Options on the edit screen. Check out this video.

    Furthermore I setup a changelog here that should help you to track the changes better.

  • Elle says:
    May 6, 2008 at 7:53 am
    At the risk of sounding like a broken record, I would like to say: great plugin and great videos, but… I’m having some trouble. I also am using eshop plugin but no js libraries. The error I get is:
    el.getElement(options.linkSelector) has no properties
    [Break on this error] link: el.getElement(options.linkSelector).href||false,
    jd.gallery.js (line 161)

    When I set SMOOTHGALLERY_USE_NAMESPACED to true in config.php line 29, my error changes to:
    $ is not a function
    [Break on this error] var myGallery = new gallery($(‘myGallery’), {…

    Any idea what is the problem?
    Thanks in advance.

  • Christian Schenk says:
    May 6, 2008 at 11:32 am
    Hi Elle,

    The error I get is:
    el.getElement(options.linkSelector) has no properties

    This happens when the HTML markup for the gallery is missing a link to the large images. There’re two ways to fix this:

    1. don’t advice SmoothGallery to use the link to the large images by adding l:false as an option to the custom field of your post/page
    2. add an anchor tag to each imageElement in the gallery

    The code for solution two looks like this:

    <div id="myGallery">
 <div class="imageElement">
  <!-- ... other elements ... -->
  <!-- make sure that you've got the following line ... -->
  <a href="http://[...]/image.jpg" title="open image" class="open"></a>
  <img src="http://[...]/image_thumb.jpg" class="full" alt="Image" />
 </div>
<!-- ... -->

    The second error might be a problem with this plugin. I’ll have a closer look at this soon.

  • Elle says:
    May 6, 2008 at 9:19 pm
    1st solution worked. Thanks :)
  • ceti says:
    May 7, 2008 at 5:05 pm
    Just a quick note, in the new 1.8 version, styling to align:right no longer seems to work for some reason. However, substituting float: right worked.
  • matt mcclard says:
    May 7, 2008 at 11:16 pm
    Hi, I really want to use this plugin it looks great, but I am seeming to have some problems with it. If I just plug in the markup, I can see the images fine. However if I add the Custom Field everything disappears. I read up the page that I need to make sure that I have wpfooter() in my footer, but when I put this in I get an error that the function doesn’t exist. Is it supposed to be . I am using WordPress 2.5.1. And at present I am not using any other plugins. Any help would be much appreciated.

    thanks

  • matt mcclard says:
    May 7, 2008 at 11:17 pm
    uh oh it took out my code. is it supposed to be wp_footer() instead? sorry :(
  • Giovanni says:
    May 8, 2008 at 2:14 pm
    hello
    when I upload plugin smoothgallery 2.0 in my “plugin folder” of wordpress I don’t show it in plugin page.

    If I upload 1.8 versione and paste code into the post I see image in normal mode and not with smoothgallery effect.

    why?

  • Christian Schenk says:
    May 8, 2008 at 2:28 pm
    Hi Matt, Giovanni,

    @Matt: yes, it’s wp_footer() like so:

    <?php wp_footer(); ?>

    @Giovanni: SmoothGallery and this plugin haven’t got anything in common per se – this plugin just bundles SmoothGallery and makes it available to WordPress; just uploading SmoothGallery won’t cut.

    [...] and paste code into the post I see image in normal mode and not with smoothgallery effect.
    why?

    Make sure the following is true:

    • plugin is activated
    • markup for the gallery is in the post
    • post has a custom field smoothgallery
    • there’re no JavaScript errors (e.g. test with Firebug)
  • Emilie says:
    May 12, 2008 at 8:35 pm
    for the life of me I cannot get this work. I don’t have much html experience but I’ve followed the instructions word for word and nothing. Also, your introduction video is “no longer available” so I don’t know if I’m missing something but I can’t get this to work at all. I am so frustrated right now -please help
  • Christian Schenk says:
    May 13, 2008 at 7:03 am
    Hi Emilie,
    Since the videos are hosted on YouTube I can’t guarantee that they’re available 24/7, but the Introduction is still here.
    I’m sorry to hear that you’re experiencing frustration with this plugin. I’ll write you an email, so we can figure this out…
  • Can you spell cacophony? » links for 2008-05-19 says:
    May 19, 2008 at 5:38 pm
    [...] WordPress SmoothGallery plugin (tags: @inbox) [...]
  • twincascos says:
    May 27, 2008 at 11:39 am
    Hello Christian, Thanx alot for the plugin, looks great. Although it fails to work for me so far…
    I have two questions: do you plan to upgrade the mootools to 1.2? would you consider switching the slideshow script to Slideshow2? It’s a much more robust slideshow , I believe.

    As for my errors, firebug says:

    el.getElement(options.imageSelector) has no properties. 
image: el.getElement(options.imageSelector).getProperty('src'),

    My html in the post says:

    <div id="myGallery">
<div class="imageElement">
<h3>title</h3>
<p>descript</p>
<p><img src="http://play.daivmowbray.com/../image.jpg" class="thumb" alt=""/>
</div>

    Perhaps I need a link or anchor with each image, I’ll try that now.

    Thanx for any comments and/or help

Leave a Comment

Hint: consider reading the FAQ before submitting a question.