PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
J

nieuw venster opent zich niet bij onclick. Wat doe ik fout

Door Jan te Pas op 21-05-2017 19:23 gewijzigd op 21-05-2017 19:28
1.451 views

<!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>Vakantie-foto's!</title>

<style type="text/css">
body
{
 background:#fff;
}
img
{
 width:auto;
 box-shadow:0px 0px 20px #cecece;
 -moz-transform: scale(0.7);
 -moz-transition-duration: 0.6s; 
 -webkit-transition-duration: 0.6s;
 -webkit-transform: scale(0.7);
 -ms-transform: scale(0.7);
 -ms-transition-duration: 0.6s; 
}
img:hover
{
  box-shadow: 20px 20px 20px #dcdcdc;
 -moz-transform: scale(0.8);
 -moz-transition-duration: 0.6s;
 -webkit-transition-duration: 0.6s;
 -webkit-transform: scale(0.8);
 -ms-transform: scale(0.8);
 -ms-transition-duration: 0.6s;
}
</style>
</head>
<body>
<?php
$folder_path = 'vakantie-album/'; //image's folder path

$num_files = glob($folder_path . "*.{JPG,jpg,gif,png,bmp}", GLOB_BRACE);

$folder = opendir($folder_path);
 
if($num_files > 0)
{
 while(false !== ($file = readdir($folder))) 
 {
  $file_path = $folder_path.$file;
  $extension = strtolower(pathinfo($file ,PATHINFO_EXTENSION));
  if($extension=='jpg' || $extension =='png' || $extension == 'gif' || $extension == 'bmp') 
  {
   ?>
            <!-- <a href="<?php echo $file_path; ?>"><img src="<?php echo $file_path; ?>"  height="250" /></a> -->
            <a href="#" onClick="myWindow(<?php echo $file_path; ?>); return false;"><img src="<?php echo $file_path; ?>" height="200"></a>

            <?php
  }
 }
}
else
{
 echo "Dit vakantie-album is nog leeg!";
}
closedir($folder);
?>

<!-- script om venster te openen -->
<script type="text/javascript">
function myWindow(i,t,wid,hei) {
var day= new Date();
var id = day.getTime();
//Full screen
var w = (window.width); 
var h = (window.height); 
/*
You can also use the original image height and width as
var w = wid+100; 
var h = hei+100; 
*/
var params = 'width='+(w-50)+',height='+(h-50)+',scrollbars,resizable';
var message='<html><head><title>'+i+'</title></head><body><h3 aligh="center">'+
'<div align="center"><img src="'+i+'" border="0" alt="'+t+'"><br>\
'+
'<hr width="100&#37;" size="1"><form><input type="button" onclick="javascript:window.close();" value="Close Window"><br>\
'+
'<hr width="100%" size="1"></form></div></body></html>\
';
var mywin = open('',id,params);
mywin.document.write(msg);
mywin.document.close();
}
</script> 

</body>
</html>


[size=xsmall]Toevoeging op 21/05/2017 19:29:40:[/size]

Jan te Pas op 21/05/2017 19:23:42


<!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>Vakantie-foto's!</title>

<style type="text/css">
body
{
 background:#fff;
}
img
{
 width:auto;
 box-shadow:0px 0px 20px #cecece;
 -moz-transform: scale(0.7);
 -moz-transition-duration: 0.6s; 
 -webkit-transition-duration: 0.6s;
 -webkit-transform: scale(0.7);
 -ms-transform: scale(0.7);
 -ms-transition-duration: 0.6s; 
}
img:hover
{
  box-shadow: 20px 20px 20px #dcdcdc;
 -moz-transform: scale(0.8);
 -moz-transition-duration: 0.6s;
 -webkit-transition-duration: 0.6s;
 -webkit-transform: scale(0.8);
 -ms-transform: scale(0.8);
 -ms-transition-duration: 0.6s;
}
</style>
</head>
<body>
<?php
$folder_path = 'vakantie-album/'; //image's folder path

$num_files = glob($folder_path . "*.{JPG,jpg,gif,png,bmp}", GLOB_BRACE);

$folder = opendir($folder_path);
 
