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
mattd86
Forum Newbie
Posts: 2 Joined: Tue Jul 27, 2010 2:46 pm
Post
by mattd86 » 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.
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>
buckit
Forum Contributor
Posts: 169 Joined: Fri Jan 01, 2010 10:21 am
Post
by buckit » Tue Jul 27, 2010 3:04 pm
what are the contents of csspopup.js
buckit
Forum Contributor
Posts: 169 Joined: Fri Jan 01, 2010 10:21 am
Post
by buckit » Tue Jul 27, 2010 3:08 pm
actually.. nevermind. I see the problem.
You are creating a div with id='pupupdiv'. that means every time your loops goes through it creates that same div with that same id.
so when you click on your link it opens up the first div with id 'popupdiv' it comes to... which is the first image.
you want to change the hidden div to something like
Code: Select all
<div id="popUpDiv<?php echo $i;?>" style="display:none;" align="center">
and then your onclick event would be
Code: Select all
onclick="popup('popUpDiv<?php echo $i;?>')"
mattd86
Forum Newbie
Posts: 2 Joined: Tue Jul 27, 2010 2:46 pm
Post
by mattd86 » Thu Jul 29, 2010 4:08 pm
Thanks for the quick reply, but that didn't work. I'll show you the JS and the CSS just in case something there is wrong!?
JS-
Code: Select all
function toggle(div_id) {
var el = document.getElementById(div_id);
if ( el.style.display == 'none' ) { el.style.display = 'block';}
else {el.style.display = 'none';}
}
function blanket_size(popUpDivVar) {
if (typeof window.innerWidth != 'undefined') {
viewportheight = window.innerHeight;
} else {
viewportheight = document.documentElement.clientHeight;
}
if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) {
blanket_height = viewportheight;
} else {
if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) {
blanket_height = document.body.parentNode.clientHeight;
} else {
blanket_height = document.body.parentNode.scrollHeight;
}
}
var blanket = document.getElementById('blanket');
blanket.style.height = blanket_height + 'px';
var popUpDiv = document.getElementById(popUpDivVar);
popUpDiv_height=blanket_height/2-150;//150 is half popup's height
popUpDiv.style.top = popUpDiv_height + 'px';
}
function window_pos(popUpDivVar) {
if (typeof window.innerWidth != 'undefined') {
viewportwidth = window.innerHeight;
} else {
viewportwidth = document.documentElement.clientHeight;
}
if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) {
window_width = viewportwidth;
} else {
if (document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth) {
window_width = document.body.parentNode.clientWidth;
} else {
window_width = document.body.parentNode.scrollWidth;
}
}
var popUpDiv = document.getElementById(popUpDivVar);
window_width=window_width/2-150;//150 is half popup's width
popUpDiv.style.left = window_width + 'px';
}
function popup(windowname) {
blanket_size(windowname);
window_pos(windowname);
toggle('blanket');
toggle(windowname);
}
CSS-
Code: Select all
#blanket {
background-color:#111;
opacity: 0.65;
filter:alpha(opacity=65);
position:absolute;
top:0px;
left:0px;
width:100%;
z-index: 9001;
}
#popUpDiv {
background-color:#009900;
opacity: 0.55;
filter:alpha(opacity=55);
position:absolute;
width:300px;
height:300px;
z-index: 9002;
}