I've noticed that the new markup prevents our rather basic expandThumb from working as the link itself is constrained. So it may be time for a poor mans lightbox to replace that function, and here it is:
function expandThumb(thumbID)
{
var link = document.getElementById('link_' + thumbID);
// Create the lightbox container if needed
if ($('#elk_lightbox').length <= 0)
$('body').append('<div id="elk_lightbox"><div id="elk_lb_content"></div></div>');
// Load and Show the lightbox window
$('#elk_lb_content').html('<div style="position:fixed;left:50%;top:50%;"><i class="fa fa-spinner fa-spin fa-4x"></i><div>');
$('#elk_lightbox').fadeIn(200);
// Fetch the image, replace the spinner with it when it arrives
$('<img id="elk_lb_img" src="' + link.href + '">')
.load(function() {
$(this).css({'max-height':$(window).height() - 40});
$('#elk_lb_content').html($(this));
})
.error(function() {
// Perhaps a message, but for now make it look like we tried and failed
setTimeout(function() { $("#elk_lightbox").hide();$('#elk_lb_content').html(''); }, 1500);
$(window).off('resize.expandThumb');
});
// Click anywhere on the page to close the lightbox window
$('#elk_lightbox').on('click', function(event) {
event.preventDefault();
$('#elk_lightbox').hide();
$('#elk_lb_content').html('');
$(window).off('resize.expandThumb');
});
// Hit escape to close it as well
$(window).on('keydown', function(event) {
console.log(event.keyCode);
if (event.keyCode === 27 ) {
event.preventDefault();
$('#elk_lightbox').hide();
$('#elk_lb_content').html('');
$(window).off('resize.expandThumb');
}
});
// Make the image size fluid as the browser window changes
$(window).on('resize.expandThumb', function() {
$('#elk_lb_img').css({'max-height':$(window).height() - 40});
});
return false;
}
I've put this on the site for testing and feedback.