In de map waar dit allemaal in staat zijn drie sub-mappen. Eentje voor de grote plaatjes, eentje voor de kleintjes en een voor de tekstbestanden. Ze gebruiken allemaal dezelfde bestandsnamen. De plaatjes met het achtervoegsel .jpg of .gif, de teksten met .txt.
De lijst van namen van de grote plaatjes moet precies dezelfde zijn als de lijst van namen van de kleine plaatjes. De tekstbestanden hoeven niet allemaal aanwezig te zijn!
Alle bestanden worden verwerkt in alfabetische volgorde. Bij erg veel plaatjes is het handiger om de naam te laten voorafgaan door een nummer om zo de volgorde te bepalen.
Maak de kleine plaatjes allemaal even hoog, zo'n 100 tot 150 pixels. De grote plaatjes zien er beter uit als ze dat zijn: groot. Voor hun afmetingen op het scherm maakt het geen verschil, wel voor de laadtijd en de gebruikte diskruimte. Een hoogte van 500 pixels is meestal wel voldoende voor een redelijk schermbeeld.
De code van index, album, foto en vergroot.php. En ook main.css:
| 1: | <!DOCTYPE> |
| 2: | <HTML> |
| 3: | <HEAD><TITLE>main</TITLE> |
| 4: | <LINK REL="stylesheet" TYPE="text/css" HREF="main.css"> |
| 5: | </HEAD> |
| 6: | <body> |
| 7: | <div id="tx"> |
| 8: | <b class=wijz> |
| 9: | <?php |
| 10: | date_default_timezone_set("CET"); |
| 11: | echo "laatste wijziging: " . date ("Y-m-d, H:i.", filemtime("index.php")); |
| 12: | ?> |
| 13: | </b><h1>Kunstige Kunst</h1> |
| 14: | <p align="center">Klik het plaatje voor een vergroting<br><br> |
| 15: | |
| 16: | <?php |
| 17: | function toon_rij($a, $b, $br, $pics){ |
| 18: | echo '<center><table><tr>'; |
| 19: | $i = $a - 1; |
| 20: | for ($t = 0; $t < $br; $t++, $i++){ |
| 21: | echo '<td><a href="foto.php?x='.$i.'">'; |
| 22: | echo '<img src="'."klein/".$pics[$i].'"></a></td>'; |
| 23: | } |
| 24: | echo '</tr><tr>'; |
| 25: | $i = $a - 1; |
| 26: | for ($t = 0; $t < $br; $t++, $i++){ |
| 27: | $file = "tekst/".substr($pics[$i],0,-3)."txt"; |
| 28: | if(file_exists($file)){ |
| 29: | $fp = fopen($file,"r"); |
| 30: | $txt = fgets($fp); // alleen eerste regel |
| 31: | fclose($fp); |
| 32: | }else $txt=" "; |
| 33: | echo '<td>'.$txt.'</td>'; |
| 34: | } |
| 35: | echo '</td></tr></table></center>'; |
| 36: | } // einde toon_rij |
| 37: | |
| 38: | |
| 39: | $max = 3; |
| 40: | $i = 0; |
| 41: | $a = 1; |
| 42: | $b = 6; // 1 tot 6 |
| 43: | include "album.php"; |
| 44: | ?> |
| 45: | <p>nog meer plaatjes: |
| 46: | <?php |
| 47: | $a = 7; |
| 48: | $b = 0; // automatisch tot einde |
| 49: | include "album.php"; |
| 50: | ?> |
| 51: | <p><center>klik <A HREF="hubobee.php">hier</A> voor de code!</center> |
| 52: | |
| 53: | </div></body></html> |
$max = 3; op regel 39 zorgt er voor dat er maximaal 3 kolommen
gebruikt worden.
De volgende regels, met $a en $b, bepalen dat de plaatjes 1 tot en
met 6 gebruikt worden.
De nummering van de plaatjes gebeurt na alfabetisch sorteren van de
bestanden,
in dit geval is beestje.jpg nummer 1.
Even verder is er een regel tekst: nog meer plaatjes, daarna volgt de rest van de plaatjes, te beginnen met nummer 7. $b=0 zorgt ervoor dat alle verdere plaatjes, zonder te tellen, getoond worden
| 1: | <?php |
| 2: | if($a==1){ |
| 3: | $fp = opendir("klein/"); |
| 4: | while ($file = readdir($fp)){ |
| 5: | $inf = pathinfo($file); |
| 6: | $ext = strtolower($inf['extension']); |
| 7: | if ($ext=="jpg" || $ext=="gif") $pics[] = $file; |
| 8: | } |
| 9: | closedir($fp); |
| 10: | sort($pics); |
| 11: | } |
| 12: | if($b==0)$b=sizeof($pics); |
| 13: | $br = 1 + $b - $a; // aantal kolommen |
| 14: | $tbr = 1; // te breed? |
| 15: | while($tbr>0){ |
| 16: | $tbr = 0; |
| 17: | $br = 1 + $b - $a; |
| 18: | if($br>$max) {$br = $max; $tbr++;} |
| 19: | toon_rij($a, $b, $br, $pics); |
| 20: | $a += $max; |
| 21: | } |
| 22: | ?> |
In de functie toon_rij zit een verwijzing naar:
| 1: | <!DOCTYPE> |
| 2: | <html> |
| 3: | <LINK REL="stylesheet" TYPE="text/css" HREF="main.css"> |
| 4: | <body><center> |
| 5: | <?php |
| 6: | $fp = opendir("groot/"); |
| 7: | while ($file = readdir($fp)){ |
| 8: | $inf = pathinfo($file); |
| 9: | $ext = strtolower($inf['extension']); |
| 10: | if ($ext=="jpg" || $ext=="gif") $pics[] = $file; |
| 11: | } |
| 12: | closedir($fp); |
| 13: | sort($pics); |
| 14: | $tel = count($pics); |
| 15: | $p = $_GET['x']; |
| 16: | if($p<0)$p=$tel-1; |
| 17: | else if($p>=$tel)$p=0; |
| 18: | // kopregel: |
| 19: | $i = $p-1; |
| 20: | echo '<br><br><a class="aa" href="foto.php?x='.$i.'">vorige</a>'; |
| 21: | echo '<a class="aa" href="index.php">overzicht</a>'; |
| 22: | $i += 2; |
| 23: | echo '<a class="aa" href="foto.php?x='.$i.'">volgende</a><br><br>'; |
| 24: | |
| 25: | $file = "tekst/".substr($pics[$i-1],0,-3)."txt"; |
| 26: | if(file_exists($file)){ |
| 27: | $fp = fopen($file,"r"); |
| 28: | $tx2 = fgets($fp); |
| 29: | $txt = $tx2."<br>"; |
| 30: | while(!feof($fp)) $txt = $txt.fgets($fp)."<br>"; |
| 31: | fclose($fp); |
| 32: | } |
| 33: | else{ |
| 34: | $txt=" "; |
| 35: | $tx2="plaatje ".$i; |
| 36: | } |
| 37: | $name=$pics[$p]; |
| 38: | echo '</center><div id=lf>'; |
| 39: | echo '<a class="plus" href="vergroot.php?x='.$name.'"><IMG class=mw SRC="'."groot/".$name.'" align="right"></a>'; |
| 40: | echo '<br>klik plaatje voor een vergroting'; |
| 41: | echo '</div><div id=rt>'; |
| 42: | echo '<br><i>'.$txt.'</i></div>'; |
| 43: | echo '<br clear="all"><br>'; |
| 44: | echo '<center><a class="aa" href="mailto:xxx@xxxxxxx.nl?subject='.$tx2.'">stuur e-mail</A>'; |
| 45: | ?> |
| 46: | </center></body></html> |
Op regel 43 moet een geldig e-mail adres worden ingevuld. Anders krijg je niet veel klanten...
Hierin een laatste verwijzing, naar
| 1: | <!DOCTYPE> |
| 2: | <html> |
| 3: | <LINK REL="stylesheet" TYPE="text/css" HREF="main.css"> |
| 4: | |
| 5: | <script type="text/javascript"> |
| 6: | |
| 7: | function resize(){ |
| 8: | var win_wd = 0, win_ht = 0; |
| 9: | if( typeof( window.innerWidth ) == 'number'){ //Non-IE |
| 10: | win_wd = window.innerWidth; |
| 11: | win_ht = window.innerHeight; |
| 12: | } |
| 13: | else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight)) |
| 14: | { //IE 6+ in 'standards compliant mode' |
| 15: | win_wd = document.documentElement.clientWidth; |
| 16: | win_ht = document.documentElement.clientHeight; |
| 17: | } |
| 18: | else if( document.body && ( document.body.clientWidth || document.body.clientHeight)) |
| 19: | { //IE 4 compatible |
| 20: | win_wd = document.body.clientWidth; |
| 21: | win_ht = document.body.clientHeight; |
| 22: | } |
| 23: | win_wd -= 20; |
| 24: | win_ht -= 20; |
| 25: | var myim = document.getElementById('myim'); |
| 26: | var img_wd = myim.width; |
| 27: | var img_ht = myim.height; |
| 28: | var win_rt = win_wd/win_ht; |
| 29: | var img_rt = img_wd/img_ht; |
| 30: | if (win_rt>img_rt) {myim.style.height = win_ht+'px'; myim.style.width = "auto";} |
| 31: | else {myim.style.width = win_wd+'px'; myim.style.height = "auto";} |
| 32: | } |
| 33: | </script> |
| 34: | |
| 35: | <body onresize="resize()"> |
| 36: | <?php |
| 37: | $name = $_GET['x']; |
| 38: | echo '<a class="min" href="javascript:history.back();">'; |
| 39: | echo '<img class="mrg" onload="resize()" id="myim" src="'."groot/".$name.'"></a>'; |
| 40: | ?> |
| 41: | </body></html> |
Hierin wat kromme sprongen om de zaak in de meest gebruikte browsers te laten werken...
Van de tekstbestanden wordt alleen de eerste regel getoond in het overzicht, het geheel wordt zichtbaar naast de vergroting. In de tekstbestanden mag HTML gebruikt worden maar dat hoeft niet. Voorbeeld van een tekstbestand:
| 1: | een beestje |
| 2: | |
| 3: | olie op doek, 30x30 cm. |
| 4: | €45,00 |
Er is ook nog een CSS bestand:
| 1: | body{ font-family: verdana, sans-serif; |
| 2: | color:#fff; |
| 3: | background:#880; |
| 4: | } |
| 5: | |
| 6: | h1{text-align:center;} |
| 7: | |
| 8: | img{border:none; margin:2px;} |
| 9: | |
| 10: | #tx{ margin-left:8%; |
| 11: | margin-right:8%; |
| 12: | margin-top:-15px; |
| 13: | top:10px; |
| 14: | height:95%; |
| 15: | z-index:2; |
| 16: | position:relative; |
| 17: | overflow:auto; |
| 18: | padding:10px; |
| 19: | scrollbar-arrow-color: #000; |
| 20: | scrollbar-base-color: #0aa; |
| 21: | } |
| 22: | |
| 23: | .mw{max-width:98%;} |
| 24: | #lf{width:49%; float:left} |
| 25: | #rt{margin-left:51%;} |
| 26: | |
| 27: | .wijz{ |
| 28: | font-size:10px; |
| 29: | padding-left:5px; |
| 30: | } |
| 31: | |
| 32: | .aa, .aar{ |
| 33: | font-size:120%; |
| 34: | color: #fff; |
| 35: | border:none; |
| 36: | padding:5px; |
| 37: | margin:10px; |
| 38: | text-decoration:none; |
| 39: | } |
| 40: | |
| 41: | .aa {background:#bb0;} |
| 42: | .aa:hover{background:#444;} |
| 43: | .mrg{margin-top:-40px;} |
| 44: | .plus{cursor:url('plus.cur'),auto;} |
| 45: | .min{cursor:url('min.cur'),auto;} |
| 46: |