ScreenStepsPublishing Manuals to Zendesk Set up in Zendesk Help CenterHow to add a lightbox to images in Zendesk Help Center

How to add a lightbox to images in Zendesk Help Center

Adding a lightbox to images in Zendesk isn't officially supported by ScreenSteps staff. There are a lot of customizations that you can make to your Zendesk Help Center so it is possible that the documentation below will not work depending on how you have designed your help center. But these instructions should give you the information you need to set things up. You will need to undrestand a bit about javascript and CSS to add the lightbox feature.

Image links in Zendesk

In a ScreenSteps document, when an image is inserted the HTML looks like this:

<div class="image">
  <a class="screensteps-image-zoom" href="https://s3.amazonaws.com/screensteps_live/images/original.png">
    <img src="https://s3.amazonaws.com/screensteps_live/images/display.png" alt="my image">
  </a>
</div>

When adding your lightbox library you will want to reference the linked image. For example:

$('a.screensteps-image-zoom')

Using that selector, you should be able to integrate your favorite lightbox library into your Zendesk Help Center.

0 Comments

Add your comment

E-Mail me when someone replies to this comment