Implement expand-on-click images

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

Demo

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

What you need

some basic understanding of HTML, CSS and JS and how it works
Colorbox
a editable theme and a theme editor

Including the required libraries

Download Colorbox and extract the Zip file.
Go through the example directories and open the index.html to look at a preview.
Decide on which look and feel you want to go with.
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.

JS

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

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

JS

$(document).ready(function() {

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

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:

CODE

{ opacity:0.5 , rel:'group1' }

You can find a complete list at the Colorbox website.