Expanding images in Help Center articles

47 Comments

  • Joshua Tallent

    Can you load a screenshot of what you did?

    0
  • Eric Haley

    Here's the code with the class added...

    0
  • Joshua Tallent

    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. 

    0
  • Jacques van Rensburg

    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.

    0
  • Joshua Tallent

    Jacques van Rensburg Did you double check that the header is still in place and the JS is correct? 

    0
  • Jacques van Rensburg

    Yes, all appeared to be correct at the time.
    I'll try setting up again when I have a moment

    0
  • Eric Haley

    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
  • Jacques van Rensburg

    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

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

    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
  • Joshua Tallent

    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
  • Kate Rowe

    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
  • Joshua Tallent

    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. 

    1
  • Kate Rowe

    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.

    1
  • Robert Holm

    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
  • Robert Holm

    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
  • 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

Please sign in to leave a comment.

Powered by Zendesk