Programming Forums > Script Programming > Perl

Ficus · Mar 15th, 2006, 10:59 AM

Well, I don't mean to make it complicated. I just don't have that much experience so it doesn't come as easily for me. Where specifically do you suggest I go back and read?

DaWei · Mar 15th, 2006, 12:00 PM

Post #5? I have made a page, deliberately fashioned after yours. I would, being myself, do some things differently, but that's beside the point. There are many ways and all good ways are good. For one thing, I'd probably generate at least part of the HTML on the server so as to have dynamically assigned IDs that I could reference easily. Note that there is not a shit-load of javascript on the page. Note further that I'd use two sets of images, a thumbnail, and a full-size. Thumbnails look like hell blown up, and full-size are too heavy a load for thumbnails. I'd also style whatever I wanted to click on as a pointer cursor.
Example

Ficus · Mar 15th, 2006, 5:29 PM

DaWei,
This looks great, thank you very much for putting all the time into this! I'm very open to suggestions, so if you want to comment on how you would do things, please do. My ideal way of doing this would be exactly what you mentioned about generating the HTML on the server. Actually, what I would really like to do is not have any javascript on the page, but have it attach the links to the images when the page loads. Do you know of any way to do this?

Your note about the two sets of images I am aware of. The images I used in that example were really just placeholder images and I didn't care what they looked like. So, no worries there...that I know how to do.

I made a new example based off what you gave me. I substituted in my popup template but I was a little confused by the pieces function. How does that work exactly? I think I understand that it takes the name of the thumbnail and adds "Big" before it. And I'm assuming this works because you have the two sets of images in the same directory. My situation is a little different in that each set of images has the same name only the larger ones are in a folder called "popup" which is one more deep. So:
small image directory = img/
large image directory = img/popup/

On my popup template, I have some javascript from a previous experiment that I think can probably be taken out, but I left it in case you wanted to take a look. I don't think it's creating the problem...but I could be wrong.

Here is my new example. Thanks again for your assistance!

DaWei · Mar 15th, 2006, 6:14 PM

The split function just breaks the thumbnail name into it's path constituents, so I can add the word 'Big', and reassemble it. With your setup, it would be even easier. At any rate, since you're interested in more dynamism, I'll put some more stuff here. Can't get to it before tomorrow, though. I may do it in Perl, but I may do it in PHP, which you should be able to translate easily enough. I haven't used Perl since 2000, so the PHP flows a tad more freely for me.

DaWei · Mar 16th, 2006, 4:39 PM

First off, with the normal http paradigm, you can't unilaterally open a popup window on the client from the server. If you want a popup window under normal conditions, you have to open it with client-side script. Once you've decided that script is necessary, you raise about as many questions as you answer: if you need programmatic, dynamic operations, should you implement them on the server, or on the client? You have to weigh the pros and cons. The example code that I've included has a minimal amount of script. There is no attempt to do such things as cleanly separate presentation and content. All the styles and script are on the page. PHP is interspersed throughout.

One can do this stuff in many different ways. The window currently just uses the image location as the URL. One could build a dynamic page that merely has the image as one portion. As a matter of fact, if I were doing this more thoroughly, I'd arrange a clickable popup that would show the CD cover OR descriptive material.

Note that I haven't made a 'big' image for each thumbnail, nor a page full of thumbnails. Those thumbnails that don't have an associated larger image do not show a cursor when hovered over, nor do they spawn a popup.

The 'category' selection menu is strictly HTML/CSS. Action is strictly via link. This can be written statically on the page or generated dynamically on the server according the the number of categories available.

The image specifications for the thumbnails and the popups are contained in a little demo database. It also has fields for specifying a descriptive file (or descriptions could be stored directly in the DB).

