最近搜索


没有最近搜索

Expanding images in Help Center articles



已于 2018年9月23日 发布

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 条评论

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

 

0


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.

0


Thanks for the quick response Joshua Tallent! We have tried that, but no luck.  Agree that would be much preferable if we had this capability in the platform.

0


Kate Rowe 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, Jessie Schutz 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. 

0


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>



0


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. 

0


Hi Joshua Tallent, 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. 

0


Eric Haley 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. 

0


Hi Joshua Tallent

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

0


Joshua Tallent, that's what I did. I think the code on this may need to be updated. See the code that Marco van der Valk 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?

0


登录再写评论。

找不到所需的内容?

新建帖子