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

21 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
    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
    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.

    1
  • Dave Dyson
    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
    Gotcha, thanks Mark!
    0
  • Jeremy Gregory

    I was struggling to find an already created solution. This solution was a good idea. I've built upon it a bit. Fortunately, jQuery plays nice with Zendesk. Hope this helps someone else out.

    CSS (style.css)

    .zoomMe{ cursor: pointer; }
    .zoomMe:hover{ opacity: .7; }
    .zoomMe.zoomed{
      position: absolute;
      z-index: 3;
      width: 1800px !important;
      left: -50px !important;
      border: 1px solid #ddd;
      box-shadow: 0px 8px 15px rgba(0,0,0,.3);
      transition: all 1s;
      opacity: 1 !important;
    }


    # JS (script.js)


    $(function(){
        $(".zoomMe").on("click", function(){
        $(this).toggleClass("zoomed")
      })
    });

    HTML (article page)
    Wherever you've used an image, just go into the HTML and add the class "zoomMe"

    <img src="whatever your image is" class="zoomMe" />

     

     

     

    0
  • Mark Rickard

    Well, unfortunately Zendesk will not be reversing this.

    Since you'll either have to add the filename to the <img src> tag or the class (as Jeremy recently posted), this solution will be a manual process until Zendesk adds Lightbox technology of their own to come into parity with their content competitors.

    0
  • Mark Rickard

    For all watching this thread, it seems that another update to Zendesk image handling has broken my solid workaround. Dunno about Jeremy's. I can't seem to figure out what they broke, because adding the filename to the <img src> tag doesn't work any more. 🤷🏼

    1
  • Jeremy Gregory

    I just checked, and it seems to be working still. Sorry they screwed you over. Hopefully they won't mess with the css/jquery hack. 

    1
  • Mark Rickard

    Good.

    Now, the challenge is there is no global find/replace for code in Zendesk, so I will have to manually change hundreds of pages.

    0
  • Mark Rickard

    I think that I may have solved it. Simply switching the image extension selector from src to alt.

    .article-body img[alt$='.jpg']  {
        width: 300px;
        height: auto;
        transition: width 1s;
        padding: 20px 0px;
    }
    .article-body img[alt$='.jpg']:hover {
        width: 125%;
        height: auto;
        transition: width 1s;
        transition-delay: .25s;
        cursor: zoom-in;
    }
    0

Please sign in to leave a comment.

Powered by Zendesk