Share:
ClickHelp Documentation

Image Preview - Lightense

In ClickHelp, you can have clickable images that show up in a larger size. To do this, you should use the Lightense library. The instruction is below.

  • Go to the Lightense library page and download the library zip archive. It is covered by the MIT license, which means anybody can use it for free, and even re-distribute it if they keep the original license text included.
  • Unpack the zip archive.
  • Take the "lightense.min.js" file from the package and upload the file to the Scripts tab of the File Manager.
  • Once the file has been uploaded, select it and you will see its full URL at the bottom of the File Manager window.

  • Click that URL to copy it to the Clipboard.
  • Open your project settings, and navigate to the Topic Master Page screen.

  • On that screen, add the below code to the Topic Footer HTML:
<script src="/resources/Scripts/lightense.min.js"></script>

<script>
  // Init Lightense
  window.addEventListener('load', function () {
    Lightense('img:not(.no-lightense),.lightense');
  }, false);
</script>
  • Then open your project CSS file.

  • When the file is opened, click Lock&Edit, and add the following class definition at the end of the file:
.lightense
{
  max-width: 300px;
}

This class does two things - first, it sets the maximum image width (you can change it in the class definition); and second, it will tell the Lightense library which images to handle when a topic opens.

Now, after you insert an image to a topic, the only thing you need to do is assigning the "lightense" class to it:

  • Click on your inserted image, then click Image Properties...

  • Choose Style Settings and assign the "lightense" class to the image.

  • Click OK.

You've learned how to make clickable images.