MediaWiki:Common.js: Difference between revisions
Add always-visible reader mode escape button |
Add simple image lightbox |
||
| Line 48: | Line 48: | ||
// Apply state on page load | // Apply state on page load | ||
applyReaderMode(); | applyReaderMode(); | ||
}); | |||
// 3. Simple Image Lightbox | |||
$(function() { | |||
$('a.image').on('click', function(e) { | |||
e.preventDefault(); | |||
var imgUrl = $(this).attr('href'); | |||
if ($(this).find('img').length > 0) { | |||
// Get original image url by stripping /thumb/ and the filename at the end | |||
var thumbSrc = $(this).find('img').attr('src'); | |||
if (thumbSrc.indexOf('/images/thumb/') !== -1) { | |||
var parts = thumbSrc.split('/'); | |||
parts.pop(); // remove the scaled filename like 300px-Scouts.png | |||
imgUrl = parts.join('/').replace('/images/thumb/', '/images/'); | |||
} else { | |||
imgUrl = thumbSrc; | |||
} | |||
} | |||
var overlay = $('<div id="osrs-lightbox" style="position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.85); z-index:999999; display:flex; align-items:center; justify-content:center; cursor:pointer;"></div>'); | |||
var img = $('<img src="' + imgUrl + '" style="max-width:95%; max-height:95%; box-shadow:0 0 20px rgba(0,0,0,0.8); border:2px solid #b3a07d;" />'); | |||
var loading = $('<div style="color:white; font-family:sans-serif; position:absolute;">Loading...</div>'); | |||
overlay.append(loading); | |||
img.on('load', function() { | |||
loading.remove(); | |||
}); | |||
overlay.append(img); | |||
overlay.on('click', function() { | |||
$(this).fadeOut(200, function() { | |||
$(this).remove(); | |||
}); | |||
}); | |||
$('body').append(overlay); | |||
overlay.hide().fadeIn(200); | |||
}); | |||
}); | }); | ||