Recent searches
No recent searches
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
Heather Rommel
Be-a-u-tiful! Thank you for this awesome image tip!
0
evahess
I love this solution, exactly what we needed!
0
Jessie Schutz
Hi Eva! I'm so glad it worked for you!
0
Support medewerker
Hello, can someone tell me what I'm doing wrong? I can not figure it out myself.


I need it for all the pictures on the hc
0
Joshua Tallent
Marco, be sure to place the script addition to the bottom of the file BEFORE the closing "});"
0
Support medewerker
So you mean like this: [this it not working :]
0
Joshua Tallent
I am not sure that the Help Classes Hidden function you have there at the end is written properly. Try moving the Images function above that and seeing if that helps. If so, then the Help Classes function needs to be fixed.
Otherwise there is something else going on in that code. You might try using a JavaScript validator to check it for issues: http://esprima.org/demo/validate.html
0
Support medewerker
I got it working :). This is actually easier.
Thanks for the help
0
Jessie Schutz
I'm glad you got it working, Marco! Thanks for helping out, Joshua. :)
0
Michael Belyaev
If you want to include this in your community posts, you should add this to "scripts.js":
You can also exclude ".fancybox" to make all of your images show in the pop-up when clicked in your community posts.
0
Tabaka, Ted
Worked like a charm. Thanks. Took me a bit of troubleshooting to make sure it worked. Maybe a section or a sample file might be a better addition to this guide.
0
Chris Sztuka
Is there a way to lock this function to image filetypes?
The goal is to avoid this when it comes to icons or svg assets.
Or, at least the ability to remove specific images from using this function.
Many thanks!
0
Joshua Tallent
Chris, if you set it up to only apply to titles that have the class name, then it will not be applied to anything else. I'm sure you could figure out a way in the JS to set exclusions, but using the class name inclusion would be easier.
0
Chris Sztuka
Thanks Joshua, that sounds about right. Although I have no idea how to go about doing that... any suggestions would be welcome :)
0
Joshua Tallent
Chris, just follow the directions above to set up the JS and use the class name you define in the images.
0
Chris Sztuka
Thanks, I somehow missed that when I originally implemented it.
0
Chris Sztuka
@JoshuaTallent Is there any chance of using classes as you mentioned, but have all images apply except for a specific few that would have a class defined?
So, in other words, I'd like all my images to utilize the zoom feature except for a few that I would use a class name to define those.
Any help or suggestion would be much appreciated!
0
Joshua Tallent
Chris, you can make all images zoomable by changing this line in the JS:
to this
(remove the ".fancybox").
Just realize that this will apply to every image, including small ones.
0
Chris Sztuka
Thanks again Joshua, this is how I have it currently, as per your original instructions.
However, I was hoping to have a way to assign specific images in my articles (i.e. a small icon) not to have this function. I'd not like to have to go through 400 articles and assign the images I want to use this function for, rather would be much easier to have the few images edited that I don't want using the zoomable function.
Again, appreciate the support!
0
Joshua Tallent
You have to have some sort of delineation on the images to assign the styling. If you don't have something specific to define which images are which then there's no way to do what you want. Sorry!
0
Chris Sztuka
Sure, I was thinking of using classes, but in reverse whereby only those with the class assigned will not have the zoomable function. Well anyway, looks like there's no way around it. Thanks for all your help Joshua!
0
Jacques van Rensburg
Nice one Joshua. Works great!
How can I add a hover note or something to say press esc to close?
0
Trapta Singh
Hi @Jacques van Rensburg,
You may use title in order to something like this. Here are few links for reference, you may want to look at these:
Thanks
0
Jacques van Rensburg
Thanks. Had a quick look and see some options that should work :)
0
Eric Haley
Hi, I'm unable to get this to work. I followed the directions, but no luck. Any ideas? Thank you.
0
Joshua Tallent
Eric,
Do you have the class name on the image you want to expand?
<img class="fancybox" src="image.png" alt="alt text">
0
Eric Haley
Hi Joshua,
Thanks for the prompt response. No, I don't have the class name on the image. That must be it. How do I put a class name on an image? Do I change the file name? Or do these images need to be added via CSS; not the image uploader in articles? Thanks again.
0
Eric Haley
UPDATE: I used the source code button in the WYSIWYG editor to add the class name to each image, however, it didn't do anything. Thoughts?
0
Joshua Tallent
Eric,
After you load the image with the uploader in the article, click on the Source Code button on the right side of the editor.
In the Code pop-up, add the class name to the image tag, as you see above. You don't need to do anything else.
Good luck!
Joshua
0
Eric Haley
Hi Josh,
I did this, but it didn't do anything. Any other ideas?
0