PHP: Popup Image Script
Back when I put together my photolog I was looking for a popup script to pop up my images without having to specify width or height or creating a separate html document for each image.
Amy of domesticat.net had just come out with a php/javascript solution (no longer available) and it was interesting, but the popups came up in a default size window and then were resized after the image was loaded. It seemed to rely on javascript too much for me and was a bit buggy.
After searching through a few scripts and not really finding any to suit my needs, I found out about the getimagesize function in PHP and fell in love with it and started using it to figure out the width/height of my popups. After that it, was all pretty simple.
A few days ago, I suggested the meat of the script to Amy and she took the code, improved it and wrote an EXCELLENT tutorial on how to use it. That script is now available HERE [link updated Dec 9] on her site for download!!
May 3rd, 2002 at 11:40 pm
That is wonderfully cool!
Thanks for pointing it out! Plus it gave me an excuse to check out your photos, which I love!
May 4th, 2002 at 12:55 pm
This is awesome! It will make updating my photos a snap
Thanks Lynda and Amy!
May 12th, 2002 at 4:26 pm
I too came across a pure JS based script for image popup w/o writing the html file. The script takes care of the HTML margins and the Title too. The script is felixable enuf for further customisation. I have done few tweeks to put it to my use at netahoy.org
The code as follows for the img_pop.js
===============================
/*
Image Popup with no margins script Version-2.1 Date-May,2002
Original script by Jon Udell
http://www.byte.com/documents/s=412/byt20010119s0001/index4.htm
Modified by Willem van Schaik
http://www.schaik.com/nlsat/nlsat.html
Additional tweeks by Amit 'Netahoy' Agarwal
http://www.netahoy.org
Dreamweaver Extension coming up shortly @ netahoy.org
*/
function openWindow0 (doc, win, width, height, title)
{
winHeight = height + 12;
winWidth = width + 0;
newWin = window.open (", win, 'resizable=no,toolbar=no,menubar=no,width=' + winWidth + ',height=' + winHeight );
newWin.document.writeln (" + title + ");
newWin.document.writeln ('
' + title + ");
}
function openWindow1 (doc, win, width, height, title, bgcolor, leftmargin, rightmargin)
{
winHeight = height + 12;
winWidth = width + 0;
newWin = window.open (", win, 'resizable=no,toolbar=no,menubar=no,width=' + winWidth + ',height=' + winHeight );
newWin.document.writeln (" + title + ");
newWin.document.writeln ('
' + title + ");
}
=================================
Code for HTML file
==================
Lisa Ray was in town. Here is a nice cool photo taken from the
Delhi Times
May 12th, 2002 at 4:28 pm
ohhhh the HTML isn't showing up….. maybe I 'll have a small tutorial up on my site. Will keep the post update either way.
June 5th, 2002 at 1:48 pm
I had someone write to me a few days ago, requesting a small change to my script. It's small, but it might be of interest to those of you who like to post pictures using thumbnails instead of with text links.
For the revised version of the script, change the first line of the function popup() line to this:
function popup($file, $title, $thumbnail_url, $width=false, $height=false) {
Then change your print line to this (take out the line breaks; they're for legibility):
print "<a href=\"#\" onclick=\"window.open('http://WEB.ADDRESS.TO/YOUR/POPUP.PHP?z=
$path$file&width=$width&height=$height&title=$title_urlencoded',
'photopopup','width=$width,height=$height,directories=no,
location=no,menubar=no,scrollbars=no,status=no,toolbar=no,
resizable=no,screenx=150,screeny=150');return false\"
onMouseOver=\"window.status='photo popup: $title_mouseover';return true\"
onMouseOut=\"window.status=";return true\"><img src=\"$thumbnail_url\"
alt=\"$title\"></a>";
July 15th, 2002 at 2:48 am
I'm that "Willem" listed as "Modified by" in the original code. I just substantially improved on this piece of javascript. Not so much by changing the routine, but a different way to call it. Don't use the "onclick" attribute, but just do:
<A HREF="javascript:openWindow(……)"><IMG SRC="….."></A>
The main window will not scroll anymore and this method is browser-safe for IE and NS.
June 21st, 2003 at 1:54 pm
why all angels cry