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 comments
Devan La Spisa
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
Zeus The Hero
Joshua Barnard solution worked really well for us, my developer says the instructions provided were easy to follow. Thanks for this!
0
Joshua Barnard
You're welcome, David Preston. Would you please upvote my solution to help others find the answer more quickly?
0
David Preston
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
Joshua Tallent
David Preston did you try the solution that Joshua Barnard posted a few days ago? Maybe that will work better for you?
0
David Preston
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
Joshua Barnard
The installation as it stands requires jQuery to work. I went to the developers' website and found a different way to implement the lightbox.
function addFancyBox() {var images = document.querySelectorAll('.article-body img');
images.forEach(function(el) {
el.setAttribute('data-fancybox','');
})
}
addFancyBox();
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
Brett Bowser
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
Jacques van Rensburg
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
Joshua Tallent
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.