How To Send Image In Web Page To A Pop-Up Window?

[phpBeginner06]

Can anyone tell/show me the easiest way to send a image from one page to another? I am trying to create a thumbnail gallery with 9 thumbnails and 1 main image. When the end user clicks on a thumbnail I use JavaScript to change to main image [color=red]javascript:document.MainPictureName.src="";[/color] - and then if the end user clicks on the main image; I want a pop-up to come up with a bigger image of the main image. Do I have to do this through DB or can I just use variables and functions. Any and all help would be greatly appericiated.

[mainewoods]

wrap your large image in a web link and assign an id="" to that link. Also give the link a target="_blank" attribute so the link loads in a new window as well.  When the user clicks on a thumbnail, as well as executing the javascript you showed above, also execute this javascript:
[code]document.getElementById('linkIDname").href = 'url to the largest image';[/code]
--when the larger image is clicked a new window will open with the largest image

[phpBeginner06]

mainewoods that works out ok, but not quit what I looking for. I want to dynamically send the image/image src from the main page to a pop-up window using PHP; where I can set the properties of the pop-up (ie dimensions,attributes,title,background and etc). How can I do this; any examples would be great - still trying to learn PHP - not quit sure how to accomplish this. I have read articles about sending the image to DB and posting it to pop-up. Is this the way to accomplish this or is there another way? How do I go about doing this?

[taith]

$text can be a thumbnail or text
$link can be to a file, or a picture

[code]<?
function popup($text, $link, $name="myWindow", $height="300", $width="300", $resizable="0", $status="0", $class=""){
return '<a href="#" onclick=\'javascript: window.open("'.$link.'", "'.$name.'", "status='.$status.', height='.$height.', width='.$width.', resizable='.$resizable.'")\' class='.$class.'>'.$text.'</a>';
}
?>[/code]

[Davka]

Are you trying to dynamically set the properties of the pop-up depending on which image you have loaded? Not sure what you're trying to accomplish here....

You can set the attributes with javascript easily enough:

window.open("some_url","window_name","location,height=100,width=100");

You can also add:

menubar
status
scrollbars
resizable
toolbar
location
directories

and more:

http://www.webmonkey.com/webmonkey/98/03/index3a_page5.html?tw=programming

[mainewoods]

first of all, did you know that you don't need a whole html page for the popup? A url like "http://domain.com/somefile.jpg" can load in the browser fine and will just show the picture, no html needed.  There are only two ways to generate a popup window, either use the target="_blank" like I posted, or use the window.open javascript function as posted by Davka.  If you want to control the size of the popup and other attributes like menu display, then you will have to go with the window.open javascript function.

Point is that you will have to use html or javascript to open the window to start.  If you want to display the image in a whole html page, you can do something like this:
[code]window.open("http://domain.com/showpic.php?picurl=" + escape(largestpicurl),"window_name","location,height=100,width=100");[/code]
--notice the use of url passing of the largestpicurl variable! that makes it available to the showpic.php page to be processed.
--wrap the larger pic on the page with a link like this:
[code]<a href="javascript: window.open('http://domain.com/showpic.php?picurl=' + escape(largestpicurl),'window_name','location,height=100,width=100');"><img src="largerpicurl"></a>[/code]
--when someone clicks on a thumbnail, do like this:
[code]<a href="javascript:document.MainPictureName.src='setthis'; largestpicurl = 'set this as well';">thumbnail</a>[/code]
--that sets both the MainPictureName.src value and the value of the largestpicurl variable in case the popup code above is executed.
--define the largerpicurl variable in the head of your original page so it's available throughout the source code.
--you need to do all that above before you start implementing the php code of the popup page: 'http://domain.com/showpic.php'

[phpBeginner06]

502 Error - Bad Gateway

I cannot post the code that I made and I can not upload any files (ie txt, html, external js).

Is JavaScript Function Codes not allowed on these forums?

[Davka]

To post javascript:

You need to click on the little hashmark button ( # ) above your post and enter your code between the resulting [b]code [/b]and [b]/code[/b] tags.

[code]The result posts to the forum like so.[/code]

[phpBeginner06]

I used the code tags, but it still give me the 502 Error - Bad Gateway or sent me to a page that did not exist.

[Davka]

Are you including the script and /script tags? If you leave them out, it seems to work fine:

[code]function frog(legs,wings)
{
if (window.froglegs);
{
window.status='Yum!';
}else{
form.elements[0].value==null;
}}
[/code]

[phpBeginner06]

Hey Guys - Thanks For All The Help - I tried the examples that you showed me; but never could quit get them to work; so I came up with a little something of my own. It is not PHP based; it is JavaScript Based, but I am sure that some of you that are a lot better at PHP, then I am; could convert it over to PHP (if you wanted to). The JavaScript version I wrote works great for me; I incorporated a few of your ideas with a few of my own and it turned out pretty good. There is no image preloader; so if the person who uses this script wants a faster load time, they will have to either use a JavaScript preloader or optimize their images. So here goes; create a HTML page and put the following code in it (name the page what ever you want to). All of the variables for your thumbnail images and main image will be in this page; so it is easily customizable to your needs.

[code]
<style>
.thumbs {width:300px;padding-left:10px}
.thumbs IMG {border:solid 1px silver;width:75px;height:75px;cursor:hand;margin-right:5px;margin-bottom:5px}
</style>

<!--
***********************************************
Title: Thumbnail Gallery with Pop-Up Windows
Author: Shannon Spake
Website: http://www.famous-static.com
License: Open Source
Created: 11-26-2006
Updated: Never
***********************************************
-->

var image1 = "http://www.domain.com/2004-Honda-Accord-EX-driver.JPG"
var image2 = "http://www.domain.com/2004-Honda-Accord-EX-pass.JPG"
var image3 = "http://www.domain.com/2004-Honda-Accord-EX-front.JPG"
var image4 = "http://www.domain.com/2004-Honda-Accord-EX-back.JPG"
var image5 = "http://www.domain.com/2004-Honda-Accord-EX-int-driver-front.JPG"
var image6 = "http://www.domain.com/2004-Honda-Accord-EX-int-driver-back.JPG"
var image7 = "http://www.domain.com/2004-Honda-Accord-EX-int-pass-front.JPG"
var image8 = "http://www.domain.com/2004-Honda-Accord-EX-int-pass-back.JPG"
var image9 = "http://www.domain.com/2004-Honda-Accord-EX-engine.JPG"

function pu1()
{
window.open('pu.html?"'+image1+'"','window','width=500 height=400');
}
function pu2()
{
window.open('pu.html?"'+image2+'"','window','width=500 height=400');
}
function pu3()
{
window.open('pu.html?"'+image3+'"','window','width=500 height=400');
}
function pu4()
{
window.open('pu.html?"'+image4+'"','window','width=500 height=400');
}
function pu5()
{
window.open('pu.html?"'+image5+'"','window','width=500 height=400');
}
function pu6()
{
window.open('pu.html?"'+image6+'"','window','width=500 height=400');
}
function pu7()
{
window.open('pu.html?"'+image7+'"','window','width=500 height=400');
}
function pu8()
{
window.open('pu.html?"'+image8+'"','window','width=500 height=400');
}
function pu9()
{
window.open('pu.html?"'+image9+'"','window','width=500 height=400');
}
function changePic1()
{
document.mainpic.src=""+image1+"";
document.getElementById('mainpicLink').href='javascript:pu1()';
}
function changePic2()
{
document.mainpic.src=""+image2+"";
document.getElementById('mainpicLink').href='javascript:pu2()';
}
function changePic3()
{
document.mainpic.src=""+image3+"";
document.getElementById('mainpicLink').href='javascript:pu3()';
}
function changePic4()
{
document.mainpic.src=""+image4+"";
document.getElementById('mainpicLink').href='javascript:pu4()';
}
function changePic5()
{
document.mainpic.src=""+image5+"";
document.getElementById('mainpicLink').href='javascript:pu5()';
}
function changePic6()
{
document.mainpic.src=""+image6+"";
document.getElementById('mainpicLink').href='javascript:pu6()';
}
function changePic7()
{
document.mainpic.src=""+image7+"";
document.getElementById('mainpicLink').href='javascript:pu7()';
}
function changePic8()
{
document.mainpic.src=""+image8+"";
document.getElementById('mainpicLink').href='javascript:pu8()';
}
function changePic8()
{
document.mainpic.src=""+image8+"";
document.getElementById('mainpicLink').href='javascript:pu8()';
}
function changePic9()
{
document.mainpic.src=""+image9+"";
document.getElementById('mainpicLink').href='javascript:pu9()';
}

</head>

<body>

<center>
<table width=500px>
<td>
document.write("<a id='mainpicLink' href='javascript:pu1()'><img name='mainpic' src='"+image1+"' width=250 height=200 style='border:solid 1px silver'></a>");
</td>
<td class="thumbs">
document.write("<img src='"+image1+"' onclick='changePic1()'>");
document.write("<img src='"+image2+"' onclick='changePic2()'>");
document.write("<img src='"+image3+"' onclick='changePic3()'>");
document.write("<img src='"+image4+"' onclick='changePic4()'>");
document.write("<img src='"+image5+"' onclick='changePic5()'>");
document.write("<img src='"+image6+"' onclick='changePic6()'>");
document.write("<img src='"+image7+"' onclick='changePic7()'>");
document.write("<img src='"+image8+"' onclick='changePic8()'>");
document.write("<img src='"+image9+"' onclick='changePic9()'>");
</td>
</table>
</center>
[/code]

Then create a HTML page named "pu.html" and insert the following code into it.

[code]
document.write('<html><head><title>Enlarged Vehicle Picture</title></head><body style=margin:0><img src='+location.search.substring(1)+' width=500 height=400 galleryimg=no></body></html>');
[/code]

If you want to change the attributes of "pu.html" page (ie. image size, title, and etc.); you will have to open the source and change them manually.

You will have to add JavaScript Tags as required for each segment of code.

I know this is a forum for PHP and I hope this can be converted by someone to PHP, but if not I hope others; who do not know that much yet about PHP can use it effectively.