ClickHelp Documentation

Image Preview - Lightbox


Lightbox is a script used for creating an image gallery. ClickHelp fully supports Lightbox granting you the possibility of integrating this service into your documentation.

Also, Lightbox allows grouping images into one set and going through the images one by one. 

Adding Lightbox to ClickHelp

To add Lightbox to ClickHelp, you need to perform several actions: download the Lightbox components, copy them to your ClickHelp portal, set up the portal to work with Lightbox, fix the source code for images that you want to be displayed using the Lightbox script.

Downloading the Lightbox Components

The first step in embedding Lightbox in ClickHelp would be getting all the necessary files from the Lightbox website.

  • Go to this website to download the Lightbox archive. 
  • Open the downloaded archive.
  • Go to the dist folder. This folder contains three child folders: js, images, and css. These folders contain the files you need to copy to the File Storage of your ClickHelp documentation portal to be able to use the Lightbox gallery.  

Copying Lightbox Script Files to ClickHelp

First thing you need copied is the Lightbox script file:

  • Open the js folder and copy the lightbox-plus-jquery.min.js file instead of just lightbox.min.js as ClickHelp doesn't include JQuery.
  • Paste the file to the Scripts folder of your ClickHelp portal ( File Manager  Scripts ). You can copy it right to the root folder like it is shown on the screenshot below:
  • To add the script to all the topics on the documentation portal, go to Tools  Portal Settings Topic Template Topic Master Page and copy the following code line to the Topic footer section specifying the path to your Lightbox script file there: 
    <script src="path/to/lightbox-plus-jquery.min.js"></script>

    In our case, the path will look like this:

    <script src="/resources/Scripts/lightbox-plus-jquery.min.js"></script>

    If you want a script added only to one particular project, go to the project settings, uncheck Use parent level settings, and make the necessary changes.
  • Save the changes.

Copying Lightbox images to ClickHelp

Now, let's copy the images stored in the images folder of the Lightbox archive to our ClickHelp portal:

  • Open the ClickHelp File Manager.
  • Upload the Lightbox images from the images folder of the Lightbox archive to the Images & Files tab in the File Manager.
    We recommend creating a new folder on the root level called, for example, Lightbox. This will help you to keep things organized later.

Copying CSS File from Lightbox to ClickHelp

The last preparatory step is copying the style file and fixing links to images in it.

  • Go to the ccs folder in the Lightbox archive and find the lightbox.css file.
  • Copy the lightbox.css file to the Styles folder of your ClickHelp File Storage (File Manager  Styles). 
  • Go to Current Project Settings  General Basic Settings.
  • Add the lightbox.css file to the list of existing files under the Project Styles section from the drop-down box called Select an existing file to add.
  • Open the added CSS file for editing.
  • Change the image links to the actual paths where your Lightbox images are located.
    Make sure to track down all the links to images in this CSS and change them. 
  • Click the Lock & Edit button in the Styles Editor.
  • Replace the old image paths with the new ones:
    • In the Styles Editor, Click Find & Replace (or, just press Ctrl+F on your keyboard).

    • Click More... in the Find and Replace dialog that opens.
      The paths specified in this instruction are only true if you created the Lightbox folder in the root folder as described above. In other cases, the Replace with field should be filled in according to the location where you placed your Lightbox images.
    • Enter the following string as a Search string: ../images/close.png
    • Enter this line in the Replace with field: /resources/Storage/Lightbox/close.png
    • Click Replace All.

    • Repeat the find and replace procedure for the rest of the images: Replace ../images/ with /resources/Storage/Lightbox/ 
  • Save the changes.

Set Up the Image Source Code

So, all the needed files are copied to the ClickHelp portal. Now, we will make some changes in the Source code of the help topic where we want the Lightbox image pop-ups implemented. For this:

  • Open the topic in question in Edit mode.
  • Switch to the Source tab at the bottom of the page.
  • Add the data-lightbox attribute for all of the image links that you want to have a Lightbox preview, like this:
    <a href="images/image-1.jpg" data-lightbox="image-1" data-title="My caption">Image #1</a>

    Images must be added to the topic as links (<a href=""></a>) in order for Lightbox to work.
  • Save the changes.
  • Switch to the Design View and unlock the topic to check how the Lightbox preview looks.
Use the same data-lightbox attribute value for different images if you want to group them.