Adding a lightbox (Fancybox) to your Help Center Follow

Comments

24 comments

  • Avatar
    Jerome Mills

    I seem to having a little bit of an error using this with the "Humble Squid" theme. I was able to get it to work properly with the default theme, but now that I've switched and added the necessary script pointers, it just doesn't want to work.

  • Avatar
    Darren O (Edited )

    I'm having some trouble with this....

    Check the first screenshot in the tutorial, this file is not highlighted:

    jquery.fancybox.js

    However, in the 4th screenshot...it's referenced.

    I was able to get it to partly work, however the border and the 'X' on the top right corner didn't show.

    Any thoughts?

  • Avatar
    Tharrison (Edited )

    For those of you who want all existing article images (and images uploaded in the future) to use Fancybox without adding any additional html or manually moving images into the Assets area, I hacked together the code below. Just add it to the bottom of the JS tab in the theme editor, before the last line with closing bracket. This code works best when you upload large images wider than the standard content area in the Help Center. When users click on them, they'll expand to the full image size.

    $(window).load(function(){
       $('.fancybox').fancybox();
    });

    $('.article-body img').hover(function() {
       $(this).css('cursor','pointer');
    });

    $(".article-body img").on("click", function(){
       $.fancybox($(this).attr("src"),{
          // API options
       });
    });

  • Avatar
    Wouter van Gessel

    @Zendesk: It would still be good if a lightbox or fancybox would apply to all screenshots entered into the Help Center... Or to be able to select this option easily via the WYSIWYG editor.

  • Avatar
    yahor.darashkevich

    @Tharrison Haven't tried this yet, but sound awesome! Any chance to "hack" to be the same for video content? Using iFrame. Thanks!

  • Avatar
    Louisa Nicholas Cla

    I am also having trouble with this.

    It will not allow me to drag the files into the asset section, could anyone help me with this please?

  • Avatar
    Eric Nelson

     Hey Nicholas!

    I've created a ticket for us to look into this more in-depth. I'll be reaching out to you there shortly!

     

    Thanks! 

  • Avatar
    Jessie Schutz

    Hey Louisa! It looks like you opened a ticket with support on your own as well. We've got everything all merged together, and I see you're getting help from James. When you get everything sorted out, please feel free to come back here and share your solution with the Community!

  • Avatar
    Mike Domin

    Anyone have a solution for using fancybox and the help widget? 

    When viewing an article in the widget and clicking on an image using the fancybox code, the image opens with no option to close or navigate back to the article.  Thanks.

  • Avatar
    Jessie Schutz

    Hey Mike!

    I'm not able to troubleshoot this myself, but I have encounter lightboxes where all you have to do is click off the light box and it closes. Have you tried that?

  • Avatar
    Mike Domin

    Hi Jessie.  I submitted a ticket for this as I am unable to click off the image within the web widget.  Thanks!

  • Avatar
    Jessie Schutz

    Sounds good! Feel free to pop back in after you've found a solution. :)

  • Avatar
    Mike Domin

    @Jessie - Adding target="_blank" resolved my issue. The screenshot image still opens in the lightbox within the help center but in a new tab within the web widget.

  • Avatar
    Jessie Schutz

    Thanks for sharing! Hopefully others will find this helpful as well. :)

  • Avatar
    Walter Padilla

    Hey @Mike where did you add "target="_blank"

  • Avatar
    Mike Domin

    @Walter - In the a tag.  For example:

    <a class="fancybox" href="http://example.jpg" target="_blank"><img src="/example.jpg"></a>

     

     

  • Avatar
    Denise

    Hi, I would like to download the files but I get a 404 when I clicked download on this site: http://fancyapps.com/fancybox/#license

    What did I do wrong?

    Cheers!

  • Avatar
    Chris Alfaro

    Denise,

    There is a new version.

    "fancyBox v2 is deprecated. We encourage all developers to upgrade to fancyBox 3."

    NEW URL: http://fancyapps.com/fancybox/3/

  • Avatar
    Mikaël Janssens (Edited )

    Hi

    Does anybody has experience with Fancybox and Screensteps? 

  • Avatar
    Mike Domin

    Currently using v2 in our help center.  How do we upgrade to v3?  Thanks!

  • Avatar
    Marybeth Sklar

    I notice there is a charge for Fancybox. I'd like to try it first before committing. 

  • Avatar
    Jessie Schutz

    Hey Mike and Marybeth!

    We don't actually support Fancybox, so I'd recommend that you both contact Fancybox support directly to get the info you need!

  • Avatar
    Wade Henderson

    I just installed everything as per the instructions above, then after reaching the bottom of the comments here and noticed that Mike Domin (https://support.zendesk.com/hc/en-us/profiles/8106034467-Mike-Domin) asked about upgrading to V3, I would like to know this as well.  As I have installed the one that is linking at the top of this page (Fancybox jQuery plugin available - here ) which is currently V2.1.7, I have added an outdated version and now need to upgrade to V3.

     

    I downloaded V3 and it is not presented in the same manner as the one I downloaded so before I start matching up file to replace them, I would like to know if there is reference material for the upgrade.

  • Avatar
    Joseph May

    Hi Wade-

    Reference material can be found on Fancybox's site here. This would be the best place to compare methods between versions for parity. I also searched some more, but did not find a specific feature parity list, but as Jessie mentioned above, contacting their support may yield more info. If they do have a feature parity list that is available, please let us know here, too!

    In addition, you can view their releases on GitHub here.

    Best Regards,

    Joey

Please sign in to leave a comment.

Powered by Zendesk