Passing a variable to a modal popup

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
trickydicky
Forum Newbie
Posts: 6
Joined: Wed Dec 30, 2009 12:58 pm

Passing a variable to a modal popup

Post 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!!
User avatar
AbraCadaver
DevNet Master
Posts: 2572
Joined: Mon Feb 24, 2003 10:12 am
Location: The Republic of Texas
Contact:

Re: Passing a variable to a modal popup

Post 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>
mysql_function(): WARNING: This extension is deprecated as of PHP 5.5.0, and will be removed in the future. Instead, the MySQLi or PDO_MySQLextension should be used. See also MySQL: choosing an API guide and related FAQ for more information.
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Re: Passing a variable to a modal popup

Post 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
User avatar
AbraCadaver
DevNet Master
Posts: 2572
Joined: Mon Feb 24, 2003 10:12 am
Location: The Republic of Texas
Contact:

Re: Passing a variable to a modal popup

Post 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 ;-)
mysql_function(): WARNING: This extension is deprecated as of PHP 5.5.0, and will be removed in the future. Instead, the MySQLi or PDO_MySQLextension should be used. See also MySQL: choosing an API guide and related FAQ for more information.
User avatar
daedalus__
DevNet Resident
Posts: 1925
Joined: Thu Feb 09, 2006 4:52 pm

Re: Passing a variable to a modal popup

Post by daedalus__ »

music software :\
trickydicky
Forum Newbie
Posts: 6
Joined: Wed Dec 30, 2009 12:58 pm

Re: Passing a variable to a modal popup

Post 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!!
Post Reply