In order to use the Lightbox2 JS in Solution articles, you need to follow these steps.
- Go to Lightbox2 website - http://www.lokeshdhakar.com/projects/lightbox2/
- Download the Lightbox2 and host this in your Wordpress account or so, so it can be served from your own site, instead of using Lightbox2 site (Just in case)
- Go to Freshdesk Admin -> Helpdesk Rebranding -> Portal Customization -> Portal Pages -> "Solutions -> Article View
Include the below code snippet in this section for Lightbox
<link rel="stylesheet" href="http://lokeshdhakar.com/projects/lightbox2/css/lightbox.css">
<script src="http://lokeshdhakar.com/projects/lightbox2/js/lightbox.js"></script>
- After including the code snippet, Save & Publish the Portal Page.
- Now, add up all the Images in your dropbox or Box account, since only Public Images are supported or even you can upload in your Freshdesk Solutions and note the CDN links for these Images
- After uploading the files, Go to the Solutions article where you want to include the Lightbox option and use the HTML formatting option and include the CDN or Public Image link in this Code snippet
<div class="single first">
<a href="http://lokeshdhakar.com/projects/lightbox2/images/examples/image-3.jpg" rel="lightbox[plants]" title="Click on the right side of the image to move forward."><img src="http://lokeshdhakar.com/projects/lightbox2/images/examples/thumb-3.jpg" alt="Plants: image 1 0f 4 thumb"></a>
</div>
- Once done, save the Solution and the end result below
Same lightbox2 model can be used for Code highlighting too.