WordPress Plugin: Colorbox

Colorbox Galleries

Download Plugin: bryans_gallery_colorbox v. 1.2

As with any WordPress Gallery, you upload images while on a Page or Post. Then, type in the shortcode [gallery_colorbox] in the body of the post. Here is the code I am using to access my built-in Colorbox pop-up gallery above:

[gallery_colorbox]

For reference, below is how the standard WordPress Gallery Shortcode works (the images open as a new page). If you want to fetch a gallery that is ‘attached’ to another page you need to use that page’s ID number, so I had to do that here as well:

[gallery id=”1313″]

There are many options implemented by Colorbox. To use them, type a shortcode option like this:

[gallery_colorbox id=”1313″ option=”dark”]
The way the ‘option’ works is simple – just look in the plug-in folder and you’ll see a folder called ‘light’ and ‘dark’, among others. The contents are directly from the Colorbox demo site above. You can easily alter or create your own ‘option’ by creating a new folder. Colorbox will look into the folder for the CSS and images if needed.

Unfortunately, I can’t show a preview of that because having multiple Colorbox styles on the same page doesn’t really work. But, you can check out the examples on colorpowered.com or just try them out yourself and have fun!

Finally, for my plug-in I have not rewritten any Colorbox code. Therefore, you can easily update to the new code by dragging in the current version of Colorbox and any new optional styles as folders.

Colorbox Slideshow and other options

Above is a Colorbox gallery that uses the ‘works’, every feature specified. Code that makes it work is below:

[gallery_colorbox option=”light” columns=”6″ popup=”medium” size=”thumbnail” transition=”elastic” speed=”500″ slideshow=”true” slideshowSpeed=”1000″ slideshowAuto=”true”]

Below is a list of the default values and options:

‘option’ to pick the visual style of your gallery (“light”, “grey”, “dark”, “arrows_dark”, “arrows_light”, “buttons_dark”, “buttons_light”, “framed_dark”, “framed_light”, “rounded_light”, “rounded_dark” )
‘popup’ to pick the size of the popup (“medium”, “large”, “full”)
‘transition’ to pick the way the images transition(“elastic”, “fade”, “none”)
‘speed’ how fast you want the transitions (default is “350?)
‘slideshow’ if you want your images in a slideshow (“true”, “false”)
‘slideshowSpeed’ how fast do you want the slides to advance (default is “2500?)
‘slideshowAuto’ option to not start the slides automatically (default is “true”)

As of Colorbox version 1.0, I have implemented all of the options and converted them to work within WordPress. Open the colorbox.php file in the download for details and look at colorpowered.com for documentation of what the options do.

 

7 Replies to “WordPress Plugin: Colorbox”

  1. Hi
    using the baselayerthree theme and the colorbox gallery but keep getting error messages. No other plugin activated. I really like this gallery

    1. Hi Sandra,

      Since Colorbox is built into the BaseLayer theme it is creating a duplicate installation and that makes the plug-in incompatible with BaseLayer. However, if you’d rather use the plug-in (which is a lot more flexible), then you need to open up the baselayerthree theme folder and using a Text Editor comment out the line that imports colorbox. It looks like this:

      require_once(TEMPLATEPATH . '/includes/gallery_colorbox/colorbox.php');

      You comment it out by adding two slashes in front like this:

      //require_once(TEMPLATEPATH . '/includes/gallery_colorbox/colorbox.php');

      That will allow you to use the plug-in with BaseLayer. Same is true for the Childpages plug-in.

      You may even be able to do this with the WordPress dashboard Appearance>Editor…

  3. sorry Bryan if I had read the info I would have realised colorbox was already installedso thanks for your help. just wondering how the home button can be moved to the start of the navigation bar instead of the right. Sandra

    1. You will have to edit the template theme files to do this. I believe the menu is located in the header.php file of the theme. I no longer update this theme since I am using a different theme now, so I can’t recall exactly where that is.

    1. Hi Sandra,

      Sorry to take so long, but I don’t have time to work on this project. The project is open-source, you are free to do what you want with it or find someone who is able to do what you are looking for.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.