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

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

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. 

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

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.

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;
}

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

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. 

Tipene Hughes 

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

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.

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

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" />

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.

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. 🤷🏼

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. 

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.

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;
}