Help | php, javascript and CSS pop out image.

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

Post Reply
mattd86
Forum Newbie
Posts: 2
Joined: Tue Jul 27, 2010 2:46 pm

Help | php, javascript and CSS pop out image.

Post 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>


buckit
Forum Contributor
Posts: 169
Joined: Fri Jan 01, 2010 10:21 am

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

Post by buckit »

what are the contents of csspopup.js
buckit
Forum Contributor
Posts: 169
Joined: Fri Jan 01, 2010 10:21 am

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

Post 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;?>')"
mattd86
Forum Newbie
Posts: 2
Joined: Tue Jul 27, 2010 2:46 pm

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

Post 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; 
	
	
}
Post Reply