Here is the page and here is the code:
[php]
<?php
require_once ("functions.php");
$reference = $_SERVER ['HTTP_REFERER'];
demoConnect ();
$category = $_GET ['category'];
if (empty ($category)) $category = "ThangOne";
$picQuery = "SELECT * FROM Images
WHERE Category='$category'";
$pics = mysql_query ($picQuery) OR die (mysql_error ()." Query failure");
$nItems = mysql_num_rows ($pics);
$nCols = 3;
$nRows = $nItems / $nCols;
if ($nItems % $nCols) $nRows++;
print_r ($theStuff);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Popup Example</title>
<style type="text/css">
body
{
background-image: url(../images/paper.jpg);
}
.horizMenu
{
border: 1px inset #000000;
background-color:#ab3c4f;
color: #ffffff;
font-weight: bold;
}
.xp
{
cursor: pointer;
}
.label
{
border-right: 2px solid #ffffff;
}
.horizSelector
{
display: inline;
list-style: none;
border-right: 2px solid #ffffff;
border-collapse: collapse;
padding: 5px;
cursor: pointer;
}
.horizSelector a
{
text-decoration: none;
color: #ffffff;
}
.horizSelector a:hover
{
color: #CCFFFF;
}
</style>
<script type="text/javascript">
function popBig (wURL, specs)
{
var sp = "width=640,height=480,top=100,left=100," +
"screenx=100,screeny=100," +
"resizable=no,scrollbars=no";
if (specs) sp = specs;
popWin = open ("images/" + wURL, "popWindow", sp);
popWin.focus ();
return popWin;
}
</script>
</head>
<body>
<ul class="horizMenu" id="catSelect"><span class="label">Category: </span>
<li class="horizSelector"><a href="popexample.php?category=ThangOne">ThangOne</a></li>
<li class="horizSelector"><a href="popexample.php?category=ThangTwo">ThangTwo</a></li>
</ul>
<table class="imageTable" align="center">
<?php
for ($row = 0; $row < $nRows; $row++)
{
echo '<tr>';
for ($col = 0; $col < $nCols; $col++)
{
$info = mysql_fetch_array ($pics);
if ($info ['Cover'])
{
$class = "xp";
$action = 'onclick="popBig (\''.$info ['Cover'].'\');"';
}
else
{
$class = "nxp";
$action = "";
}
echo "<td>";
echo "<img class='{$class}' id='{$info ['ID']}'
src='images/{$info ['Thumb']}' width='160' height='120'
$action />";
echo "</td>";
}
echo '</tr>';
}
echo '</table>';
?>

</body>
</html>
[/php]

Ficus · Mar 20th, 2006, 4:46 PM

WOW! You've outdone yourself! This is really kind of you to put together this whole example. I've taken a quick look at it, but I'm going to look at it further when I have more time. I see you are pulling the images out of a db and building the page from there with all links dynamically added. If I understand correctly, the only way to have the image links dynamically created is to have a serverside script do it when the page loads. I guess that is pretty obvious huh. Ok, well let me think on this one and look at the code again...it's been a long day.

In the mean time, going back to the first client-side javascript that you wrote...

Quote:

Originally Posted by DaWei

The split function just breaks the thumbnail name into it's path constituents, so I can add the word 'Big', and reassemble it. With your setup, it would be even easier.

Whith regard to the above quote, in my situation, how would I set it up? I mentioned that my images have the same name, but are in different directories. On my popup template, I have this script where I want the image placed...I'm not sure if it needs modification or not, I'll have to first wait until I get the main script correct.

[HTML]
<script language="javaScript" type="text/javascript">

</script>[/HTML]

DaWei · Mar 20th, 2006, 5:32 PM

Suppose that your images are in the "little" and "big" directories, respectively, and that those are subdirectories of the current directory. Suppose further that the image in question is "purtygal" and that name is stored in 'curImage'. The thumbnail would be referenced by "little/"+curImage and the enlargement by "big/"+curImage. Or similar. Suppose you wanted to enlarge the thumbnail from an <img> element with the src equal to "little/purtygal.png" and an id equal to "img1". You could grab a value with myPic = document.getElementById ("img1").src, break it up with pathArray=myPic.split ("/"). pathArray [0] would be "little", pathArray [1] would be "purtygal.png". Then you enlarge "big/" + pathArray [1]. You see the approaches. Numerous and not onerous.

I apologize for popping the PHP on you instead of Perl, but it was much more time-effective for me to do that.

Ficus · Mar 21st, 2006, 4:25 PM

Quote:

Originally Posted by DaWei

Suppose you wanted to enlarge the thumbnail from an <img> element with the src equal to "little/purtygal.png" and an id equal to "img1".

