×

You're using an outdated browser

For a better experience, keep your browser up to date. Check here for the latest version.

Manual

Implement expand-on-click images

Thomas Rough

Thomas Rough Last update: Oct 16, 2018

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

Demo

This is how an expanded image is displayed 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 look 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>');
})
$('.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 only target 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.

2x2.9
We use cookies to create a secure and effective browsing experience for our website visitors and to understand how you use our site (i.e. Google Analytics). For more information: click here.
Ok