A close button on top of a fluid centered image
The translate() method used inside the HTML-code below moves both a (super) div-containing-a-close-buttom (id: 'the_div') and an image (id: 'the_img') to the center of the window. The jquery-onload in the image ensures that the width of the div equals the width of the image. This is a requirement if we want to get the button (in the div) at the right position in front of the image (using float: right and a high zindex for the div).
The width of the image is not explicitly given, because we already have a height for it (here: 80%; fluid images require percentages) and we don't want a distorted image. The jquery-onload is capable of calculating the proper width of the div on the basis of a value for the image's width that jquery derives from the image's height. That's jquery-magic. Note that we (must) have identical values for position, size and translate for the image and the div (and <script src="http://code.jquery.com/jquery-1.10.2.js"></script> in the head).
Code (you may edit the parts in red; you must either have position: absolute or position: fixed; the z-index for the div must be higher than the z-index for the image):
<div id="the_div" style="position: fixed; z-index: 101; border: 1px solid black; left: 50%; top: 50%; height: 80%; max-height: 100%; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform:translate(-50%, -50%); ">
<div style="background: black; color: white; font-family: verdana; font-size: 14px; font-weight: bold; float: right; cursor: pointer;" onclick="alert('Inactive close button')"> X </div>
</div>
<img id="the_img" alt="" src="http://press.princeton.edu/images/k8264.gif" style="position: fixed; z-index: 100; border: 1px solid black; left: 50%; top: 50%; height: 80%; max-height: 100%; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform:translate(-50%, -50%);" onload='$("#the_div").css("width", $("#the_img").width()+"px");'>
And this is the result (in a new tab).
I turned this static code into one long HTML-line that creates the div (containing the close button) plus the image 'on the fly'. I made the close button do what it is supposed to do, and added some jquery fade:
<a href="javascript: void(0)" onmouseover="if(!$('#the_div').next().length>0 ){$('body').append('<div id=\'the_div\'></div><img id=\'the_img\'>')};" onclick="$('#the_div').css('display', 'block'); $('#the_div').html('<div id=\'the_div_inner\' style=\'z-index: 101; position: fixed; left: 50%; top: 50%; height: 80%; max-height: 100%; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform:translate(-50%, -50%); border: 1px solid black; display: none\'><div style=\'color: white; background: black; font-family: verdana; font-size: 14px; font-weight: bold; float: right; cursor: pointer\' onclick=\'$("#the_div").fadeOut(500); setTimeout(function() {$("#the_div").empty()}, 500);\'> X </div></div><img id=\'the_img\' src=\'http:\/\/press.princeton.edu\/images\/k8264.gif\' alt=\'\' style=\'display: none; z-index: 100; position: fixed; left: 50%; top: 50%; height: 80%; max-height: 100%; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform:translate(-50%, -50%); border: 1px solid black\' onload=\'$("#the_div_inner").css("width", $("#the_img").width()+"px"); $("#the_div_inner").fadeIn(500); $("#the_img").fadeIn(500); \'>'); return false">show fluid centered image</a>
Result: show fluid centered image
But that was just an ugly-looking exercice made for fun. We'd better use a function that does the same thing. Here it is:
<script>
function create_fluid_img(which_image, which_height, which_position_type)
{
if(!$('#the_div').next().length>0 )
{$('body').append("<div id='the_div'></div><img id='the_img'>")};
$('#the_div').css('display', 'block') ;
$('#the_div').html("<div id='the_div_inner' style='z-index: 101; position:"+which_position_type+"; left: 50%; top: 50%; height:"+which_height+"%; max-height: 100%; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform:translate(-50%, -50%); border: 1px solid black; display: none'><div style='color: white; background: black; font-family: verdana; font-size: 14px; font-weight: bold; float: right; cursor: pointer' onclick='$(\"#the_div\").fadeOut(500); setTimeout(function() {$(\"#the_div\").empty()}, 500);'> X </div></div><img id='the_img' src='"+which_image+"' alt='' style='display: none; z-index: 100; position:"+which_position_type+"; left: 50%; top: 50%; height:"+which_height+"%; max-height: 100%; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform:translate(-50%, -50%); border: 1px solid black' onload='$(\"#the_div_inner\").css(\"width\", $(\"#the_img\").width()+\"px\"); $(\"#the_div_inner\").fadeIn(500); $(\"#the_img\").fadeIn(500); '>");
}
//Usage:
//<a onclick="create_fluid_img('http://press.princeton.edu/images/k8264.gif', '70', 'absolute')">fluid centered image, absolute position, height 70%</a>
//<a onclick="create_fluid_img('http://press.princeton.edu/images/k8264.gif', '40', 'fixed')">fluid centered image, fixed position, height 40%</a>
</script>
That's it.
Arie Molendijk, mesdomaines.nu.