Yes, this is basically what I want to do...except I don't think that I can use img id. Because the pages are dynamically built, I never know how many images will be on a page so I'm not sure how id's would get assigned to them automatically. I was thinking of using (if it exists, which I think it does) document.getElementByFileName or ImageName or something like that.

Quote:

Originally Posted by DaWei

You could grab a value with myPic = document.getElementById ("img1").src, break it up with pathArray=myPic.split ("/"). pathArray [0] would be "little", pathArray [1] would be "purtygal.png". Then you enlarge "big/" + pathArray [1]. You see the approaches. Numerous and not onerous.

Ok, with the above, how do I actually "grab" that? Do I just put it in the script as a line by itself? Sorry to be such a neophite. Below is your original script that I tried to modify for my situation...it's not purty.
[HTML]function enlarge (wURL, sp)
{
myPic = document.getElementById ("img1").src //Instead of id, perhaps image name?
var curImage = wURL.split ('/');
var target = "img/popup/" + curImage;
var specs = "width=400,height=400,top=50,left=50," +
"screenx=50,screeny=50," +
"resizable=yes,scrollbars=yes";
if (sp) specs = sp;
popWin = open ( target="POPpagePOPTEMP6.html", "popWindow", specs);
popWin.focus ();
return popWin;
}[/HTML]

Quote:

Originally Posted by DaWei

I apologize for popping the PHP on you instead of Perl, but it was much more time-effective for me to do that.

No worries. I actually know more PHP than I do Perl. The page where this script is eventually going is done in Perl, that's why I originally posted here. I appreciate all of the time you have spend on this, I owe you.

DaWei · Mar 21st, 2006, 4:48 PM

