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

11 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;
    }
    0
  • 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

Please sign in to leave a comment.

Powered by Zendesk