Programming Forums > Script Programming > Perl

Ficus · Jan 24th, 2006, 4:01 PM

I've been told this can be done, I just don't know Perl well enough.

I have a large number of thumbnail images which when clicked on, I would like the enlarged image to show in a popup window. I have a template window I would like to use for all of the popups but I don't know how to insert the enlarged image into it. For example: The thumbnail image on the page is called 1234.jpg and its enlargement is named exactly the same only is located in directory: popup/1234.jpg. Is there a way to have the script automatically look for that image in that directory and call it into the popup template?

I've been at this for almost two weeks now and I'm not getting very far. I can use JavaScript to open the window, but still need a way to specify which window and which image.

Any insight to bring me sanity would be greatly appreciated
-F-

mackenga · Jan 24th, 2006, 6:01 PM

You don't strictly speaking need anything but JS for this one. This is off the top of my head and I'm no JS expert, so I may not be 100% right on all the details, but you can do something like this:

(Toggle Plain Text)

function popupImage(urlOfImage) {
  var win = window.open("");
  with (win.document) {
    open();
    write("your template ... " + urlOfImage + ".... rest of your template");
    close();
  }
}

Where I've put "your template ..." you have the first part of your template, leading up to the src=\" part of the IMG tag where you want the image, of course; after the image URL, you put the rest of your template. When you call close(), you're calling win.document.close(), which makes the on-the-fly page appear.

The with (object) { ... } syntax just saves me some typing. You could call win.document.open(), win.document.write() and win.document.close() if you prefer.

You'd call this from your thumbnail by putting an <A> tag around it with an onClick attribute but href set to "". I believe this should work. The onClick can just call the above function passing in the appropriate URL for the larger image.

Hope this helps!

Ficus · Jan 26th, 2006, 2:55 PM

mackenga

Thanks for your reply! I've been tinkering with the code you supplied and haven't quite got it. I'm just a little confused about where to put the template information. I have a file with stylesheets and images that I was hoping to reference. You mentioned:

Quote:

Where I've put "your template ..." you have the first part of your template, leading up to the src=\" part of the IMG tag where you want the image, of course; after the image URL, you put the rest of your template.

I'm not quite sure how to do this since my template contains all these different elements. I have supplied the main part of my template below so you can see what I mean.

(Toggle Plain Text)

<body bgcolor="#FFFFFF" marginheight="0" topmargin="0" rightmargin="0" leftmargin="0" marginwidth="0" bottommargin="0">
<div align="center">
  <table width="100%" height="100%"  border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td height="20" valign="top"><img src="../popBGheader.gif" width="100%" height="20" alt=""></td>
    </tr>
    <tr>
      <td><table width="100%"  border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td align="center"><img src="080105/popup/9102_coverpic.jpg" alt="" width="300" height="297" border="0"></td> <!--This is the main picture-->
        </tr>
        <tr>
          <td height="20" valign="top"><a href="javascript:self.close()"><img src="../closewindow.gif" hspace="5" border="0">Close Window</a></td>
        </tr>
      </table></td>
    </tr>
    <tr>
      <td height="18" valign="bottom" background="../popBGfootTop.gif"></td>
      </td>
    </tr>
	<tr>
	  <td align="center" height="32" valign="middle" background="../popBGfootBot.gif"><span class="pagination">&copy; 2005 etc...</span></td>
	</tr>
  </table>
</div>
</body>

I am getting there, just need to figure this out to see if the rest of the script is working. Thanks in advance!

-F-

Indigno · Feb 8th, 2006, 9:59 AM

200% easier with javascript.

DaWei · Feb 8th, 2006, 11:14 AM

I posted some example code for this recently.

(Toggle Plain Text)

function enlarge (wURL, sp)
{
	var specs = "width=800,height=600,top=30,left=30," +
	  			"screenx=30,screeny=30," +
			  	"resizable=yes,scrollbars=yes";
	if (sp) specs = sp;
	if (globalWin)
	{
		globalWin.close ();
		globalWin = "";
	}
	popWin = open (wURL, "popWindow", specs);
	popWin.focus ();
	globalWin = popWin;
	return popWin;
}

I don't usually implement it with that global variable, but this is an actual example of a case in which I had an additional goal. This pops a full-sized image into an appropriately sized window when the thumbnail is clicked. Note that the window size (and other features) may be passed in. If they are not, a default set is used.

EDIT: As a matter of fact, you can see this in action by clicking the "Digital Paintings" link in my signature.

mackenga · Feb 11th, 2006, 3:34 AM

DaWei's code is definitely superior to mine, but does insist on loading the image directly into the new browser window, which doesn't let you add any page decorations around it. Some combination of my little example and DaWei's is the best answer I think - opening the window without a toolbar and menubar and so on is much cleaner than leaving all that standard browser clutter lying around on the screen.

