Expanding images in Help Center articles
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.
-
Can you load a screenshot of what you did?
-
Here's the code with the class added...
-
Did you try doing a hard refresh of the article in your browser (not the editing page, the customer-facing page)? Hold down CTRL and press F5.
You might also use the Code Inspector to make sure the class name is actually showing up where it should and the CSS and JS links you added in the header are being applied. If not, make sure you added those to the right template.
-
I have implemented this for on of my articles which worked. After updating the article with a new image, I noticed it no longer expands. Double checked that the class was added but still no go.
We did add an extra class to images for another reason. So I removed the additional class to rule it out - still no go.Also tried adding the additional class to the script but there I just made things worse in other articles.
Did something change in the fancybox code perhaps?
Its only one article where I require this function so not stressing too much. To get around this I'm linking the image to itself so that it opens a larger view in a new window.
-
@... Did you double check that the header is still in place and the JS is correct?
-
Yes, all appeared to be correct at the time.
I'll try setting up again when I have a moment -
@..., that's what I did. I think the code on this may need to be updated. See the code that @... included in his screenshot above. It's not the code you reference in your article. He used different coding on script.js to get it to work. Not sure if you saw that. Thoughts?
-
Hi @...
Some feedback:
I've removed and copied the links back into document_head.hbs
In script.js I checked everything is correct, but removed and copied everything back in again.
Added class="fancybox" to the <img> element.
Viewing the elements, the image is shown as img.fancybox.
Under sources I see fancybox/3.2.5 under cdnjs.cloudfare.com
I also tried Marco's solution.
Got it to work once, I think, to add the attribute and zoom. The problem is I only need to apply it to one image, so tried to select only the image with the alt="roadmap". Subsequent loads did not add the additional attributes so think I made a typo somewhere and did not look further.
The buttons in his code did not work for me. I did notice that I was getting a '.fancybox is not a function' in the console.
Quick Google search and found plenty questions out there with similar issues. Some saying they started seeing this issue from Dec 2019 for jquery 3.x
Afraid that is how far I got - need to get onto other work now, so I'm going back to the image opening in an alternative window for now.
Thx, Jacques -
@... What Marco did is completely different than the original design. If that works for you, then by all means feel free to use it.
The code I posted originally works perfectly in my knowledge base, and should in any other. If it does not, then there's something else getting in the way, probably a code issue. You might want to paste your JS into a validator to make sure you don't have any other issues keeping that piece of code from working properly. Beyond that, I don't know what to tell you.
-
Hi @..., I never touched the javascript until I added the code from this article. So if there are any issues, they would have come that way out-of-the-box. Perhaps it's a systemic issue that's getting in the way and Zendesk should take accountability for it instead of putting it on their customers. I don't know how to use a javascript validator as I'm not a coder. So, I'm giving up on this solution. Three people have posted issues with the instructions in the article. Just pointing out the obvious. You do what you wish. Thank you anyway for your time and effort.
-
As I said, the code I posted seems to work fine from what I can tell. I'm sorry you were not able to get it to work in your case. I agree that Zendesk should just make this a standard function that does not require special work.
-
Hi - we are in the process of going live with our Help Centre and were successfully using your fancy box functionality in our draft Theme.
Our stylesheet developer has just upgraded us the Guide templating API V 2 which came out a few weeks ago - and now the fancy box no longer works. He suggested loading the latest jquery library as the new framework no longer loads it automatically, but this has not resolved the issue. Do you have any thoughts on how to make it work ? here is what we have tried in document_head.hbs.
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<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> -
@... You might try using the Inspector tool on Chrome or Firefox to see if the CSS is being applied correctly or being overwritten somehow.
Also, @... might be able to ask the dev team to look into whether the latest update broke support for this workaround.
As I have said since the beginning, it would be better if ZenDesk would just offer this feature natively instead of relying on workarounds that are so finicky. Maybe some day they will actually spend some time adding new features to Guide instead of only working on other parts of the ZD system.
-
Thanks for the quick response @...! We have tried that, but no luck. Agree that would be much preferable if we had this capability in the platform.
-
HI
I am getting no reaction from the code. Could you please take a look.Here is my set up.
document_head i added these two lines
<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>scripts.js I added code below the //fancybox and before the closing });
// Communities active class
$('.my-activities-nav.nav-bordered li, .my-activities-sub-nav.nav-spaced li').each(function(id, it) {
if(typeof $(it).find('a').get(0) == 'undefined') {
$(it).addClass('active');
}
});
// Bootstrap table class on article body
$('.article-body').find('table').wrap('<div class="table-responsive"></div>');
$('.community-enabled .search-results-column').addClass('col-sm-6');
// Function of set year
var x = new Date();
var y = x.getFullYear();
$('#year').html(y);
//Fancybox
$('.article-body img.fancybox').on('click', function() {
$.fancybox.open([
{
src : $(this).attr("src"),
opts : {},
},
]);
});
});My HTML looks like this
<p>
<a class="fancybox" href="https://source.unsplash.com/0JYgd2QuMfw/1500x1000" data-caption="This image has a simple caption"> <img src="https://support.fleetcomplete.eu/hc/article_attachments/115002059411/mceclip1.png"> </a>
</p>The image is just opening i a new tab.
I am getting no errors in the console.?
I hope you can see what is wrong.
-
Hi
Just wanted to let you know I am having better luck with the option from.
http://fancyapps.com/fancybox/3/docs/#introduction
That provided approach is working for me. Thanks
-
@..., thanks for the info! I have updated the post to point people to that location if they are having trouble.
-
I'm revisiting this solution and the original still does not work.
Tried the one from @... 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? -
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.
-
The installation as it stands requires jQuery to work. I went to the developers' website and found a different way to implement the lightbox.
-
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"/>
-
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. -
Add the following JavaScript to the bottom of the "scripts.js" file.
- 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.function addFancyBox() {
var images = document.querySelectorAll('.article-body img');
images.forEach(function(el) {
el.setAttribute('data-fancybox','');
})
}
addFancyBox();
-
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.
-
Add the following CSS link to the "document_head.hbs" file.
-
Hi @... 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
-
@... did you try the solution that Joshua Barnard posted a few days ago? Maybe that will work better for you?
-
@... I never saw his post as it was on the next page of replies *facepalm 🤦♂️.
That did the trick! Thanks, @... 🙌🙌🙌
-
You're welcome, @.... Would you please upvote my solution to help others find the answer more quickly?
-
Joshua Barnard solution worked really well for us, my developer says the instructions provided were easy to follow. Thanks for this!
-
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! -
I have followed these instructions and it's not working for me either. I'm using the Mink theme.
-
Hi Everett Cavazos,
Please try the solution I presented and see if that works for you.
Thanks,
Josh
-
Joshua Barnard I tried your solution as well and it did not work.
-
Joshua Barnard I reversed all changes, tried following your steps again and still not working. I also made sure "Display unsafe content" was checked, as I saw someone post in an earlier comment, although I don't know if that's required.
Do you have any other suggestions?
Please sign in to leave a comment.
63 Comments