Expanding images in Help Center articles

24 Comentários

  • Heather R
    Ações de comentário Permalink

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

    0
  • evahess
    Ações de comentário Permalink

    I love this solution, exactly what we needed!

    0
  • Jessie Schutz
    Ações de comentário Permalink

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

    1
  • Marco van der Valk
    Ações de comentário Permalink

    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
    Ações de comentário Permalink

    Marco, be sure to place the script addition to the bottom of the file BEFORE the closing "});"

    0
  • Marco van der Valk
    Ações de comentário Permalink

    So you mean like this: [this it not working :]

    0
  • Joshua Tallent
    Ações de comentário Permalink

    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
    Ações de comentário Permalink

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


    Thanks for the help

     

    0
  • Jessie Schutz
    Ações de comentário Permalink

    I'm glad you got it working, Marco! Thanks for helping out, Joshua. :)

    0
  • Michael Belyaev
    Ações de comentário Permalink

    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
    Ações de comentário Permalink

    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
    Ações de comentário Permalink

    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
    Ações de comentário Permalink

    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
    Ações de comentário Permalink

    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
    Ações de comentário Permalink

    Chris, just follow the directions above to set up the JS and use the class name you define in the images.

    0
  • Chris Sztuka
    Ações de comentário Permalink

    Thanks, I somehow missed that when I originally implemented it. 

     

    0
  • Chris Sztuka
    Ações de comentário Permalink

    @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
    Ações de comentário Permalink

    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
    Ações de comentário Permalink

    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
    Ações de comentário Permalink

    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
    Ações de comentário Permalink

    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
    Ações de comentário Permalink

    Nice one Joshua. Works great!

    How can I add a hover note or something to say press esc to close?

    0
  • Trapta
    Ações de comentário Permalink

    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
    Ações de comentário Permalink

    Thanks. Had a quick look and see some options that should work :)

    0

Por favor, entrar para comentar.

Desenvolvido por Zendesk