Expanding images in Help Center articles



Posted Sep 23, 2018

Unfortunately the ZenDesk Help Center does not natively allow you to have images that expand in size and show in a lightbox pop-up. However, this functionality is not difficult to provide with a small amount of work.

Fancybox is a JavaScript tool that allows you to show images in a lightbox pop-up. The process of using this tool is easier than ever, because starting with version 3, you can just link to the hosted file. This makes using it in ZenDesk as simple as four steps:

1. Go to the code editor for your theme. To do this, go to Settings, hover over your theme and click View Theme, click on the "..." next to Live, click Edit Code, then select the file you need to edit in the left column.

2. Add the links to the fancybox code in your document_head.hbs (the bottom of that file is fine):

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.js"></script>

3. Add the following to your script.js file, right above the closing "});". You can change the ".fancybox" in the first line to use a different class name if you like, or remove the ".fancybox" altogether to make all of your images show in the pop-up when clicked.

$('.article-body img.fancybox').on('click', function() {
$.fancybox.open([
{
src : $(this).attr("src"),
opts : {},
},
]);
});

The placement of this code is important. Be sure to include it before the closing bracket and parenthesis so that it can be loaded properly.

4. In the article, add the image using the image loader or by pasting it in.

5. Click on the Source Code button in the menu bar to open the HTML view pop-up.

6. Add class="fancybox" (or the class name you chose) in the HTML code on any image you like. 

7. Close the HTML view pop-up and save the page.

Important: Be sure the images you want show in the FancyBox are all large enough to make the pop-up useful. I find this makes the most sense for application screenshots. 

-----------------------

Update 4/3/20: As mentioned by Robert Holm below, if you are having trouble with the method for using fancybox described here, you might want to check out the detailed instructions here.

 


2

66

66 comments

Hey Jeff Bistrong,

Glad to hear this tip worked for you! If there is anything else we can help with here in the community, please don't hesitate to give us a shout on the forums! :D

Have a great day!

0


Joshua Barnard solution worked really well for us, my developer says the instructions provided were easy to follow. Thanks for this!

0


You're welcome, David Preston. Would you please upvote my solution to help others find the answer more quickly?

0


Joshua Tallent I never saw his post as it was on the next page of replies *facepalm 🤦‍♂️.

That did the trick! Thanks, JOSHUA BARNARD 🙌🙌🙌

0


David Preston did you try the solution that Joshua Barnard posted a few days ago? Maybe that will work better for you?

0


Hi 27038691848 thanks for the info.

I have tried absolutely everything and can't get Fancybox to work at all. I've even tried their latest V4.

Here is the console error I get:

Any ideas? 

David

0


The installation as it stands requires jQuery to work. I went to the developers' website and found a different way to implement the lightbox.

  1. Add the following CSS link to the "document_head.hbs" file.
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css"/>
  2. Add the following JS to the top of "article_page.hbs".
    <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.js"></script>
    - You could add this to the head as well. I moved it to the article page to appear in the <body> for better performance.
  3. Add the following JavaScript to the bottom of the "scripts.js" file.
    function addFancyBox() {
    var images = document.querySelectorAll('.article-body img');
    images.forEach(function(el) {
    el.setAttribute('data-fancybox','');
    })
    }
    addFancyBox();
    - This adds the required data attribute to all images inside the article body. Modify this code if you want to be more specific. You can also forego this step if you want to add the data attribute manually.

  4. Add the following CSS to "style.css."
    img[data-fancybox] {
    cursor: pointer
    }

    - This makes the cursor turn into a hand when you mouse over an image, so the user knows they can click it.

7


Hey Jacques,

As far as I know, any time your using custom code in your Guide theme (including Java) you'd need to have Display Unsafe Content enabled in your settings. Hopefully others can jump in here if they were able to find an alternative solution for you.

0


I'm revisiting this solution and the original still does not work.
Tried the one from Robert Holm and still no go.
However, I found this article from zenplates and they noted that 'Display unsafe html' must be enabled when using data attributes.
With that enabled it works great but company rules does not allow that. I looked through the options and samples but I suck at java so not sure how it can be implemented with the unsafe html option disabled.
Any suggestions?

0


Robert Holm, thanks for the info! I have updated the post to point people to that location if they are having trouble. 

0


Sign in to leave a comment.

Didn't find what you're looking for?

New post