Originally posted by ricpa
I think I managed it with this code
<a href="#"
onClick="window.open('pix/finish/diamante.jpg', 'Diamante', 'toolbar=0, status=0, width=250, height=166');">
<img src="pix/finish/diamante_small.jpg" border="0",></a>
However I'm sure there is a better way of doing it. Surely I don't have to use the "#" in the link section just to stop the browser opening another page? Another thing is that the picture is surrounded with white space above and to the left of it. The size of the image is w250 x h166 so what is the problem there?
Ricpa,
What you really want to do is write a function to handle this for all your images, then call the function.
function ShowImageWin(imgPath, imgName, w, h)
{
//constants definitions
var POPUP_WIDTH = w;
var POPUP_HEIGHT = h;
//the center properties
var window_width = POPUP_WIDTH;
var window_height = POPUP_HEIGHT;
var screen_balance_w = ((screen.width)-(window_width))/2;
var screen_balance_h = ((screen.height)-(window_height))/2;
var set_top = screen_balance_h;
var set_left = screen_balance_w;
win = window.open(imgPath,imgName,'width=' + window_width + ',height=' + window_height + ',top=' + set_top + ',left=' + set_left + ',menubar=yes, resizeable=yes, scrollbars=yes');
win.focus();
}
That should work for you, pass the image path and name, and even width and height if you want (or make them static). The function will also center the window on the screen.
Then in your link, call it correctly:
<a href="imagePathHere" onClick="ShowImageWin('image.jpg', 'myImage', 600, 400); return false;">
<img src="pix/finish/diamante_small.jpg" border="0",></a>
This is accessible to someone w/o JS or JS disabled. The return false will disable the link for JS enabled users. Otherwise, the user will still get your bigger image, just on a new page. They can then click the back button. Works for everyone.
HTH
Tom