Activation

Check to activate Colorbox for current blog. When inserting an image into a post, do not forget to choose "as a link to original image" option

Theme

Choose Colorbox theme. You may then personalize your theme by following instructions for personal files in advanced configuration.

Zoom icon

Colorbox can display a zoom icon on thumbnails. Choose its position, right or left, it will be displayed over the thumbnail when hovering it with the mouse. The icon may also be displayed permanently.

Personnal files

Included themes

Colorbox ships with 6 themes to choose its modal window's appearance. You may modify any of them by adding your personnal stylesheet and images.

Lightbox Classic theme is special : it is designed to look exactly like the former Lightbox plugin by Olivier Meunier, and has no view counter and no slideshow commands.

Modifying themes

Principle

Colorbox modal window can be entirely styled using CSS, and its navigation images modified.

Colorbox allows to define for each theme a personnal stylesheet, stored in your public or your theme folder, and whose rules will overwrite existing theme rules.

Here is how to do it:

Create a personnal Colorbox theme directory

You can store your pesonnal files in:

• your public media folder
• you blog's theme folder

At the root of the chosen location, first create the necessary sub-directories to get the following hierarchy :

colorbox/themes/x/

where x is the number of the theme you wish to modify. In this directory you will store all your modifications on the theme. Repeat this operation and change each time x for the corresponding number if you wish to modify several themes.

Create your stylesheet

Add now in directory x a stylesheet named colorbox_user.css with only the rules you want to apply instead of theme rules, i.e.

#cboxOverlay{background-color:red;}

if you only wish to change modal window background color.

Add images

If you wish to modify modal window navigation graphics, place your images in the personnal directory, and refer to them in colorbox_user.css.

Selectors

By default, Colorbox is activated only for images within posts.

If you wish to activate it for supplementary blocks, type here the list of selectors, comma separated, corresponding to these blocks.

For example if you wish to activate Colorbox for blocks #sidebar and #pictures, type:

#sidebar,#pictures

in the field. Please note that images contained in the blocks will be considered as being in separate groups for images counters and slideshows.

If you leave this field empty, only post images will be displayed by Colorbox.

Effects

Modal window

Dimensions

Javascript

Goodie

Colorbox display more than images, here are some instructions to start playing with:

html content

Create a file named test.html containing the html code you want Colorbox to display, for example

<p>Test</p>
      <p><img src="/public/test.jpg" alt="" /></p>

Send this file and the image to your public folder.

Type this (wiki syntax) in your post:

///html
      <script type="text/javascript">
      $(document).ready(function(){
      $(".html").colorbox();
      });
      </script>
      
      <p><a class="html" href="/public/test.html" title="My pretty html">html</a></p>
      ///

When you click on the link, test.html is displayed by Colorbox.

Other content

On the same idea, if test.html contains a video player code within its object tags, the video will be dispalyed in Colorbox.

Possibilities offered by this system are numerous and interesting...