Expanding images in Help Center articles

63 Comments

  • Heather Rommel
    Community Moderator
    Zendesk Luminary
    The Product Manager Whisperer - 2021

    Be-a-u-tiful! Thank you for this awesome image tip!

    0
  • evahess

    I love this solution, exactly what we needed!

    0
  • Jessie Schutz
    Zendesk Customer Care

    Hi Eva! I'm so glad it worked for you!

    0
  • Marco van der Valk

    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
  • Marco van der Valk

    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
  • Marco van der Valk

    I got it working :). This is actually easier.


    Thanks for the help

     

    0
  • Jessie Schutz
    Zendesk Customer Care

    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":

    //fancybox image zooming in community
    $('.post-body img.fancybox').on('click', function() {
    $.fancybox.open([
    {
    src : $(this).attr("src"),
    opts : {},
    },
    ]);
    });

    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:

    $('.article-body img.fancybox').on('click', function() {

    to this

    $('.article-body img').on('click', function() {

    (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
    Community Moderator
    Zendesk Luminary

    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

Please sign in to leave a comment.

Powered by Zendesk