Expanding images in Help Center articles

21 Comentarios

  • Heather R

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

    0
  • evahess

    I love this solution, exactly what we needed!

    0
  • Jessie Schutz

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

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

    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

Iniciar sesión para dejar un comentario.

Tecnología de Zendesk