Separate your server-side code, that builds your page, from any client-side code. This takes place in your mind if you understand the paradigm. SELECT thumb, blowup, blurb, category FROM myImages WHERE category='dogs' OR category='hydrants'. Now you have a result set of unknown size. Either get the number of rows, or use something like while ($row = mysql_fetch_assoc ($result). You might want to get the number in advance so you can calculate how many rows you need at some number of images per row. Then loop and construct the page:

(Toggle Plain Text)

for ($i = 0; $i < $numRows; $i++)
{
   for ($j = 0; $j < $numCols; $j++)
   {
        // Build my image here with thumb data as src, blurb about clicking to enlarge,
           onclick enlarge function referencing blowup as url.
   ...
}

When you build the HTML, you build the IDs dynamically:

(Toggle Plain Text)

 
id="row-"<?php echo $i;?>-<?php echo $j;?>

OR all at once,

(Toggle Plain Text)

<?php
echo 'id="row-'.$i.'-'.$j.'" ....';
...
?>

...whatever flips her skirt up, ya know.

Ficus · Mar 23rd, 2006, 8:59 AM

Thank you, this makes sense. I'm going to pass it along to the person doing the server side construction and that should help. I'm not sure how the db is set up so I can't really test it untill it gets put in.

If I could just quickly jump back to the javascript that you supplied, I was trying to get that working so I could use it on a different page. I don't think that I put the split in correctly. The popup page comes up correctly, but I don't think I have the correct code on that page for the image to get inserted into it properly. Here is the page and it's popup . Thanks!

Mar 15th, 2006, 12:00 PM	#12
DaWei Resident Grouch Join Date: Jun 2005 Posts: 6,453 Rep Power: 10	Post #5? I have made a page, deliberately fashioned after yours. I would, being myself, do some things differently, but that's beside the point. There are many ways and all good ways are good. For one thing, I'd probably generate at least part of the HTML on the server so as to have dynamically assigned IDs that I could reference easily. Note that there is not a shit-load of javascript on the page. Note further that I'd use two sets of images, a thumbnail, and a full-size. Thumbnails look like hell blown up, and full-size are too heavy a load for thumbnails. I'd also style whatever I wanted to click on as a pointer cursor. Example __________________ 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

Mar 15th, 2006, 6:14 PM	#14
DaWei Resident Grouch Join Date: Jun 2005 Posts: 6,453 Rep Power: 10	The split function just breaks the thumbnail name into it's path constituents, so I can add the word 'Big', and reassemble it. With your setup, it would be even easier. At any rate, since you're interested in more dynamism, I'll put some more stuff here. Can't get to it before tomorrow, though. I may do it in Perl, but I may do it in PHP, which you should be able to translate easily enough. I haven't used Perl since 2000, so the PHP flows a tad more freely for me. __________________ 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

Mar 16th, 2006, 4:39 PM	#15
DaWei Resident Grouch Join Date: Jun 2005 Posts: 6,453 Rep Power: 10	First off, with the normal http paradigm, you can't unilaterally open a popup window on the client from the server. If you want a popup window under normal conditions, you have to open it with client-side script. Once you've decided that script is necessary, you raise about as many questions as you answer: if you need programmatic, dynamic operations, should you implement them on the server, or on the client? You have to weigh the pros and cons. The example code that I've included has a minimal amount of script. There is no attempt to do such things as cleanly separate presentation and content. All the styles and script are on the page. PHP is interspersed throughout. One can do this stuff in many different ways. The window currently just uses the image location as the URL. One could build a dynamic page that merely has the image as one portion. As a matter of fact, if I were doing this more thoroughly, I'd arrange a clickable popup that would show the CD cover OR descriptive material. Note that I haven't made a 'big' image for each thumbnail, nor a page full of thumbnails. Those thumbnails that don't have an associated larger image do not show a cursor when hovered over, nor do they spawn a popup. The 'category' selection menu is strictly HTML/CSS. Action is strictly via link. This can be written statically on the page or generated dynamically on the server according the the number of categories available. The image specifications for the thumbnails and the popups are contained in a little demo database. It also has fields for specifying a descriptive file (or descriptions could be stored directly in the DB). Here is the page and here is the code: [php] <?php require_once ("functions.php"); $reference = $_SERVER ['HTTP_REFERER']; demoConnect (); $category = $_GET ['category']; if (empty ($category)) $category = "ThangOne"; $picQuery = "SELECT * FROM Images WHERE Category='$category'"; $pics = mysql_query ($picQuery) OR die (mysql_error ()." Query failure"); $nItems = mysql_num_rows ($pics); $nCols = 3; $nRows = $nItems / $nCols; if ($nItems % $nCols) $nRows++; print_r ($theStuff); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Popup Example</title> <style type="text/css"> body { background-image: url(../images/paper.jpg); } .horizMenu { border: 1px inset #000000; background-color:#ab3c4f; color: #ffffff; font-weight: bold; } .xp { cursor: pointer; } .label { border-right: 2px solid #ffffff; } .horizSelector { display: inline; list-style: none; border-right: 2px solid #ffffff; border-collapse: collapse; padding: 5px; cursor: pointer; } .horizSelector a { text-decoration: none; color: #ffffff; } .horizSelector a:hover { color: #CCFFFF; } </style> <script type="text/javascript"> function popBig (wURL, specs) { var sp = "width=640,height=480,top=100,left=100," + "screenx=100,screeny=100," + "resizable=no,scrollbars=no"; if (specs) sp = specs; popWin = open ("images/" + wURL, "popWindow", sp); popWin.focus (); return popWin; } </script> </head> <body> <ul class="horizMenu" id="catSelect"><span class="label">Category: </span> <li class="horizSelector"><a href="popexample.php?category=ThangOne">ThangOne</a></li> <li class="horizSelector"><a href="popexample.php?category=ThangTwo">ThangTwo</a></li> </ul> <table class="imageTable" align="center"> <?php for ($row = 0; $row < $nRows; $row++) { echo '<tr>'; for ($col = 0; $col < $nCols; $col++) { $info = mysql_fetch_array ($pics); if ($info ['Cover']) { $class = "xp"; $action = 'onclick="popBig (\''.$info ['Cover'].'\');"'; } else { $class = "nxp"; $action = ""; } echo "<td>"; echo "<img class='{$class}' id='{$info ['ID']}' src='images/{$info ['Thumb']}' width='160' height='120' $action />"; echo "</td>"; } echo '</tr>'; } echo '</table>'; ?> </body> </html> [/php] __________________ 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

Mar 20th, 2006, 5:32 PM	#17
DaWei Resident Grouch Join Date: Jun 2005 Posts: 6,453 Rep Power: 10	Suppose that your images are in the "little" and "big" directories, respectively, and that those are subdirectories of the current directory. Suppose further that the image in question is "purtygal" and that name is stored in 'curImage'. The thumbnail would be referenced by "little/"+curImage and the enlargement by "big/"+curImage. Or similar. Suppose you wanted to enlarge the thumbnail from an <img> element with the src equal to "little/purtygal.png" and an id equal to "img1". You could grab a value with myPic = document.getElementById ("img1").src, break it up with pathArray=myPic.split ("/"). pathArray [0] would be "little", pathArray [1] would be "purtygal.png". Then you enlarge "big/" + pathArray [1]. You see the approaches. Numerous and not onerous. I apologize for popping the PHP on you instead of Perl, but it was much more time-effective for me to do that. __________________ 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

Mar 21st, 2006, 4:48 PM	#19
DaWei Resident Grouch Join Date: Jun 2005 Posts: 6,453 Rep Power: 10	Separate your server-side code, that builds your page, from any client-side code. This takes place in your mind if you understand the paradigm. SELECT thumb, blowup, blurb, category FROM myImages WHERE category='dogs' OR category='hydrants'. Now you have a result set of unknown size. Either get the number of rows, or use something like while ($row = mysql_fetch_assoc ($result). You might want to get the number in advance so you can calculate how many rows you need at some number of images per row. Then loop and construct the page: (Toggle Plain Text) for ($i = 0; $i < $numRows; $i++) { for ($j = 0; $j < $numCols; $j++) { // Build my image here with thumb data as src, blurb about clicking to enlarge, onclick enlarge function referencing blowup as url. ... } for ($i = 0; $i < $numRows; $i++) { for ($j = 0; $j < $numCols; $j++) { // Build my image here with thumb data as src, blurb about clicking to enlarge, onclick enlarge function referencing blowup as url. ... } When you build the HTML, you build the IDs dynamically: (Toggle Plain Text) id="row-"<?php echo $i;?>-<?php echo $j;?> id="row-"<?php echo $i;?>-<?php echo $j;?> OR all at once, (Toggle Plain Text) <?php echo 'id="row-'.$i.'-'.$j.'" ....'; ... ?> <?php echo 'id="row-'.$i.'-'.$j.'" ....'; ... ?> ...whatever flips her skirt up, ya know. __________________ 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

Mar 15th, 2006, 10:59 AM	#11
Ficus Newbie Join Date: Jan 2006 Posts: 12 Rep Power: 0	Well, I don't mean to make it complicated. I just don't have that much experience so it doesn't come as easily for me. Where specifically do you suggest I go back and read?

Mar 15th, 2006, 5:29 PM	#13
Ficus Newbie Join Date: Jan 2006 Posts: 12 Rep Power: 0	DaWei, This looks great, thank you very much for putting all the time into this! I'm very open to suggestions, so if you want to comment on how you would do things, please do. My ideal way of doing this would be exactly what you mentioned about generating the HTML on the server. Actually, what I would really like to do is not have any javascript on the page, but have it attach the links to the images when the page loads. Do you know of any way to do this? Your note about the two sets of images I am aware of. The images I used in that example were really just placeholder images and I didn't care what they looked like. So, no worries there...that I know how to do. I made a new example based off what you gave me. I substituted in my popup template but I was a little confused by the pieces function. How does that work exactly? I think I understand that it takes the name of the thumbnail and adds "Big" before it. And I'm assuming this works because you have the two sets of images in the same directory. My situation is a little different in that each set of images has the same name only the larger ones are in a folder called "popup" which is one more deep. So: small image directory = img/ large image directory = img/popup/ On my popup template, I have some javascript from a previous experiment that I think can probably be taken out, but I left it in case you wanted to take a look. I don't think it's creating the problem...but I could be wrong. Here is my new example. Thanks again for your assistance!

Mar 23rd, 2006, 8:59 AM	#20
Ficus Newbie Join Date: Jan 2006 Posts: 12 Rep Power: 0	Thank you, this makes sense. I'm going to pass it along to the person doing the server side construction and that should help. I'm not sure how the db is set up so I can't really test it untill it gets put in. If I could just quickly jump back to the javascript that you supplied, I was trying to get that working so I could use it on a different page. I don't think that I put the split in correctly. The popup page comes up correctly, but I don't think I have the correct code on that page for the image to get inserted into it properly. Here is the page and it's popup . Thanks!

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?