simplify and cleanup large portal image dialog

- nicely centered. few tricky css hacks
- minumum width - ready for additional content below the image
- fix & in portal titles from showing as & sequence, etc
This commit is contained in:
Jon Atkins 2013-05-28 02:01:41 +01:00
parent 2d247322f9
commit b0675e5852

View File

@ -9,19 +9,14 @@ window.showZoom = true;
window.setupLargeImagePreview = function() { window.setupLargeImagePreview = function() {
$('#portaldetails').on('click', '.imgpreview', function() { $('#portaldetails').on('click', '.imgpreview', function() {
var img = $(this).find('img')[0]; var img = $(this).find('img')[0];
var w = img.naturalWidth, c = $('#portaldetails').attr('class'); //dialogs have 12px padding around the content
var d = dialog({ var dlgWidth = Math.max(img.naturalWidth+24,400);
html: '<span class="' + c + '" style="position: relative; width: 100%; left: 50%; margin-left: ' + -(w / 2) + 'px;">' + img.outerHTML + '</span>', dialog({
title: $(this).parent().find('h3.title').html() html: '<div style="text-align: center">' + img.outerHTML + '</div>',
title: $(this).parent().find('h3.title').text(),
width: dlgWidth,
}); });
// We have to dynamically set the width of this dialog, so get the .ui-dialog component
var p = d.parents('.ui-dialog');
// Don't let this dialog get smaller than the default maximum dialog width
var width = Math.max(parseInt(p.css('max-width')), w);
p.css('min-width', width + 'px');
p.css('width', width + 'px');
}); });
} }