04/03: Javascript Image Popup Script
A while back I was searching on the internet for a decent photo popup script but I didn't find the one I was looking for. I started to code one of my own using bits and peaces of other scripts. This is the code I ended up with and I'm pretty satisfied with it. It is pretty simple and does the things I want it to do.
To use this script save this code in a file called popup.js or click here to download it and upload it to your server with your favorite ftp client. The next step is to add a small piece of code to your head part of your page, something like this:
Now you can add popup links to your pictures by using a link format like the following:
Notice the href attribute just points to the image url not a javascript function, so when a visitor who has javascript disabled clicks the link or thumbnail he will still go to the big image in the same window. This is also the case with the crawlers of search engines, so your images will still get indexed.
function Foto(img,txt,width,height) {
foto1 = document.createElement('img');
foto1.src = img;
if(!txt) {txt=img}
vars="width="+width+",height="+height+",left="+((screen.width-width)/2)+",top="+((screen.height-height)/2);
newwindow=window.open("","newwindow",vars);
newwindow.document.clear();
newwindow.document.write("<html>\n<head>\n<title>"+txt+"</title>\n");
newwindow.document.write("<meta http-equiv=\"imagetoolbar\" content=\"no\">\n");
newwindow.document.write("</head>\n\n<body style=\"margin:0px; padding:0px; cursor:pointer;\" onblur=\"javascript:window.close();\">\n");
newwindow.document.write("<img src=\""+img+"\" border=\"0\" onclick=\"javascript:window.close();\">\n");
newwindow.document.write("</body>\n</html>\n");
if(newwindow.document.focus) {newwindow.document.focus();}
newwindow.document.close();
}
foto1 = document.createElement('img');
foto1.src = img;
if(!txt) {txt=img}
vars="width="+width+",height="+height+",left="+((screen.width-width)/2)+",top="+((screen.height-height)/2);
newwindow=window.open("","newwindow",vars);
newwindow.document.clear();
newwindow.document.write("<html>\n<head>\n<title>"+txt+"</title>\n");
newwindow.document.write("<meta http-equiv=\"imagetoolbar\" content=\"no\">\n");
newwindow.document.write("</head>\n\n<body style=\"margin:0px; padding:0px; cursor:pointer;\" onblur=\"javascript:window.close();\">\n");
newwindow.document.write("<img src=\""+img+"\" border=\"0\" onclick=\"javascript:window.close();\">\n");
newwindow.document.write("</body>\n</html>\n");
if(newwindow.document.focus) {newwindow.document.focus();}
newwindow.document.close();
}
To use this script save this code in a file called popup.js or click here to download it and upload it to your server with your favorite ftp client. The next step is to add a small piece of code to your head part of your page, something like this:
<script type="text/javascript" src="/popup.js"></script>
Now you can add popup links to your pictures by using a link format like the following:
<a href="/img/bigimage.jpg" onclick="Foto(this.href, 'My Photo Title', '800', '600'); return false;">Link</a>
Notice the href attribute just points to the image url not a javascript function, so when a visitor who has javascript disabled clicks the link or thumbnail he will still go to the big image in the same window. This is also the case with the crawlers of search engines, so your images will still get indexed.

