jGallery for WordPress

A recent WordPress project required the ability to display a set of images in a gallery format within pages and posts, with thumbnails and previous/next links in the sidebar. Every slideshow plugin I’ve seen packages gallery components into one container, requiring thumbnails or navigation to be stacked immediately above or below the image display. I needed more flexibility, so I decided to write a plugin that allows these components to be placed anywhere within the page or post template.

A modular system

Images, previous/next navigation, thumbnails, titles and captions may be used to create your gallery, in any order you choose, anywhere in a page or post template.

jGallery components may be placed within individual posts or pages through with shortcodes, or directly inside your post or page templates using jGallery functions.

Basic example using shortcodes
Shortcode options
1. Images
2. Thumbnails
3. Navigation
4. Titles
5. Captions
Advanced usage
Change log

Basic example using shortcodes

You may add galleries to individual pages or posts by using the jGallery shortcode: [jgallery].

Create a post and add a few images using the post image uploader, so the images appear in the post’s gallery. There is no need to insert the images into the post.
Drag the images into the order they should appear in your gallery, save all changes and exit the image uploader.
Add the jGallery shortcode [jgallery] where you’d like the gallery to appear in your post.
Save and view your post – a slideshow will appear, using the default options.

Shortcode options

Images

[jgallery display="images" transition="easeInOutExpo" speed="700"]

display: Set to “images” to display image component specifically.
size: Specify the size to use for image display. Valid values include “thumbnail”, “medium”, “large”, “full”, or a width and height in pixels separated by a comma: “60,60″ for an image 60px wide by 60px tall. Defaults to “medium”.
link: Set to “file” or “attachment” to link images to their original file or attachment page, respectively. Defaults to “none”.
caption_field: The image field used for captions. Defaults to “caption”, but you may alternatively use the “description” field for multi-line captions where line-breaks and some HTML formatting is preserved.
transition: The effect used while transitioning between images. Options are “fade” (default), “flash”, or any of the options available in the jQuery Easing plugin: easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint, easeInSine, easeOutSine, easeInOutSine, easeInExpo, easeOutExpo, easeInOutExpo, easeInCirc, easeOutCirc, easeInOutCirc, easeInElastic, easeOutElastic, easeInOutElastic, easeInBack, easeOutBack, easeInOutBack, easeInBounce, easeOutBounce, easeInOutBounce.
autoplay: Set to “on” for automatic looping through images. Default is “off”.
speed: The speed of image transitions, in milliseconds. This also sets the transition speed for other components.
delay: The time between image transitions, in milliseconds.

Thumbnails

[jgallery display="thumbnails" size="80,80" opacity="0.5"]

display: Set to “thumbnails” to display thumbnail component specifically.
size: Specify the image size to use for thumbnail display. Valid values include “thumbnail”, “medium”, “large”, “full”, or a width and height in pixels separated by a comma: “60,60″ for an image 60px wide by 60px tall. Defaults to “thumbnail”.
columns: Integer. The thumbnail of each row that should be given a class of “last”. You may want to apply margins to all thumbnails but those with the “last” class.
opacity: Decimal between 0 and 1. The image opacity for inactive thumbnails. Default is 0.3

[jgallery display="navigation" previous_string="*Back*" next_string="*Forward*"]

display: Set to “navigation” to display navigation component specifically.
previous_string: HTML code to display for the previous link. Wrap the part of the string that should be a link in *asterisks* (i.e. “<< *Previous*" if you don't want the double arrows to be part of the link).
next_string: HTML code to display for the next link. rap the part of the string that should be a link in *asterisks* (i.e. “*Next* >>” if you don’t want the double arrows to be part of the link).

Titles

[jgallery display="titles" title_tags="
,

"]

display: Set to “titles” to display title component specifically.
title_tags: HTML tags to wrap titles. Opening and closing tags should be separated by a comma. Default is “,
“.

Captions

[jgallery display="captions" caption_tags="

,

"]

display: Set to “captions” to display caption component specifically.
title_tags: HTML tags to wrap captions. Opening and closing tags should be separated by a comma. Default is “,
“.

Advanced usage

You may also place gallery components directly into page or post templates by calling jGallery functions directly. This could be useful if you want to always show a gallery on certain types of pages, of if you need to place certain components outside of the content area.

You may pass jGallery functions any of the shortcode options listed above, in an array:

 'file', 'size' => 'large')) ?>

Change log

0.8

Added ‘transition’ option with slide and ‘flash’ effects
Incorporated jQuery Easing plugin for scrolling effects (http://gsgd.co.uk/sandbox/jquery/easing/)
Added functions for each gallery component, to call from theme templates
Scrapped double output idea
Changed ‘fade_speed’ to ‘fade’
Description field now supports HTML

0.7

Fixed issue where image would occasionally appear before script was loaded. Images are now output twice, once inside a