Skip to main content
Skip table of contents

Implement expand-on-click images

This article describes how to implement expand-on-click images.


This is what images look like when they expand after being clicked:

What you need

Including the required libraries

  1. Download Colorbox and extract the Zip file.

  2. Go through the example directories and open the index.html to look at a preview.

  3. Decide on which look and feel you want to go with.

  4. Open your theme editor and include the jquery.colorbox-min.js and CSS file of your example into your template.

If you are using the Scroll Web Help Theme, your files should be looking something like this:

Your include-htmlhead.vm:

Your file structure:

Starting the plugin

If you are using the Scroll Web Help Theme, simply include this code into your theme.main.js file on line 83.

$('.wiki-content img').each(function() {
   $(this).wrap('<a class="sp-imgbox" href="'+$(this).attr('src')+'"><a>');

If you don't use the Scroll Web Help theme, include the code below in an external script file to start the plugin.

$(document).ready(function() {

    $('.wiki-content img').each(function() {
        $(this).wrap('<a class="sp-imgbox" href="'+$(this).attr('src')+'"><a>');

To target only the images of your Confluence pages, you should reference the class of the container – in the example above, it is noted as .wiki-content. Usually, you want to apply Colorbox only to images that are part of the content.

You did it!

Customizing the lightbox

The visual presentation can be customized using CSS code. On the functional aspect the .colorbox() method accepts an optional settings object that overwrites the default settings that control Colorbox's behavior. The settings object is made up of a comma-separated list of name:value pairs in between an opening and closing curly bracket. For example:

{ opacity:0.5 , rel:'group1' }

You can find a complete list at the Colorbox website.

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.