Anyway, sorry it took me so long to get back to you. Where my code says "your template ..." you put all the HTML code leading up to the part where you put in the URL of the actual image to open the enlargement of; so right up to the src=" part of the IMG tag that refers to the image.

After the URL, you put all of the rest of the code. This could get really messy but remember you can quote strings with single quotes in JS so you don't have to backslash escape every one of the double quotes in your HTML code, and you can join strings with + and put newlines anywhere outside strings you want, so you can actually lay out the code quite nicely:

(Toggle Plain Text)

write("<HTML>\n" +
      " <HEAD>\n" + ... and so on

The spaces at the starts of the strings and newlines at the ends are just so that the generated code keeps the nice layout - fairly pointless you might argue since nobody is ever likely to see it! What can I say? I'm a neat-freak.

Hope this helps.

DaWei · Feb 11th, 2006, 7:07 AM

McKenga's point is well taken. Once you have the handle to the window you can pop anything in there you like. I sometimes make "dialog boxes" in this fashion, thus precluding additional connections to the server.

dr.p · Feb 26th, 2006, 11:45 AM

Quote:

Originally Posted by Ficus

I have a large number of thumbnail images which when clicked on, I would like the enlarged image to show in a popup window. I have a template window I would like to use for all of the popups but I don't know how to insert the enlarged image into it.-F-

Ficus,

What I typically do is use a script to parse/display the HTML AND image, instead of linking directly to the image, or using JavaScript to output the HTML.

All you really need to do is pass the image name and/or location to script, e.g. "/cgi-bin/printimage.cgi?image=images/mypic.jpg"

Then, in the script, just get the "image" parameter value, and print out your entire template.

Example of printimage.cgi:

(Toggle Plain Text)

use CGI;
$cgi = new CGI;
$image = $cgi->param('image');
print "
<HTML>
 <HEAD> <TITLE>".$image."</TITLE> </HEAD>
 <BODY>
   <IMG SRC=\"".$image."\">
 </BODY>
</HTML>
";

As you can see, it doesn't take much code to do this. Adding error checking (to see if the image exists and print an error page, for example,) takes a little more, but not much.

Ficus · Mar 9th, 2006, 2:49 PM

Thank you everyone for your replies! I've been very busy and haven't gotten a chance to reply sooner. You all have given me some great ideas and things to try! I have been working on something that I have very close to functioning now, however, I'm just having trouble inserting the main image. I figure that if I can't get what I have to work, I'll try another method.

I feel like I am soooo close with this! If you want to take a quick look at it and see where I might be going wrong, that would be great! The images are just test images for now, and they are in a folder called popup. Just view the source to see the code.

The page with the thumbnails is located here and the popup page is here . Also, there seems to be an issue with Firefox where you can click on any part of the page and it will open the popup. This only happens x number of times where x is the number of thumbnails. After that it is fine.

Thanks in advance! Let me know if there is any other information I can provide.
-F-

DaWei · Mar 9th, 2006, 3:57 PM

Why are you making it so difficult/complicated? I suggest you read your thread again.

Jan 24th, 2006, 4:01 PM	#1
Ficus Newbie Join Date: Jan 2006 Posts: 12 Rep Power: 0	Can Perl do this window popup? I've been told this can be done, I just don't know Perl well enough. I have a large number of thumbnail images which when clicked on, I would like the enlarged image to show in a popup window. I have a template window I would like to use for all of the popups but I don't know how to insert the enlarged image into it. For example: The thumbnail image on the page is called 1234.jpg and its enlargement is named exactly the same only is located in directory: popup/1234.jpg. Is there a way to have the script automatically look for that image in that directory and call it into the popup template? I've been at this for almost two weeks now and I'm not getting very far. I can use JavaScript to open the window, but still need a way to specify which window and which image. Any insight to bring me sanity would be greatly appreciated -F-

Jan 24th, 2006, 6:01 PM	#2
mackenga Professional Programmer Join Date: Mar 2005 Location: Glasgow, Scotland Posts: 317 Rep Power: 4	You don't strictly speaking need anything but JS for this one. This is off the top of my head and I'm no JS expert, so I may not be 100% right on all the details, but you can do something like this: (Toggle Plain Text) function popupImage(urlOfImage) { var win = window.open(""); with (win.document) { open(); write("your template ... " + urlOfImage + ".... rest of your template"); close(); } } function popupImage(urlOfImage) { var win = window.open(""); with (win.document) { open(); write("your template ... " + urlOfImage + ".... rest of your template"); close(); } } Where I've put "your template ..." you have the first part of your template, leading up to the src=\" part of the IMG tag where you want the image, of course; after the image URL, you put the rest of your template. When you call close(), you're calling win.document.close(), which makes the on-the-fly page appear. The with (object) { ... } syntax just saves me some typing. You could call win.document.open(), win.document.write() and win.document.close() if you prefer. You'd call this from your thumbnail by putting an <A> tag around it with an onClick attribute but href set to "". I believe this should work. The onClick can just call the above function passing in the appropriate URL for the larger image. Hope this helps!

Feb 8th, 2006, 11:14 AM	#5
DaWei Resident Grouch Join Date: Jun 2005 Posts: 6,453 Rep Power: 10	I posted some example code for this recently. (Toggle Plain Text) function enlarge (wURL, sp) { var specs = "width=800,height=600,top=30,left=30," + "screenx=30,screeny=30," + "resizable=yes,scrollbars=yes"; if (sp) specs = sp; if (globalWin) { globalWin.close (); globalWin = ""; } popWin = open (wURL, "popWindow", specs); popWin.focus (); globalWin = popWin; return popWin; } function enlarge (wURL, sp) { var specs = "width=800,height=600,top=30,left=30," + "screenx=30,screeny=30," + "resizable=yes,scrollbars=yes"; if (sp) specs = sp; if (globalWin) { globalWin.close (); globalWin = ""; } popWin = open (wURL, "popWindow", specs); popWin.focus (); globalWin = popWin; return popWin; } I don't usually implement it with that global variable, but this is an actual example of a case in which I had an additional goal. This pops a full-sized image into an appropriately sized window when the thumbnail is clicked. Note that the window size (and other features) may be passed in. If they are not, a default set is used. EDIT: As a matter of fact, you can see this in action by clicking the "Digital Paintings" link in my signature. __________________ Abstraction doesn't make it impossible to write bad code; it makes it possible to write superior code. Contributor's Corner: Grumpy on C++ Exceptions DaWei on Pointers

Feb 11th, 2006, 3:34 AM	#6
mackenga Professional Programmer Join Date: Mar 2005 Location: Glasgow, Scotland Posts: 317 Rep Power: 4	DaWei's code is definitely superior to mine, but does insist on loading the image directly into the new browser window, which doesn't let you add any page decorations around it. Some combination of my little example and DaWei's is the best answer I think - opening the window without a toolbar and menubar and so on is much cleaner than leaving all that standard browser clutter lying around on the screen. Anyway, sorry it took me so long to get back to you. Where my code says "your template ..." you put all the HTML code leading up to the part where you put in the URL of the actual image to open the enlargement of; so right up to the src=" part of the IMG tag that refers to the image. After the URL, you put all of the rest of the code. This could get really messy but remember you can quote strings with single quotes in JS so you don't have to backslash escape every one of the double quotes in your HTML code, and you can join strings with + and put newlines anywhere outside strings you want, so you can actually lay out the code quite nicely: (Toggle Plain Text) write("<HTML>\n" + " <HEAD>\n" + ... and so on write("<HTML>\n" + " <HEAD>\n" + ... and so on The spaces at the starts of the strings and newlines at the ends are just so that the generated code keeps the nice layout - fairly pointless you might argue since nobody is ever likely to see it! What can I say? I'm a neat-freak. Hope this helps.

Feb 11th, 2006, 7:07 AM	#7
DaWei Resident Grouch Join Date: Jun 2005 Posts: 6,453 Rep Power: 10	McKenga's point is well taken. Once you have the handle to the window you can pop anything in there you like. I sometimes make "dialog boxes" in this fashion, thus precluding additional connections to the server. __________________ Abstraction doesn't make it impossible to write bad code; it makes it possible to write superior code. Contributor's Corner: Grumpy on C++ Exceptions DaWei on Pointers

Feb 8th, 2006, 9:59 AM	#4
Indigno Professional Programmer Join Date: Dec 2005 Location: Anywhere non-productive Posts: 267 Rep Power: 0	200% easier with javascript.

Mar 9th, 2006, 2:49 PM	#9
Ficus Newbie Join Date: Jan 2006 Posts: 12 Rep Power: 0	Thank you everyone for your replies! I've been very busy and haven't gotten a chance to reply sooner. You all have given me some great ideas and things to try! I have been working on something that I have very close to functioning now, however, I'm just having trouble inserting the main image. I figure that if I can't get what I have to work, I'll try another method. I feel like I am soooo close with this! If you want to take a quick look at it and see where I might be going wrong, that would be great! The images are just test images for now, and they are in a folder called popup. Just view the source to see the code. The page with the thumbnails is located here and the popup page is here . Also, there seems to be an issue with Firefox where you can click on any part of the page and it will open the popup. This only happens x number of times where x is the number of thumbnails. After that it is fine. Thanks in advance! Let me know if there is any other information I can provide. -F-

Mar 9th, 2006, 3:57 PM	#10
DaWei Resident Grouch Join Date: Jun 2005 Posts: 6,453 Rep Power: 10	Why are you making it so difficult/complicated? I suggest you read your thread again. __________________ Abstraction doesn't make it impossible to write bad code; it makes it possible to write superior code. Contributor's Corner: Grumpy on C++ Exceptions DaWei on Pointers

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Programming Forums > Script Programming > Perl

Can Perl do this window popup?