Jump to content

User:JGMalcolm/SimpleLightbox.js

From Wikipedia, the free encyclopedia
Note: After saving, you have to bypass your browser's cache to see the changes. Google Chrome, Firefox, Microsoft Edge and Safari: Hold down the ⇧ Shift key and click the Reload toolbar button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.
// 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();
      }
  });
});