Tip: Click to view full-size image in lightbox or modal

15 Comments

  • Brett Bowser
    Zendesk Community Manager

    Thanks for taking the time to share this example/code snippet with us Jordan! This is super helpful :)

    0
  • Patrick Morgan

    This is great! Exactly the use case i'm looking for—and all CSS...phew!

    0
  • Allison Sargent

    This is awesome! Curious about the mobile experience? I've wanted the ability to keep consistency between our mobile and desktop screenshots in our articles, so this could be a solution that seems easy enough to implement. 

     

    0
  • apkbattle.com

    This is impressive! Curious regarding the mobile experience? I've needed the capacity to keep consistency in our mobile and desktop screenshots in our articles. so this could be a solution that shows easy just to implement

    0
  • Mark Rickard

    This is great. However, is there a way to single out JPG vs GIF? I would rather not expand GIF images or exclude them and have JPG and PNG images expand.

    0
  • Dave Dyson
    Zendesk Community Manager
    HI Mark, I found some suggestions in Stack Overflow that might be of use: Specific image extension selector in CSS or JQuery
    0
  • Mark Rickard

    Worked like a charm. Thanks for the tip!

    .article-body img[src$='.jpg']  {
        width: 300px;
        height: auto;
        transition: width 1s;
        padding: 20px 0px;
    }
    .article-body img[src$='.jpg']:hover {
        width: 125%;
        height: auto;
        transition: width 1s;
        transition-delay: .25s;
        cursor: zoom-in;
    }
    1
  • Dave Dyson
    Zendesk Community Manager
    Thanks for posting your solution, Mark!
    0
  • Salim Moumouni

    Can this be done with videos on the mobile web widget? So if you click a video on the web widget it opens up as a modal/lightbox

    0
  • Tipene Hughes
    Zendesk Developer Advocacy

    Hey Salim,

    Yes, you should be able to achieve a similar effect by adding the video to your help center via custom code, wrapping it in a <div> container, and using some CSS and Javascript to give the desired effect with an onlick event listener. 

    0
  • Salim Moumouni

    Tipene Hughes 

    Thanks for the tips, I'll see what I can figure out, I only know basic CSS!

    0
  • Mark Rickard

    A recent change to Zendesk code has broken this functionality.

    Before, when you added an image, the code looked like:

          Participants that arrive earlier than one hour before the session will
          see a warning to come back within one hour of the appointed time.<br>
          <img src="/hc/article_attachments/9540102520987/Live_FC_Early_Entrant.jpg" alt="Live_FC_Early_Entrant.jpg">

    Now, the code looks like:

          Participants that arrive earlier than one hour before the session will
          see a warning to come back within one hour of the appointed time.<br>
          <img src="/hc/article_attachments/9540102520987" alt="Live_FC_Early_Entrant.jpg">

    This breaks the functionality. You have to now copy the filename to the <img src> code every single time. This is highly inefficient and not scalable.

    0
  • Dave Dyson
    Zendesk Community Manager
    Hi Mark, 
     
    For the best visibility to our product team, can you create a post for this in our Feedback on Help Center (Guide) topic, using this template to format your feedback? Thanks!
    0
  • Mark Rickard

    Thanks Dave. I was getting to it. I was more interested in immediately speaking to those who were impacted to understand and resolve with the provided workaround.

    If you're using this functionality, go upvote my request or it will never get resolved.

    https://support.zendesk.com/hc/en-us/community/posts/5030106835610-Use-Image-URL-filename-in-img-src-tags

    0
  • Dave Dyson
    Zendesk Community Manager
    Gotcha, thanks Mark!
    0

Please sign in to leave a comment.

Powered by Zendesk