Aantal fotos in 1 img tag.

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Ferdi R

Ferdi R

08/12/2010 17:28:38
Quote Anchor link
Ik weet zo even niet meer hoe ik dit moet oplossen.
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)
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
<?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>';
}

?>


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.
 
PHP hulp

PHP hulp

29/03/2024 00:08:45
 
Kris Peeters

Kris Peeters

08/12/2010 18:02:12
Quote Anchor link
Toch even melden dat het niet gebruikelijk is om iets als "2-1.png, 2-2.jpg, 2-3.jpg" in 1 veld te steken.

Nu ja, wat jij wil:
met wat javascript zal dat inderdaad lukken.
 
Ferdi R

Ferdi R

08/12/2010 20:11:24
Quote Anchor link
Dus het is beter dat ik een aparte tabel maak voor de foto's?
 
Kris Peeters

Kris Peeters

09/12/2010 10:55:40
Quote Anchor link
Dat is wel beter, ja.
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)
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
<?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>'
;
?>


Ik heb een aantal dingen moeten aanpassen aan je code.
Gewijzigd op 09/12/2010 11:02:04 door Kris Peeters
 
Ferdi R

Ferdi R

09/12/2010 16:57:30
Quote Anchor link
Het werkt goed maar ik heb het liever zonder een GET waarde.

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)
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
<?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>'
;
?>
 
Kris Peeters

Kris Peeters

09/12/2010 17:10:19
Quote Anchor link
Ja, dat hoeft niet via $_GET.
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
 
Ferdi R

Ferdi R

09/12/2010 20:38:00
Quote Anchor link
Goed ik heb 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)
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
<?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>'
;
?>
 
Kris Peeters

Kris Peeters

13/12/2010 17:53:06
Quote Anchor link
Ja, sorry, even uit het oog verloren.

Probeer zo eens (zet gewoon de eerste twee lijnen terug)
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
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>'
;
?>
Gewijzigd op 13/12/2010 17:54:52 door Kris Peeters
 
Ferdi R

Ferdi R

14/12/2010 19:11:25
Quote Anchor link
Het werkt maar ik heb het verandert om het te intergreren in mijn site maar nu pakt hij de fotos niet meer. Zelfs niet de eerste foto

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
<!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>
Gewijzigd op 14/12/2010 19:13:00 door Ferdi R
 
Kris Peeters

Kris Peeters

15/12/2010 02:50:13
Quote Anchor link
Ja, je moet altijd zien dat je logica bovenaan staat en je html onderaan.

Kijk, zo werkt het.
Ik heb een aantal dingen in commentaar gezet, zie zelf of je de rest kan aanvullen.

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
<?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>'
;
?>


Deze lijn: if(1 || $row['foto'] != '0') moet je terug aanpassen.
Maar zoals het nu is werkt het stand alone.
 
Ferdi R

Ferdi R

15/12/2010 15:45:20
Quote Anchor link
Zo werkt het wel mooi maar ik maak gebruik van een header.php en footer.php. en elke keer als ik het php stukje in de header include dan werkt het klikken niet meer.
Gewijzigd op 15/12/2010 16:23:49 door Ferdi R
 



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.