From Wikipedia, the free encyclopedia
Jump to navigation Jump to search
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.


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


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) {
    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');
      .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')
      .on('click', function() { $(this).hide(); });
  $(document).keyup(function(e) { 
      if (e.keyCode == 27) { // esc keycode