if($num_files > 0)
{
 while(false !== ($file = readdir($folder))) 
 {
  $file_path = $folder_path.$file;
  $extension = strtolower(pathinfo($file ,PATHINFO_EXTENSION));
  if($extension=='jpg' || $extension =='png' || $extension == 'gif' || $extension == 'bmp') 
  {
   ?>
            <!-- was en toont afbeelding in venster: <a href="<?php echo $file_path; ?>"><img src="<?php echo $file_path; ?>"  height="250" /></a> -->
            <!-- nu javascript aanroepen en pop-up met afbeelding tonen -->
            <a href="#" onClick="myWindow(<?php echo $file_path; ?>); return false;"><img src="<?php echo $file_path; ?>" height="200"></a>

            <?php
  }
 }
}
else
{
 echo "Dit vakantie-album is nog leeg!";
}
closedir($folder);
?>

<!-- script om venster te openen -->
<script type="text/javascript">
function myWindow(i,t,wid,hei) {
var day= new Date();
var id = day.getTime();
//Full screen
var w = (window.width); 
var h = (window.height); 
/*
You can also use the original image height and width as
var w = wid+100; 
var h = hei+100; 
*/
var params = 'width='+(w-50)+',height='+(h-50)+',scrollbars,resizable';
var message='<html><head><title>'+i+'</title></head><body><h3 aligh="center">'+
'<div align="center"><img src="'+i+'" border="0" alt="'+t+'"><br>\
'+
'<hr width="100&#37;" size="1"><form><input type="button" onclick="javascript:window.close();" value="Close Window"><br>\
'+
'<hr width="100%" size="1"></form></div></body></html>\
';
var mywin = open('',id,params);
mywin.document.write(msg);
mywin.document.close();
}
</script> 

</body>
</html>



- Ariën -
21-05-2017 19:34 gewijzigd op 21-05-2017 19:35
Popup-killer? Waarom geen lightbox?
Heb je een voorbeeld?
J Jan te Pas
21-05-2017 19:48
Ik dacht dat een popup ook goed is om te leren. En nu hannesen.... om dit onder de knie te krijgen....
- Ariën -
21-05-2017 21:09
Als je een voorbeeld-url hebt kunnen we ook kijken.
B Ben van Velzen
21-05-2017 21:40
Je mist sowieso quotes om de URL die je gebruikt in je onclick. Ook gebruik je msg in plaats van message in je write waardoor de popup niet zal vullen.
J Jan te Pas
21-05-2017 22:08 gewijzigd op 21-05-2017 22:09
Dank aan jullie. Ik heb het voor elkaar gekregen. Hier de hele -werkende- broncode:


<!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>Vakantie-foto's!</title>

<style type="text/css">
body
{
 background:#fff;
}
img
{
 width:auto;
 box-shadow:0px 0px 20px #cecece;
 -moz-transform: scale(0.7);
 -moz-transition-duration: 0.6s; 
 -webkit-transition-duration: 0.6s;
 -webkit-transform: scale(0.7);
 -ms-transform: scale(0.7);
 -ms-transition-duration: 0.6s; 
}
img:hover
{
  box-shadow: 20px 20px 20px #dcdcdc;
 -moz-transform: scale(0.8);
 -moz-transition-duration: 0.6s;
 -webkit-transition-duration: 0.6s;
 -webkit-transform: scale(0.8);
 -ms-transform: scale(0.8);
 -ms-transition-duration: 0.6s;
}
</style>
</head>
<body>
<?php
$folder_path = 'vakantie-album/'; //image's folder path

$num_files = glob($folder_path . "*.{JPG,jpg,gif,png,bmp}", GLOB_BRACE);

$folder = opendir($folder_path);
 
if($num_files > 0)
{
 while(false !== ($file = readdir($folder))) 
 {
  $file_path = $folder_path.$file;
  $extension = strtolower(pathinfo($file ,PATHINFO_EXTENSION));
  if($extension=='jpg' || $extension =='png' || $extension == 'gif' || $extension == 'bmp') 
  {
   ?>
           <!-- de juiste code -->
            <a href="#" title="<?php echo $file_path;?>" onClick="myWindow('<?php echo $file_path;?>','<?php echo $file_path; ?>',100);" return false;" title="<?php echo $file_path;?>"><img src="<?php echo $file_path;?>" height="250"  border="0"  /></a>

            <?php
  }
 }
}
else
{
 echo "Dit vakantie-album is nog leeg!";
}
closedir($folder);
?>

