tgribble Posted May 17, 2011 Share Posted May 17, 2011 hi there i have a basic image gallery. it displays smaller thumbnails in a folder and when you click on them it displays a larger image. how can i make the larger image open in a seperate window of 640x480 when the thumbnail is clicked? thanks here is the code: <?php include('connect.php'); $images = "images/"; # Location of small versions $big = "big/"; # Location of big versions (assumed to be a subdir of above) $cols = 4; # Number of columns to display if ($handle = opendir($images)) { while (false !== ($file = readdir($handle))) { if ($file != "." && $file != ".." && $file != rtrim($big,"/")) { $files[] = $file; } } closedir($handle); } $colCtr = 0; echo '<table width="50%" cellspacing="3" align=center ><tr>'; foreach($files as $file) { if($colCtr %$cols == 0) echo '</tr><tr><td colspan="10" ></td></tr><tr>'; echo '<td ><a href="' . $images . $big . $file . '" ><img src="' . $images . $file . '" /></a></td>'; $colCtr++; } echo '</table>' . "\r\n"; ?> Quote Link to comment Share on other sites More sharing options...
The Letter E Posted May 17, 2011 Share Posted May 17, 2011 you gotta use Javascript. for instance... <script type="text/javascript"> function newImageWindow(){ //some javascript function that opens a popup window here } </script> <?php //build your link dynamically with the function in it echo '<a href="#" onclick="newImageWindow();"><img src="myimage.jpg"></a> ?> something like that is what you need. Quote Link to comment Share on other sites More sharing options...
tgribble Posted May 17, 2011 Author Share Posted May 17, 2011 thanks. where would i have to put that in the code i have given? Quote Link to comment Share on other sites More sharing options...
QuickOldCar Posted May 17, 2011 Share Posted May 17, 2011 echo '<td ><a href="' . $images . $big . $file . '" TARGET="_blank"><img src="' . $images . $file . '" /></a></td>'; Quote Link to comment Share on other sites More sharing options...
The Letter E Posted May 17, 2011 Share Posted May 17, 2011 echo '<td ><a href="' . $images . $big . $file . '" TARGET="_blank"><img src="' . $images . $file . '" /></a></td>'; This method will not allow you to specify a window size. It will most likely just open the image in a new tab. But, it's MUCH less of a hassle. Quote Link to comment Share on other sites More sharing options...
The Letter E Posted May 17, 2011 Share Posted May 17, 2011 check this out for more info on using a javascript popup style: http://www.javascript-coder.com/window-popup/javascript-window-open.phtml Quote Link to comment Share on other sites More sharing options...
tgribble Posted May 18, 2011 Author Share Posted May 18, 2011 thanks quick and E i tried that before asking for help but it does not work. i t opens the larger image in the same window and then you just have to use "back" to get back to the gallery. any other ideas? Quote Link to comment Share on other sites More sharing options...
tgribble Posted May 18, 2011 Author Share Posted May 18, 2011 ok , i am up to this stage, but how do i make the clicked on image display in the popup window? thanks <html> <head> <title>JavaScript Popup Example 3</title> </head> <script type="text/javascript"> function poponload() { testwindow = window.open("", "mywindow", "location=1,status=1,scrollbars=1,width=640,height=480"); testwindow.moveTo(200, 200); } </script> <body onclick="javascript: poponload()"> <h1><center>The Jewels</center></h1> <?php $images = "images/"; # Location of small versions $big = "big/"; # Location of big versions (assumed to be a subdir of above) $cols = 4; # Number of columns to display if ($handle = opendir($images)) { while (false !== ($file = readdir($handle))) { if ($file != "." && $file != ".." && $file != rtrim($big,"/")) { $files[] = $file; } } closedir($handle); } $colCtr = 0; echo '<table width="50%" cellspacing="3" align=center ><tr>'; foreach($files as $file) { if($colCtr %$cols == 0) echo '</tr><tr><td colspan="10" ></td></tr><tr>'; echo '<td ><a href="' . $images . $big . $file . '" ><img src="' . $images . $file . '" /></a></td>'; $colCtr++; } echo '</table>' . "\r\n"; ?> </body> </html> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.