Tip: Click to view full-size image in lightbox or modal
There was another post about this, back in 2016. I'm surprised this hasn't resurfaced since then.
We have lots of images in our product documentation and we don't want them to display in full resolution. We want to allow customers to click the image and zoom in to a full-resolution image. (we're not picky about any sort of animation/transition, only that the image is brought to a FULL-SIZE resolution, after being clicked.)
We also use some CSS to make it so all images are reduced to a max 300px width so they are all consistently sized, and when you hover over the image, it expands within the article viewing area. But for some images, the image is still too small.
@... shared their "Lightbox Plugin" in that other forum post, 5 years ago. Sounds like just what we needed, but unfortunately, from my experience, we cannot get it to work on our ZenDesk Instance.
In the meantime, here's a GIF and our code snipped that we're using to increase/descrease the size of all images in our help articles...
Example:
/* Customize Hover behavior on Documentation... On hover: gradual increase size; also make all thumbnails the same size */
.article-body img {
width: 300px;
height: auto;
transition: width 1s;
padding: 20px 0px;
}
.article-body img:hover {
width: 110%;
transition: width 1s;
transition-delay: .25s;
cursor: zoom-in;
}
.article-body h2 {
color: #1761C5;
padding-bottom: 14px;
}
-
Thanks for taking the time to share this example/code snippet with us Jordan! This is super helpful :)
-
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.
-
HI Mark, I found some suggestions in Stack Overflow that might be of use: Specific image extension selector in CSS or JQuery
-
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;
} -
Thanks for posting your solution, Mark!
-
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.
-
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.
-
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!
-
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.
-
Gotcha, thanks Mark!
-
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;
}
Please sign in to leave a comment.
21 Comments