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!!
Passing a variable to a modal popup
Moderator: General Moderators
-
trickydicky
- Forum Newbie
- Posts: 6
- Joined: Wed Dec 30, 2009 12:58 pm
- 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
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:
Here would be what the image thumbnails would look like:
Then the popup.html template. Not being a JS guru, this is the only way I could think of to get the GET parameters:
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);
}Code: Select all
<img onclick="openwindow(this)" src="images/thumbs/someimage.jpg">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.
- daedalus__
- DevNet Resident
- Posts: 1925
- Joined: Thu Feb 09, 2006 4:52 pm
Re: Passing a variable to a modal popup
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
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
- 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
Haha! I never boot OUT of Linuxdaedalus__ 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
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.
- daedalus__
- DevNet Resident
- Posts: 1925
- Joined: Thu Feb 09, 2006 4:52 pm
Re: Passing a variable to a modal popup
music software :\
-
trickydicky
- Forum Newbie
- Posts: 6
- Joined: Wed Dec 30, 2009 12:58 pm
Re: Passing a variable to a modal popup
Ive been trying to figure out abra's code, but for the life of me i cant seem to get it to work..
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!!
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>
Sorry for the totally newb questions!!