[Plugin: Simple Lightbox] Mobile Responsive and Lightbox Images

Hi,

Images are displayed at their original size to maintain optimum image quality. Resizing images to their desired display size prior to uploading is recommended.

You can see more usage notes on SLB’s official page.

SLB 2.0 will support automatic resizing.

I found it best to display larger images for mobile devices and just remove the lightbox functionality … I remove the <a> around the image with jquery…

window.addEventListener("load",function() {
  var w = $('.wrapper').width(); // reference the container you want
  if( w < (500)){ // change to whatever you want
    $(".gallery-icon a:has(img)").each(function() {
      $(this).replaceWith($(this).children());
    })
  }
});

In my css I have the following which shows each image full screen on mobile portrait …

@media only screen and (max-width: 360px) {
  .gallery-item {
    float:none;
    width:80%;
    margin:0 auto 5%;
  }
  .gallery br {
    display:none;
  }

}

Works a treat!!