<!-- script om venster te openen -->
<script type="text/javascript">
function myWindow(i,t,wid,hei) {
var day= new Date();
var id = day.getTime();
//Full screen
var w = (window.width); 
var h = (window.height); 
/*
You can also use the original image height and width as
var w = wid+100; 
var h = hei+100; 
*/
var params = 'width='+(w-50)+',height='+(h-50)+',scrollbars,resizable';
var message='<html><head><title>'+i+'</title></head><body><h3 aligh="center">'+
'<div align="center"><img src="'+i+'" border="0" alt="'+t+'"><br>\
'+
'<hr width="100&#37;" size="1"><form><input type="button" onclick="javascript:window.close();" value="Close Window"><br>\
'+
'<hr width="100%" size="1"></form></div></body></html>\
';
var mywin = open('',id,params);
mywin.document.write(message);
mywin.document.close();
}
</script> 

</body>
</html>


[size=xsmall]Toevoeging op 22/05/2017 19:11:21:[/size]

En bijgaand ook de lightbox-versie. Voor wie interesse heeft.

<!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>vakantiefoto's</title>
<link rel="stylesheet" href="../dist/css/lightbox.min.css">
<style type="text/css">
*{margin:0;padding:0;}
body
{
	align:center;
	background:#fff;
}
img {        
box-shadow: 0 1px 7px rgba(0,0,0,0.6);
-o-transform: scale(1,1); 
-ms-transform: scale(1,1); 
-moz-transform: scale(1,1); 
-webkit-transform: scale(1,1); transform: scale(1,1); -o-transition: all 0.2s ease-in-out; 
-ms-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; 
-webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
}

img:hover {
        position: relative; z-index: 999;
		-o-transform: scale(1.03,1.03); 
		-ms-transform: scale(1.03,1.03); 
		-moz-transform: scale(1.03,1.03); 
		-webkit-transform: scale(1.03,1.03); 
		transform: scale(1.03,1.03);
    }

#header
{
	width:100%;
	height:24px;
	background:#DD4F00;
	font-family:"Lucida Handwriting";
	font-family:Verdana, Geneva, sans-serif;
	text-align:center;
	font-size:16px;
	font-weight:bolder;
	color:#f9f9f9;
}
#footer
{
	width:100%;
	height:20px;
	background:#DD4F00;
	font-family:"Lucida Handwriting";
	font-family:Verdana, Geneva, sans-serif;
	text-align:center;
	font-size:12px;
	font-weight:bolder;
	color:#f9f9f9;
}

#body
{
	margin:0 auto;
	text-align:center;
}
</style>
</head>
<body>
<h3 align="center">Vakantiefoto's</h3>
<br />
<br />
<h6 align="center">Klik op een foto voor een vergroting</h6>
<br />
<div id="body">
<?php
$folder_path = 'vakantie-album/'; //image's folder path

$num_files = glob($folder_path . "*.{JPG,jpg,gif,png,bmp}", GLOB_BRACE);

$folder = opendir($folder_path);
 
if($num_files > 0)
{
	while(false !== ($file = readdir($folder))) 
	{
		$file_path = $folder_path.$file;
		$extension = strtolower(pathinfo($file ,PATHINFO_EXTENSION));
		if($extension=='jpg' || $extension =='png' || $extension == 'gif' || $extension == 'bmp') 
		{
			?>
            <!-- <a href="<?php echo $file_path; ?>" target="_blank"><img src="<?php echo $file_path; ?>"  height="250" /></a> -->
            <a class="<?php echo $file_path; ?>" href="<?php echo $file_path; ?>" data-lightbox="example-set"><img class="example-image" src="<?php echo $file_path; ?>" alt="" height="100" /></a>
            <?php
		}
	}
}
else
{
	echo "Er zijn geen beelden aanwezig!";
}
closedir($folder);
?>

</div>
   <script src="../dist/js/lightbox-plus-jquery.min.js"></script>
</body>
</html>

Reageren

Inloggen om te reageren