Help | php, javascript and CSS pop out image.
Posted: Tue Jul 27, 2010 2:55 pm
Hi. I'm using php to display all the images within a directory. All of the images are displayed in a table.
I'm also using a combination of java script and css to get each image (on clicking) to pop up at the centre of the screen, within the same window.
It works...but always displays the first image from the table. I can't see what I've done wrong! Please can anybody take a look at the code to see where I'm going wrong?
I think the JS and CSS are fine. I'm thinking it must be one of the php variables? This is the php code.
I'm also using a combination of java script and css to get each image (on clicking) to pop up at the centre of the screen, within the same window.
It works...but always displays the first image from the table. I can't see what I've done wrong! Please can anybody take a look at the code to see where I'm going wrong?
I think the JS and CSS are fine. I'm thinking it must be one of the php variables? This is the php code.
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" media="all" type="text/css" href="style.css" />
<script type="text/javascript" src="csspopup.js"></script>
</head>
<body>
<?php
$path = "."; // relative to the directory in which this script is saved
$extensions = Array('.gif','.jpg','.png'); // Array with allowable file extensions
$num_cols = 3; // numer of columns to use in table
$img_width = '200'; // sets the standard image width
$images = Array();
if(@$handle = opendir($path)) // tests if the directory exists and is readable
{
while(false!== ($file = readdir($handle)))
{
if($file!= '.' && $file!= '..' &&!is_dir($file) && in_array(substr($file,-4),$extensions)) // ignore this dir pointer, parent dir pointer,
// subdirs and file with wrong extensions
{
$images[] = $file; // enters the image into
}
}
}
?>
<?php
echo "<table width='740' align='center' cellspacing='0' cellpadding='0' border='0'>\n";
echo "<colgroup>\n";
for($i=0;$i<$num_cols;$i++)
{
echo "<col width='".$img_width."' />\n";
}
echo "</colgroup>\n<tr>\n";
if(count($images)>0) // if the images array contains images
{
$i=1; // sets column counter to 1
foreach($images as $image) // runs through image array and makes the cells with images (linked)
{
if($i==$num_cols+1)
{
echo "</tr>\n<tr>\n";
$i=1;
}
?>
<td><h1 align='center'><a href='#' onclick="popup('popUpDiv')">
<?php
echo "<img src='$image' id='$image' title='$image' border='0' width='$img_width' /></a></h1><div onclick id='$image'/>\n";
?>
<div id="blanket" style="display:none;"></div>
<div id="popUpDiv" style="display:none;" align="center">
<table>
<tr>
<td>
<a href="#" onclick="popup('popUpDiv')">
<img src="closeBlue.png" onmouseover="this.src='closeRed.png'" onmouseout="this.src='closeBlue.png'"/>
</a><br/>
<?php
echo "<img src='$image'/>";
?>
</td>
</tr>
</table>
</div>
<?php
$i++;
$imgID++;
}
if($i <= $num_cols) // function to fill out remaining cells
{
while($i<=$num_cols)
{
echo "<td> </td>\n";
$i++;
}
}
}
else
{
echo "<td>No images in specified folder</td>\n";
}
echo "</td>\n</tr>\n</table>\n";
?>
</body>
</html>