Page 1 of 1

Passing a variable to a modal popup

Posted: Wed Dec 30, 2009 1:53 pm
by trickydicky
Hey,

Let me start by saying that im relatively new to PHP, and have come from an ASP background. Im currently building a image gallery in a bid to understand PHP, so i apologise if my question sounds newbish..

Anyway i have an image gallery that loads every image into the page from a single folder.Id like for users to be able to click on the thumbnail of the image they want to view and for a modal popup to appear. Because the popup itself would be the same i was hoping to use a template for the modal popup that would use the variable of the image clicked by using the onclick event. What im struggling to understand is how best to pass the image name to the javascript that then creates the modal popup. I hope that makes sense!!

Any information people would have or sites that might give me a hint would be really great!!

Re: Passing a variable to a modal popup

Posted: Wed Dec 30, 2009 2:56 pm
by AbraCadaver
Not a stitch of PHP code in the following, but I just dug this up from a project I did a long time ago. There may be a better way to do it, but I thought it was slick at the time :-)

Javascript function to popup the window with the popup.html template and set some window parameters:

Code: Select all

function openwindow(image)
{
    parts = image.src.split("/");
    popimage = parts[parts.length - 1];
    
    windowfeatures = "innerHeight=400, innerWidth=400, channelmode=0, dependent=0, directories=0,
        fullscreen=0, location=0, menubar=0, resizable=0, scrollbars=0, status=0, toolbar=0";
 
    newwindow = window.open("popup.html?popimage=" + popimage, "Window Title", windowfeatures);
}
Here would be what the image thumbnails would look like:

Code: Select all

<img onclick="openwindow(this)" src="images/thumbs/someimage.jpg">
Then the popup.html template. Not being a JS guru, this is the only way I could think of to get the GET parameters:

Code: Select all

<html>
<head>
<title>Popup Title</title>
</head>
<body>
<script type="text/javascript" language="JavaScript">
    parts = location.search.split("=");
    popimage = parts[parts.length - 1];
    document.write('<img src="images/' + popimage + '" width="360" height="360">');
</script>
</body>
</html>

Re: Passing a variable to a modal popup

Posted: Wed Dec 30, 2009 3:09 pm
by daedalus__
oh thats neat abra

with a little css and a tad tiny bit more complicated javascript you could have styled divs pop up with the image in it!

ill post somethign tonight after i boot back to linux

Re: Passing a variable to a modal popup

Posted: Wed Dec 30, 2009 3:20 pm
by AbraCadaver
daedalus__ wrote:oh thats neat abra

with a little css and a tad tiny bit more complicated javascript you could have styled divs pop up with the image in it!

ill post somethign tonight after i boot back to linux
Haha! I never boot OUT of Linux ;-)

Re: Passing a variable to a modal popup

Posted: Wed Dec 30, 2009 3:21 pm
by daedalus__
music software :\

Re: Passing a variable to a modal popup

Posted: Fri Jan 01, 2010 10:22 am
by trickydicky
Ive been trying to figure out abra's code, but for the life of me i cant seem to get it to work..

Code: Select all

 
<html>
<head>
<title>Popup </title>
<script type="text/javascript">
<!--
function openwindow(image)
{
    parts = image.src.split("/");
    popimage = parts[parts.length - 1];
    windowfeatures = "innerHeight=400, innerWidth=400, channelmode=0, dependent=0, directories=0,
       fullscreen=0, location=0, menubar=0, resizable=0, scrollbars=0, status=0, toolbar=0";
       newwindow = window.open("popup.html?popimage=" + popimage, "Window Title", windowfeatures);
}
//-->
</script>
</head>
<body>
<img onclick="openwindow(this)" src="images/thumbs/someimage.jpg">
</body>
</html>
 
I cant say i know anything of use when it comes to javascript, and it doesnt seem to work. The image isnt clickable and i cant say i understand how the 'this' statement works. Does the image need an ID tag or something??

Sorry for the totally newb questions!!