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:
![](../../__attachments/14256996624/image2016-10-18%2014:23:12.png?inst-v=1e95d1aa-0caa-469e-b908-8e314d7f7ddd)
What you need
some basic understanding of HTML, CSS and JS and how it works
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:
![](../../__attachments/14256996624/include-htmlhead.png?inst-v=1e95d1aa-0caa-469e-b908-8e314d7f7ddd)
Your file structure:
![](../../__attachments/14256996624/structure.png?inst-v=1e95d1aa-0caa-469e-b908-8e314d7f7ddd)
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>');
})
$('.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.
$(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:
{ opacity:0.5 , rel:'group1' }
You can find a complete list at the Colorbox website.