Page 1 of 1

Help | php, javascript and CSS pop out image.

Posted: Tue Jul 27, 2010 2:55 pm
by mattd86
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>&nbsp;</td>\n"; 
$i++; 
} 
} 

} 
else 
{ 
echo "<td>No images in specified folder</td>\n"; 
} 
echo "</td>\n</tr>\n</table>\n"; 

?> 

		
 </body>
</html>



Re: Help | php, javascript and CSS pop out image.

Posted: Tue Jul 27, 2010 3:04 pm
by buckit
what are the contents of csspopup.js

Re: Help | php, javascript and CSS pop out image.

Posted: Tue Jul 27, 2010 3:08 pm
by buckit
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;?>')"

Re: Help | php, javascript and CSS pop out image.

Posted: Thu Jul 29, 2010 4:08 pm
by mattd86
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; 
	
	
}