User:JGMalcolm/SimpleLightbox

This is the documentation page for the SimpleLightbox.js user script.

Documentation

SimpleLightbox tool on Flowers article

SimpleLightbox is a simple lightbox user script, which enlarges images without leaving the page, faster and easier than Media Viewer. Works with most images and formats. Just click on the image.

Install

To use this script place the following line in your common.js page: {{subst:iusc|User:JGMalcolm/SimpleLightbox.js}}

Credits

This is adapted directly from User:Rezonansowy/SimpleLightbox and modified to respond to [Esc] key also closing the window.

// adapted from 'User:Rezonansowy/SimpleLightbox.js'
// added ability to hit [Esc] to close box
$(document).ready(function() {
  $('body').append('<div id="lightbox" style="display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);text-align:center;z-index:9999"></div>');
  $('a.image').click(function(e) {
    e.preventDefault();
    if ($(this).find('img').attr('src').match('/thumb/')) {
      var src = 'http:' + $(this).find('img').attr('src').replace('/thumb','').replace(/\/[\-_.%\w]*$/, '');
    } else {
      var src = $(this).find('img').attr('src');
    }
    $('#lightbox')
      .html('<img src="'+src+'" style="background:#fff;box-shadow: 0 0 25px #111;max-height:100%;max-width:100%;vertical-align:middle;cursor:pointer;" />')
      .css('line-height', $(window).height()+'px')
      .show()
      .on('click', function() { $(this).hide(); });
  });
  $(document).keyup(function(e) { 
      if (e.keyCode == 27) { // esc keycode
          $('#lightbox').hide();
      }
  });
});