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

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Ventilatiesysteem Productontwikkelaar HBO WO Verwa

Samengevat: Zij bieden flexibele ventilatiematerialen, geluidsdempers, rookgasafvoer producten en industrieslangen. Ben jij een technisch productontwikkelaar? Heb jij ervaring met het ontwikkelen van nieuwe producten? Vaste baan: Technisch Productontwikkelaar HBO WO €3.000 - €4.000 Zij bieden een variëteit aan flexibele ventilatiematerialen, geluiddempers, rookgasafvoer producten, industrieslangen en ventilatieslangen voor de scheepsbouw. Met slimme en innovatieve materialen zorgen wij voor een gezonde en frisse leefomgeving. Deze werkgever is een organisatie die volop in ontwikkeling is met hardwerkende collega's. Dit geeft goede ontwikkelingsmogelijkheden. De branche van dit bedrijf is Techniek en Engineering. Functie: Voor de vacature als Technisch Productontwikkelaar Ede Gld HBO WO ga

Bekijk vacature »

Jan te Pas

Jan te Pas

21/05/2017 19:23:42
Quote Anchor link
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!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>


Toevoeging op 21/05/2017 19:29:40:

Jan te Pas op 21/05/2017 19:23:42:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!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>
Gewijzigd op 21/05/2017 19:28:13 door Jan te Pas
 
PHP hulp

PHP hulp

27/11/2024 13:33:25
 
- Ariën -
Beheerder

- Ariën -

21/05/2017 19:34:21
Quote Anchor link
Popup-killer? Waarom geen lightbox?
Heb je een voorbeeld?
Gewijzigd op 21/05/2017 19:35:13 door - Ariën -
 
Jan te Pas

Jan te Pas

21/05/2017 19:48:54
Quote Anchor link
Ik dacht dat een popup ook goed is om te leren. En nu hannesen.... om dit onder de knie te krijgen....
 
- Ariën -
Beheerder

- Ariën -

21/05/2017 21:09:25
Quote Anchor link
Als je een voorbeeld-url hebt kunnen we ook kijken.
 
Jan te Pas

Jan te Pas

21/05/2017 21:15:41
Quote Anchor link
Ik heb een test gemaakt: http://www.jantepas.nl/vakantie-album.php staat de standaardpagina, normale situatie en op
HTTP://www.jantepas.nl/vakantie-album2.php de test met de pop up javascript die niet werkt.
Gewijzigd op 21/05/2017 21:41:13 door Jan te Pas
 
Ben van Velzen

Ben van Velzen

21/05/2017 21:40:21
Quote Anchor link
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.
 
Jan te Pas

Jan te Pas

21/05/2017 22:08:48
Quote Anchor link
Dank aan jullie. Ik heb het voor elkaar gekregen. Hier de hele -werkende- broncode:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!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>


Toevoeging op 22/05/2017 19:11:21:

En bijgaand ook de lightbox-versie. Voor wie interesse heeft.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!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>
Gewijzigd op 21/05/2017 22:09:33 door Jan te Pas
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.