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

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

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 just checked, and it seems to be working still. Sorry they screwed you over. Hopefully they won't mess with the css/jquery hack. 

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

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.

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

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

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="https://support.zendesk.com/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="https://support.zendesk.com/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.