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