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.

<?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.
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.
Dus het is beter dat ik een aparte tabel maak voor de foto's?
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 )

<?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.
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.?


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


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
Goed ik heb even geduld.

[size=xsmall]Toevoeging op 10/12/2010 17:52:24:[/size]

Ik heb het zover aangepst hoe ik het wil hebben maar ik zou niet weten hoe ik javascript met php moet combineren.


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


Ja, sorry, even uit het oog verloren.

Probeer zo eens (zet gewoon de eerste twee lijnen terug)

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


<!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>
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.


<?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.
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.

Reageren