Aantal fotos in 1 img tag.
Ik wil in 1 img tag een aantal fotos weergeven per stuk en daar onder een soort navigatie maken om de rest van de fotos te bekijken. De fotos staan als volgt in de database, "1-1.jpg" als er maar 1 in staat of "2-1.png, 2-2.jpg, 2-3.jpg"
Dit is de code tot nu toe.
Code (php)
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<?php
if($row['foto'] != '0')
{
$fotos = explode("," , $row['foto']);
$aantal = count($fotos);
if(isset($aantal) and $aantal > 1)
{
for($i = 1; $i <= ceil($aantal); $i++)
{
$weergeven = '<a href="'.$fotos[$i].'">< vorige</a> Er zijn '.$aantal.' fotos gevonden <a href="'.$fotos[$i].'">volgende ></a>';
}
}
else
{
$weergeven = 'Er is 1 foto gevonden';
}
echo '<div class="box">';
echo '<h4>Foto(s)<span> </span></h4>';
echo '<img class="random" src="'.$website_link.'/fotos/'.$row['foto'].'" width="640" height="385" title="'.$row['titel'].'" alt="'.$row['titel'].'" />';
echo $weergeven;
echo '</div>';
}
?>
if($row['foto'] != '0')
{
$fotos = explode("," , $row['foto']);
$aantal = count($fotos);
if(isset($aantal) and $aantal > 1)
{
for($i = 1; $i <= ceil($aantal); $i++)
{
$weergeven = '<a href="'.$fotos[$i].'">< vorige</a> Er zijn '.$aantal.' fotos gevonden <a href="'.$fotos[$i].'">volgende ></a>';
}
}
else
{
$weergeven = 'Er is 1 foto gevonden';
}
echo '<div class="box">';
echo '<h4>Foto(s)<span> </span></h4>';
echo '<img class="random" src="'.$website_link.'/fotos/'.$row['foto'].'" width="640" height="385" title="'.$row['titel'].'" alt="'.$row['titel'].'" />';
echo $weergeven;
echo '</div>';
}
?>
Ik denk dat er ook een stukje javascript gebruikt moet worden om de img tag te unloaden? maar met javascript ben ik niet zo goed.
Nu ja, wat jij wil:
met wat javascript zal dat inderdaad lukken.
Nu ja, 1 ding tegelijk.
Lijkt dit wat op wat je zocht, qua effect?
(vergeet niet jquery.js te downloaden en op de juiste plaats te zetten
http://code.jquery.com/jquery-1.4.4.js )
Code (php)
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
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
<?php
$website_link = 'http://img.007unleashed.com/albums/userpics/10001/';
$row['foto'] = 'normal_drnoconnery.jpg, normal_smithwesson.jpg, normal_drnosean.jpg, normal_drnostare.jpg';
$_GET['key'] = (int) $_GET['key'];
$body = "";
if($row['foto'] != '0') {
$fotos = explode("," , $row['foto']);
$aantal = count($fotos);
if($aantal > 1) { // die isset is niet nodig; je weet dat $aantal bestaat; je hebt het net zelf aangemaakt op het vorige lijntje
$thumbs = "";
for($i = 0; $i < $aantal; $i++) { // ceil is niet nodig; count() geeft sowieso een int terug
$fotos[$i] = trim($fotos[$i]); // aangezien je in je string met foto's spaties zet na de komma's
$thumbs .= '<img src="'. $website_link . $fotos[$i] .'" alt="'. $row['titel'] .'" />';
}
$weergeven = '<a href="?key='. ($_GET['key'] > 0 ? $_GET['key'] - 1 : 0) .'">< vorige</a> Er zijn '. $aantal .' fotos gevonden <a href="?key='. ($_GET['key'] + 1 < $aantal ? $_GET['key'] + 1 : $aantal - 1) .'">volgende ></a>';
}
else {
$weergeven = 'Er is 1 foto gevonden';
}
$body .= '<div class="box">';
$body .= ' <h4>Foto(s)<span> </span></h4>';
$body .= ' <img class="random" src="'. $website_link . $fotos[$_GET['key']] .'" title="'. $row['titel'] .'" alt="'. $row['titel'] .'" />'; // opmaak doe je met css, niet in de markup
$body .= ' <div class="thumbnails">'. $thumbs .'</div>';
$body .= ' <div class="navigation">'. $weergeven .'</div>';
$body .= '</div>';
}
echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//NL" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="shortcut icon" type="image/gif" href="favicon.gif"/>
<meta http-equiv=content-type content="text/html; charset=UTF-8">
<title> Aantal fotos in 1 img tag. </title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="jquery.js"></script>
<style>
.random {
width: 640px;
height: 385px;
}
.thumbnails {
height: 100px;
overflow: hidden;
}
.thumbnails img{
height: 100%;
margin: 0 2px 0 0;
cursor: pointer;
}
</style>
<script>
$(document).ready(function(e){
$(".thumbnails img").click(function(e){
var thumbnail_targeted = e.target;
$(".random").attr("src", $(e.target).attr("src"));
});
});
</script>
</head>
<body>
'. $body .'
<div id="message"></div>
</body>
</html>';
?>
$website_link = 'http://img.007unleashed.com/albums/userpics/10001/';
$row['foto'] = 'normal_drnoconnery.jpg, normal_smithwesson.jpg, normal_drnosean.jpg, normal_drnostare.jpg';
$_GET['key'] = (int) $_GET['key'];
$body = "";
if($row['foto'] != '0') {
$fotos = explode("," , $row['foto']);
$aantal = count($fotos);
if($aantal > 1) { // die isset is niet nodig; je weet dat $aantal bestaat; je hebt het net zelf aangemaakt op het vorige lijntje
$thumbs = "";
for($i = 0; $i < $aantal; $i++) { // ceil is niet nodig; count() geeft sowieso een int terug
$fotos[$i] = trim($fotos[$i]); // aangezien je in je string met foto's spaties zet na de komma's
$thumbs .= '<img src="'. $website_link . $fotos[$i] .'" alt="'. $row['titel'] .'" />';
}
$weergeven = '<a href="?key='. ($_GET['key'] > 0 ? $_GET['key'] - 1 : 0) .'">< vorige</a> Er zijn '. $aantal .' fotos gevonden <a href="?key='. ($_GET['key'] + 1 < $aantal ? $_GET['key'] + 1 : $aantal - 1) .'">volgende ></a>';
}
else {
$weergeven = 'Er is 1 foto gevonden';
}
$body .= '<div class="box">';
$body .= ' <h4>Foto(s)<span> </span></h4>';
$body .= ' <img class="random" src="'. $website_link . $fotos[$_GET['key']] .'" title="'. $row['titel'] .'" alt="'. $row['titel'] .'" />'; // opmaak doe je met css, niet in de markup
$body .= ' <div class="thumbnails">'. $thumbs .'</div>';
$body .= ' <div class="navigation">'. $weergeven .'</div>';
$body .= '</div>';
}
echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//NL" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="shortcut icon" type="image/gif" href="favicon.gif"/>
<meta http-equiv=content-type content="text/html; charset=UTF-8">
<title> Aantal fotos in 1 img tag. </title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="jquery.js"></script>
<style>
.random {
width: 640px;
height: 385px;
}
.thumbnails {
height: 100px;
overflow: hidden;
}
.thumbnails img{
height: 100%;
margin: 0 2px 0 0;
cursor: pointer;
}
</style>
<script>
$(document).ready(function(e){
$(".thumbnails img").click(function(e){
var thumbnail_targeted = e.target;
$(".random").attr("src", $(e.target).attr("src"));
});
});
</script>
</head>
<body>
'. $body .'
<div id="message"></div>
</body>
</html>';
?>
Ik heb een aantal dingen moeten aanpassen aan je code.
Gewijzigd op 09/12/2010 11:02:04 door Kris Peeters
Ik heb er aan lopen prutsen maar hoe kan ik met Javascript de waarde meegeven/vervangen of optellen zonder dat de hele pagina herlaad.?
Code (php)
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
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
<?php
$website_link = 'http://img.007unleashed.com/albums/userpics/10001/';
$row['foto'] = 'normal_drnoconnery.jpg, normal_smithwesson.jpg, normal_drnosean.jpg, normal_drnostare.jpg';
$body = "";
if($row['foto'] != '0') {
$fotos = explode("," , $row['foto']);
$aantal = count($fotos);
if($aantal > 1) { // die isset is niet nodig; je weet dat $aantal bestaat; je hebt het net zelf aangemaakt op het vorige lijntje
$weergeven = 'Er zijn '. $aantal .' fotos gevonden';
}
else {
$weergeven = 'Er is 1 foto gevonden';
}
// Nog te doen
// $aantal is 4 en als de foto[waarde] 0 is geen vorige knop, Als de foto[waarde] 3 is geen volgende knop
$body .= '<div class="box">';
$body .= ' <h4>Foto(s)<span> </span></h4>';
$body .= ' <img class="random" src="'. $website_link . $fotos[0 WAARDE VERANDEREN IVM JAVASCRIPT 0] .'" title="'. $row['titel'] .'" alt="'. $row['titel'] .'" />'; // opmaak doe je met css, niet in de markup
$body .= ' <div class="navigation"><img class="vorige" src="'. $website_link .'knopje.jpg" alt="vorige" /> '. $weergeven .' <img class="volgende" src="'. $website_link .'knopje.jpg" alt="volgende" /></div>';
$body .= '</div>';
}
echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//NL" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="shortcut icon" type="image/gif" href="favicon.gif"/>
<meta http-equiv=content-type content="text/html; charset=UTF-8">
<title> Aantal fotos in 1 img tag. </title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="jquery.js"></script>
<style>
.random {
width: 640px;
height: 385px;
}
.thumbnails {
height: 100px;
overflow: hidden;
}
.thumbnails img{
height: 100%;
margin: 0 2px 0 0;
cursor: pointer;
}
</style>
<script>
$(document).ready(function(e){
$(".navigation img").click(function(e){
var navigation_targeted = e.target;
$(".random").attr("src", $(e.target).attr("src"));
});
});
</script>
</head>
<body>
'. $body .'
<div id="message"></div>
</body>
</html>';
?>
$website_link = 'http://img.007unleashed.com/albums/userpics/10001/';
$row['foto'] = 'normal_drnoconnery.jpg, normal_smithwesson.jpg, normal_drnosean.jpg, normal_drnostare.jpg';
$body = "";
if($row['foto'] != '0') {
$fotos = explode("," , $row['foto']);
$aantal = count($fotos);
if($aantal > 1) { // die isset is niet nodig; je weet dat $aantal bestaat; je hebt het net zelf aangemaakt op het vorige lijntje
$weergeven = 'Er zijn '. $aantal .' fotos gevonden';
}
else {
$weergeven = 'Er is 1 foto gevonden';
}
// Nog te doen
// $aantal is 4 en als de foto[waarde] 0 is geen vorige knop, Als de foto[waarde] 3 is geen volgende knop
$body .= '<div class="box">';
$body .= ' <h4>Foto(s)<span> </span></h4>';
$body .= ' <img class="random" src="'. $website_link . $fotos[0 WAARDE VERANDEREN IVM JAVASCRIPT 0] .'" title="'. $row['titel'] .'" alt="'. $row['titel'] .'" />'; // opmaak doe je met css, niet in de markup
$body .= ' <div class="navigation"><img class="vorige" src="'. $website_link .'knopje.jpg" alt="vorige" /> '. $weergeven .' <img class="volgende" src="'. $website_link .'knopje.jpg" alt="volgende" /></div>';
$body .= '</div>';
}
echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//NL" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="shortcut icon" type="image/gif" href="favicon.gif"/>
<meta http-equiv=content-type content="text/html; charset=UTF-8">
<title> Aantal fotos in 1 img tag. </title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="jquery.js"></script>
<style>
.random {
width: 640px;
height: 385px;
}
.thumbnails {
height: 100px;
overflow: hidden;
}
.thumbnails img{
height: 100%;
margin: 0 2px 0 0;
cursor: pointer;
}
</style>
<script>
$(document).ready(function(e){
$(".navigation img").click(function(e){
var navigation_targeted = e.target;
$(".random").attr("src", $(e.target).attr("src"));
});
});
</script>
</head>
<body>
'. $body .'
<div id="message"></div>
</body>
</html>';
?>
Die $_GET was eigenlijk enkel nodig voor die vorige/volgende link.
Ook dat kan met javascript.
Ik zal eens alles weg doen wat niet nodig is. Zo kan je beter zien wat er precies wel en niet moet gebeuren.
Even geduld
Toevoeging op 10/12/2010 17:52:24:
Ik heb het zover aangepst hoe ik het wil hebben maar ik zou niet weten hoe ik javascript met php moet combineren.
Code (php)
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
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
<?php
$website_link = 'http://www.112twente.com/';
$row['foto'] = 'foto1.png, foto2.png, foto3.png, foto4.png';
$body = "";
if($row['foto'] != '0') {
$fotos = explode("," , $row['foto']);
$aantal = count($fotos);
if($aantal > 1) {
$weergeven = 'Er zijn '. $aantal .' fotos gevonden';
}
else {
$weergeven = 'Er is 1 foto gevonden';
}
// Nog te doen
// $aantal is 4 en als de foto[waarde] 0 is geen vorige knop, Als de foto[waarde] 3 is geen volgende knop
//if(WAARDE FOTO == '0')
//{
//$links = 'licht'; // Niet klikbaar maken
//$rechts = 'donker';
//}
//elseif(WAARDE FOTO == '$aantal')
//{
//$links = 'donker';
//$rechts = 'licht'; // Niet klikbaar maken
//}
//else
//{
$links = 'donker';
$rechts = 'donker';
//}
$body .= '<div class="box">';
$body .= ' <h4>Foto(s)<span> </span></h4>';
$body .= ' <img class="random" src="'. $website_link .'images/'. $fotos[0] .'" title="'. $row['titel'] .'" alt="'. $row['titel'] .'" />'; // opmaak doe je met css, niet in de markup
$body .= ' <div class="navigation"><img class="vorige" src="'. $website_link .'images/foto-links-'.$links.'.png" alt="vorige" /><div class="tekst"> '. $weergeven .' </div><img class="volgende" src="'. $website_link .'images/foto-rechts-'.$rechts.'.png" alt="volgende" /></div>';
$body .= '</div>';
}
echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//NL" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="shortcut icon" type="image/gif" href="favicon.gif"/>
<meta http-equiv=content-type content="text/html; charset=UTF-8">
<title> Aantal fotos in 1 img tag. </title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="jquery.js"></script>
<style>
.box {
width: 640px;
margin: 0 auto;
}
.random {
width: 640px;
height: 385px;
}
.navigation {
width: 640px;
height: 40px;
background: (http://www.112twente.com/images/kaal.png);
margin-top; -10px;
}
.navigation .tekst {
height: 40px;
width: 474px;
text-align: center;
float: left;
}
.navigation .vorige {
width: 82px;
height: 40px;
float: left;
}
.navigation .volgende {
width: 82px;
height: 40px;
float: right;
}
</style>
<script>
$(document).ready(function(e){
$(".navigation img").click(function(e){
var navigation_targeted = e.target;
$(".random").attr("src", $(e.target).attr("src"));
});
});
</script>
</head>
<body>
'. $body .'
<div id="message"></div>
</body>
</html>';
?>
$website_link = 'http://www.112twente.com/';
$row['foto'] = 'foto1.png, foto2.png, foto3.png, foto4.png';
$body = "";
if($row['foto'] != '0') {
$fotos = explode("," , $row['foto']);
$aantal = count($fotos);
if($aantal > 1) {
$weergeven = 'Er zijn '. $aantal .' fotos gevonden';
}
else {
$weergeven = 'Er is 1 foto gevonden';
}
// Nog te doen
// $aantal is 4 en als de foto[waarde] 0 is geen vorige knop, Als de foto[waarde] 3 is geen volgende knop
//if(WAARDE FOTO == '0')
//{
//$links = 'licht'; // Niet klikbaar maken
//$rechts = 'donker';
//}
//elseif(WAARDE FOTO == '$aantal')
//{
//$links = 'donker';
//$rechts = 'licht'; // Niet klikbaar maken
//}
//else
//{
$links = 'donker';
$rechts = 'donker';
//}
$body .= '<div class="box">';
$body .= ' <h4>Foto(s)<span> </span></h4>';
$body .= ' <img class="random" src="'. $website_link .'images/'. $fotos[0] .'" title="'. $row['titel'] .'" alt="'. $row['titel'] .'" />'; // opmaak doe je met css, niet in de markup
$body .= ' <div class="navigation"><img class="vorige" src="'. $website_link .'images/foto-links-'.$links.'.png" alt="vorige" /><div class="tekst"> '. $weergeven .' </div><img class="volgende" src="'. $website_link .'images/foto-rechts-'.$rechts.'.png" alt="volgende" /></div>';
$body .= '</div>';
}
echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//NL" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="shortcut icon" type="image/gif" href="favicon.gif"/>
<meta http-equiv=content-type content="text/html; charset=UTF-8">
<title> Aantal fotos in 1 img tag. </title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="jquery.js"></script>
<style>
.box {
width: 640px;
margin: 0 auto;
}
.random {
width: 640px;
height: 385px;
}
.navigation {
width: 640px;
height: 40px;
background: (http://www.112twente.com/images/kaal.png);
margin-top; -10px;
}
.navigation .tekst {
height: 40px;
width: 474px;
text-align: center;
float: left;
}
.navigation .vorige {
width: 82px;
height: 40px;
float: left;
}
.navigation .volgende {
width: 82px;
height: 40px;
float: right;
}
</style>
<script>
$(document).ready(function(e){
$(".navigation img").click(function(e){
var navigation_targeted = e.target;
$(".random").attr("src", $(e.target).attr("src"));
});
});
</script>
</head>
<body>
'. $body .'
<div id="message"></div>
</body>
</html>';
?>
Probeer zo eens (zet gewoon de eerste twee lijnen terug)
Code (php)
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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<?php
// $website_link = 'http://www.112twente.com/';
$row['foto'] = 'image001.jpg, image002.jpg, image003.jpg, image004.jpg';
$body = "";
if($row['foto'] != '0') {
$fotos = explode("," , $row['foto']);
// de spaties verwijderen
foreach ($fotos as $key=>$foto) {
$fotos[$key] = trim($fotos[$key]);
}
$aantal = count($fotos);
if($aantal > 1) {
$weergeven = 'Er zijn '. $aantal .' fotos gevonden';
}
else {
$weergeven = 'Er is 1 foto gevonden';
}
// Nog te doen
// $aantal is 4 en als de foto[waarde] 0 is geen vorige knop, Als de foto[waarde] 3 is geen volgende knop
//if(WAARDE FOTO == '0')
//{
//$links = 'licht'; // Niet klikbaar maken
//$rechts = 'donker';
//}
//elseif(WAARDE FOTO == '$aantal')
//{
//$links = 'donker';
//$rechts = 'licht'; // Niet klikbaar maken
//}
//else
//{
$links = 'donker';
$rechts = 'donker';
//}
$body .= '<div class="box">';
$body .= ' <h4>Foto(s)<span> </span></h4>';
$body .= ' <img id="foto" class="random" src="'. $website_link .'images/'. $fotos[0] .'" title="'. $row['titel'] .'" alt="'. $row['titel'] .'" />'; // opmaak doe je met css, niet in de markup
$body .= ' <div class="navigation"><img class="vorige" src="'. $website_link .'images/foto-links-'.$links.'.png" alt="vorige" /><div class="tekst"> '. $weergeven .' </div><img class="volgende" src="'. $website_link .'images/foto-rechts-'.$rechts.'.png" alt="volgende" /></div>';
$body .= '</div>';
}
echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//NL" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="shortcut icon" type="image/gif" href="favicon.gif"/>
<meta http-equiv=content-type content="text/html; charset=UTF-8">
<title> Aantal fotos in 1 img tag. </title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="jquery.js"></script>
<style>
.box {
width: 640px;
margin: 0 auto;
}
.random {
width: 640px;
height: 385px;
}
.navigation {
width: 640px;
height: 40px;
background: (http://www.112twente.com/images/kaal.png);
margin-top; -10px;
}
.navigation .tekst {
height: 40px;
width: 474px;
text-align: center;
float: left;
}
.navigation .vorige {
width: 82px;
height: 40px;
float: left;
}
.navigation .volgende {
width: 82px;
height: 40px;
float: right;
}
</style>
<script>
// geeft je een javascript object met de afbeeldingen
var fotos = eval('. json_encode($fotos) .');
var huidige_foto = 0;
var image_base = "'. $website_link .'images/";
$(document).ready(function(e){
// bij een click op de foto wordt de volgende foto getoond
$("#foto").click(function (e) {get_photo(1)});
// klikken op "volgende" geeft het zelfde effect
$(".navigation .volgende").click(function (e) {get_photo(1)});
$(".navigation .vorige").click(function (e) {get_photo(-1)});
});
// haal een foto op delta verwijderd van de huidige. Als delta = +1 => haalt die de volgende foto
function get_photo (delta) {
huidige_foto += delta;
// controleren of huidige_foto een waarde is tussen 0 en het aantal afbeeldingen - 1
if (huidige_foto < 0) {
huidige_foto = 0;
}
if (huidige_foto >= fotos.length) {
huidige_foto = fotos.length - 1;
}
$("#foto").attr("src", image_base + fotos[huidige_foto]);
var i=0;
}
</script>
</head>
<body>
'. $body .'
<div id="message"></div>
</body>
</html>';
?>
// $website_link = 'http://www.112twente.com/';
$row['foto'] = 'image001.jpg, image002.jpg, image003.jpg, image004.jpg';
$body = "";
if($row['foto'] != '0') {
$fotos = explode("," , $row['foto']);
// de spaties verwijderen
foreach ($fotos as $key=>$foto) {
$fotos[$key] = trim($fotos[$key]);
}
$aantal = count($fotos);
if($aantal > 1) {
$weergeven = 'Er zijn '. $aantal .' fotos gevonden';
}
else {
$weergeven = 'Er is 1 foto gevonden';
}
// Nog te doen
// $aantal is 4 en als de foto[waarde] 0 is geen vorige knop, Als de foto[waarde] 3 is geen volgende knop
//if(WAARDE FOTO == '0')
//{
//$links = 'licht'; // Niet klikbaar maken
//$rechts = 'donker';
//}
//elseif(WAARDE FOTO == '$aantal')
//{
//$links = 'donker';
//$rechts = 'licht'; // Niet klikbaar maken
//}
//else
//{
$links = 'donker';
$rechts = 'donker';
//}
$body .= '<div class="box">';
$body .= ' <h4>Foto(s)<span> </span></h4>';
$body .= ' <img id="foto" class="random" src="'. $website_link .'images/'. $fotos[0] .'" title="'. $row['titel'] .'" alt="'. $row['titel'] .'" />'; // opmaak doe je met css, niet in de markup
$body .= ' <div class="navigation"><img class="vorige" src="'. $website_link .'images/foto-links-'.$links.'.png" alt="vorige" /><div class="tekst"> '. $weergeven .' </div><img class="volgende" src="'. $website_link .'images/foto-rechts-'.$rechts.'.png" alt="volgende" /></div>';
$body .= '</div>';
}
echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//NL" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="shortcut icon" type="image/gif" href="favicon.gif"/>
<meta http-equiv=content-type content="text/html; charset=UTF-8">
<title> Aantal fotos in 1 img tag. </title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="jquery.js"></script>
<style>
.box {
width: 640px;
margin: 0 auto;
}
.random {
width: 640px;
height: 385px;
}
.navigation {
width: 640px;
height: 40px;
background: (http://www.112twente.com/images/kaal.png);
margin-top; -10px;
}
.navigation .tekst {
height: 40px;
width: 474px;
text-align: center;
float: left;
}
.navigation .vorige {
width: 82px;
height: 40px;
float: left;
}
.navigation .volgende {
width: 82px;
height: 40px;
float: right;
}
</style>
<script>
// geeft je een javascript object met de afbeeldingen
var fotos = eval('. json_encode($fotos) .');
var huidige_foto = 0;
var image_base = "'. $website_link .'images/";
$(document).ready(function(e){
// bij een click op de foto wordt de volgende foto getoond
$("#foto").click(function (e) {get_photo(1)});
// klikken op "volgende" geeft het zelfde effect
$(".navigation .volgende").click(function (e) {get_photo(1)});
$(".navigation .vorige").click(function (e) {get_photo(-1)});
});
// haal een foto op delta verwijderd van de huidige. Als delta = +1 => haalt die de volgende foto
function get_photo (delta) {
huidige_foto += delta;
// controleren of huidige_foto een waarde is tussen 0 en het aantal afbeeldingen - 1
if (huidige_foto < 0) {
huidige_foto = 0;
}
if (huidige_foto >= fotos.length) {
huidige_foto = fotos.length - 1;
}
$("#foto").attr("src", image_base + fotos[huidige_foto]);
var i=0;
}
</script>
</head>
<body>
'. $body .'
<div id="message"></div>
</body>
</html>';
?>
Gewijzigd op 13/12/2010 17:54:52 door Kris Peeters
Code (php)
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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="nl">
<head>
<?php
include 'config.php';
include 'functies.php';
?>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="112Twente.com" />
<meta name="description" content="112Twente.com" />
<meta name="author" content="Ferdi" />
<meta http-equiv="From" content="[email protected]" />
<meta http-equiv="Content-Language" content="nl" />
<meta name="copyright" content="Ferdi Reichart" />
<meta name="robots" content="all" />
<link rel="stylesheet" href="/style.css" type="text/css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
// geeft je een javascript object met de afbeeldingen
var fotos = eval(<?php echo json_encode($fotos); ?>);
var huidige_foto = 0;
var image_base = "<?php echo $website_link; ?>/fotos/";
$(document).ready(function(e){
// bij een click op de foto wordt de volgende foto getoond
$("#foto").click(function (e) {get_photo(1)});
// klikken op "volgende" geeft het zelfde effect
$(".navigation .volgende").click(function (e) {get_photo(1)});
$(".navigation .vorige").click(function (e) {get_photo(-1)});
});
// haal een foto op delta verwijderd van de huidige. Als delta = +1 => haalt die de volgende foto
function get_photo (delta) {
huidige_foto += delta;
// controleren of huidige_foto een waarde is tussen 0 en het aantal afbeeldingen - 1
if (huidige_foto < 0) {
huidige_foto = 0;
}
if (huidige_foto >= fotos.length) {
huidige_foto = fotos.length - 1;
}
$("#foto").attr("src", image_base + fotos[huidige_foto]);
var i=0;
}
</script>
</head>
<body>
<?php
$sql = "SELECT * FROM berichten WHERE id = '". mysql_real_escape_string($_GET['id'])."'";
$res = mysql_query($sql);
$row = mysql_fetch_array($res);
if($row['foto'] != '0')
{
$weergeven = '';
$fotos = 'foto1.png, foto2.png, foto3.png, foto4.png';
$fotos = explode("," , $fotos);
// de spaties verwijderen
foreach ($fotos as $key => $foto)
{
$fotos[$key] = trim($fotos[$key]);
}
$aantal = count($fotos);
if($aantal > 1)
{
$links = 'donker';
$rechts = 'donker';
$weergeven .= '<div class="box">';
$weergeven .= '<h4>Foto(s)<span></span></h4>';
$weergeven .= '<img id="foto" class="random" src="'.$website_link.'/fotos/'.$foto[0].'" width="640" height="385" title="'.$row['titel'].'" alt="'.$row['titel'].'" />';
$weergeven .= '<div class="navigation"><img class="vorige" src="'. $website_link .'/images/foto-links-'.$links.'.png" alt="vorige" /><div class="tekst"> Er zijn '. $aantal .' fotos gevonden </div><img class="volgende" src="'. $website_link .'/images/foto-rechts-'.$rechts.'.png" alt="volgende" /></div>';
$weergeven .= '</div>';
}
else
{
$weergeven .= '<div class="box">';
$weergeven .= '<h4>Foto(s)<span> </span></h4>';
$weergeven .= '<img id="foto" class="random" src="'.$website_link.'/fotos/'.$row['foto'].'" width="640" height="385" title="'.$row['titel'].'" alt="'.$row['titel'].'" />';
$weergeven .= '<div class="navigation"><div class="tekst"> Er is 1 foto gevonden </div></div>';
$weergeven .= '</div>';
}
echo $weergeven;
}
?>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="nl">
<head>
<?php
include 'config.php';
include 'functies.php';
?>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="112Twente.com" />
<meta name="description" content="112Twente.com" />
<meta name="author" content="Ferdi" />
<meta http-equiv="From" content="[email protected]" />
<meta http-equiv="Content-Language" content="nl" />
<meta name="copyright" content="Ferdi Reichart" />
<meta name="robots" content="all" />
<link rel="stylesheet" href="/style.css" type="text/css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
// geeft je een javascript object met de afbeeldingen
var fotos = eval(<?php echo json_encode($fotos); ?>);
var huidige_foto = 0;
var image_base = "<?php echo $website_link; ?>/fotos/";
$(document).ready(function(e){
// bij een click op de foto wordt de volgende foto getoond
$("#foto").click(function (e) {get_photo(1)});
// klikken op "volgende" geeft het zelfde effect
$(".navigation .volgende").click(function (e) {get_photo(1)});
$(".navigation .vorige").click(function (e) {get_photo(-1)});
});
// haal een foto op delta verwijderd van de huidige. Als delta = +1 => haalt die de volgende foto
function get_photo (delta) {
huidige_foto += delta;
// controleren of huidige_foto een waarde is tussen 0 en het aantal afbeeldingen - 1
if (huidige_foto < 0) {
huidige_foto = 0;
}
if (huidige_foto >= fotos.length) {
huidige_foto = fotos.length - 1;
}
$("#foto").attr("src", image_base + fotos[huidige_foto]);
var i=0;
}
</script>
</head>
<body>
<?php
$sql = "SELECT * FROM berichten WHERE id = '". mysql_real_escape_string($_GET['id'])."'";
$res = mysql_query($sql);
$row = mysql_fetch_array($res);
if($row['foto'] != '0')
{
$weergeven = '';
$fotos = 'foto1.png, foto2.png, foto3.png, foto4.png';
$fotos = explode("," , $fotos);
// de spaties verwijderen
foreach ($fotos as $key => $foto)
{
$fotos[$key] = trim($fotos[$key]);
}
$aantal = count($fotos);
if($aantal > 1)
{
$links = 'donker';
$rechts = 'donker';
$weergeven .= '<div class="box">';
$weergeven .= '<h4>Foto(s)<span></span></h4>';
$weergeven .= '<img id="foto" class="random" src="'.$website_link.'/fotos/'.$foto[0].'" width="640" height="385" title="'.$row['titel'].'" alt="'.$row['titel'].'" />';
$weergeven .= '<div class="navigation"><img class="vorige" src="'. $website_link .'/images/foto-links-'.$links.'.png" alt="vorige" /><div class="tekst"> Er zijn '. $aantal .' fotos gevonden </div><img class="volgende" src="'. $website_link .'/images/foto-rechts-'.$rechts.'.png" alt="volgende" /></div>';
$weergeven .= '</div>';
}
else
{
$weergeven .= '<div class="box">';
$weergeven .= '<h4>Foto(s)<span> </span></h4>';
$weergeven .= '<img id="foto" class="random" src="'.$website_link.'/fotos/'.$row['foto'].'" width="640" height="385" title="'.$row['titel'].'" alt="'.$row['titel'].'" />';
$weergeven .= '<div class="navigation"><div class="tekst"> Er is 1 foto gevonden </div></div>';
$weergeven .= '</div>';
}
echo $weergeven;
}
?>
</body>
</html>
Gewijzigd op 14/12/2010 19:13:00 door Ferdi R
Kijk, zo werkt het.
Ik heb een aantal dingen in commentaar gezet, zie zelf of je de rest kan aanvullen.
Code (php)
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
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
<?php
//include 'config.php';
//include 'functies.php';
?>
<?php
//$sql = "SELECT * FROM berichten WHERE id = '". mysql_real_escape_string($_GET['id'])."'";
//$res = mysql_query($sql);
//$row = mysql_fetch_array($res);
$website_link = 'http://www.112twente.com';
if(1 || $row['foto'] != '0')
{
$weergeven = '';
$fotos = 'foto1.png, foto2.png, foto3.png, foto4.png';
$fotos = explode("," , $fotos);
// de spaties verwijderen
foreach ($fotos as $key => $foto)
{
$fotos[$key] = trim($fotos[$key]);
}
$aantal = count($fotos);
if($aantal > 1)
{
$links = 'donker';
$rechts = 'donker';
$weergeven .= '<div class="box">';
$weergeven .= '<h4>Foto(s)<span></span></h4>';
$weergeven .= '<img id="foto" class="random" src="'.$website_link.'/images/'.$fotos[0].'" width="640" height="385" title="'.$row['titel'].'" alt="'.$row['titel'].'" />';
$weergeven .= '<div class="navigation"><img class="vorige" src="'. $website_link .'/images/foto-links-'.$links.'.png" alt="vorige" /><div class="tekst"> Er zijn '. $aantal .' fotos gevonden </div><img class="volgende" src="'. $website_link .'/images/foto-rechts-'.$rechts.'.png" alt="volgende" /></div>';
$weergeven .= '</div>';
}
else
{
$weergeven .= '<div class="box">';
$weergeven .= '<h4>Foto(s)<span> </span></h4>';
$weergeven .= '<img id="foto" class="random" src="'.$website_link.'/fotos/'.$foto['foto'].'" width="640" height="385" title="'.$row['titel'].'" alt="'.$row['titel'].'" />';
$weergeven .= '<div class="navigation"><div class="tekst"> Er is 1 foto gevonden </div></div>';
$weergeven .= '</div>';
}
// $weergeven;
}
echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="nl">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="112Twente.com" />
<meta name="description" content="112Twente.com" />
<meta name="author" content="Ferdi" />
<meta http-equiv="From" content="[email protected]" />
<meta http-equiv="Content-Language" content="nl" />
<meta name="copyright" content="Ferdi Reichart" />
<meta name="robots" content="all" />
<link rel="stylesheet" href="/style.css" type="text/css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
// geeft je een javascript object met de afbeeldingen
var fotos = eval('. json_encode($fotos) .');
var huidige_foto = 0;
var image_base = "'. $website_link .'/images/";
$(document).ready(function(e){
// bij een click op de foto wordt de volgende foto getoond
$("#foto").click(function (e) {get_photo(1)});
// klikken op "volgende" geeft het zelfde effect
$(".navigation .volgende").click(function (e) {get_photo(1)});
$(".navigation .vorige").click(function (e) {get_photo(-1)});
});
// haal een foto op delta verwijderd van de huidige. Als delta = +1 => haalt die de volgende foto
function get_photo (delta) {
huidige_foto += delta;
// controleren of huidige_foto een waarde is tussen 0 en het aantal afbeeldingen - 1
if (huidige_foto < 0) {
huidige_foto = 0;
}
if (huidige_foto >= fotos.length) {
huidige_foto = fotos.length - 1;
}
$("#foto").attr("src", image_base + fotos[huidige_foto]);
var i=0;
}
</script>
</head>
<body>'. $weergeven .'</body>
</html>';
?>
//include 'config.php';
//include 'functies.php';
?>
<?php
//$sql = "SELECT * FROM berichten WHERE id = '". mysql_real_escape_string($_GET['id'])."'";
//$res = mysql_query($sql);
//$row = mysql_fetch_array($res);
$website_link = 'http://www.112twente.com';
if(1 || $row['foto'] != '0')
{
$weergeven = '';
$fotos = 'foto1.png, foto2.png, foto3.png, foto4.png';
$fotos = explode("," , $fotos);
// de spaties verwijderen
foreach ($fotos as $key => $foto)
{
$fotos[$key] = trim($fotos[$key]);
}
$aantal = count($fotos);
if($aantal > 1)
{
$links = 'donker';
$rechts = 'donker';
$weergeven .= '<div class="box">';
$weergeven .= '<h4>Foto(s)<span></span></h4>';
$weergeven .= '<img id="foto" class="random" src="'.$website_link.'/images/'.$fotos[0].'" width="640" height="385" title="'.$row['titel'].'" alt="'.$row['titel'].'" />';
$weergeven .= '<div class="navigation"><img class="vorige" src="'. $website_link .'/images/foto-links-'.$links.'.png" alt="vorige" /><div class="tekst"> Er zijn '. $aantal .' fotos gevonden </div><img class="volgende" src="'. $website_link .'/images/foto-rechts-'.$rechts.'.png" alt="volgende" /></div>';
$weergeven .= '</div>';
}
else
{
$weergeven .= '<div class="box">';
$weergeven .= '<h4>Foto(s)<span> </span></h4>';
$weergeven .= '<img id="foto" class="random" src="'.$website_link.'/fotos/'.$foto['foto'].'" width="640" height="385" title="'.$row['titel'].'" alt="'.$row['titel'].'" />';
$weergeven .= '<div class="navigation"><div class="tekst"> Er is 1 foto gevonden </div></div>';
$weergeven .= '</div>';
}
// $weergeven;
}
echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="nl">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="112Twente.com" />
<meta name="description" content="112Twente.com" />
<meta name="author" content="Ferdi" />
<meta http-equiv="From" content="[email protected]" />
<meta http-equiv="Content-Language" content="nl" />
<meta name="copyright" content="Ferdi Reichart" />
<meta name="robots" content="all" />
<link rel="stylesheet" href="/style.css" type="text/css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
// geeft je een javascript object met de afbeeldingen
var fotos = eval('. json_encode($fotos) .');
var huidige_foto = 0;
var image_base = "'. $website_link .'/images/";
$(document).ready(function(e){
// bij een click op de foto wordt de volgende foto getoond
$("#foto").click(function (e) {get_photo(1)});
// klikken op "volgende" geeft het zelfde effect
$(".navigation .volgende").click(function (e) {get_photo(1)});
$(".navigation .vorige").click(function (e) {get_photo(-1)});
});
// haal een foto op delta verwijderd van de huidige. Als delta = +1 => haalt die de volgende foto
function get_photo (delta) {
huidige_foto += delta;
// controleren of huidige_foto een waarde is tussen 0 en het aantal afbeeldingen - 1
if (huidige_foto < 0) {
huidige_foto = 0;
}
if (huidige_foto >= fotos.length) {
huidige_foto = fotos.length - 1;
}
$("#foto").attr("src", image_base + fotos[huidige_foto]);
var i=0;
}
</script>
</head>
<body>'. $weergeven .'</body>
</html>';
?>
Deze lijn: if(1 || $row['foto'] != '0') moet je terug aanpassen.
Maar zoals het nu is werkt het stand alone.
Gewijzigd op 15/12/2010 16:23:49 door Ferdi R