PHP en foto's
Dat je met PHP een fotoalbum kan maken, dat is al eerder vertoond. Ik heb een twee-dimensionaal fotoalbum gemaakt. Er is een blok met kleine plaatjes. Als je zo'n kleintje aanklikt krijg je de grote foto, zoals te doen gebruikelijk. Daarbij krijg je twee pijlen, links en rechts, om de vorige of de volgende foto te zien, nog niks nieuws.
Er zijn ook twee pijlen naar boven of beneden. Daarmee krijg je de foto te zien die in het blok met kleintjes boven of onder de huidige foto staat. Dat is zinvol als je katten fokt. (Of honden, maar daar heb ik geen ervaring mee...)
(Heb je niet zo'n mooi gestructureerde reeks foto's dan kan je het beter anders doen! Hier een heel andere oplossing.)
Stel de kat krijgt zes jongen. Die gaan na dertien weken naar een ander huis. Je maakt elke week zes foto's, die zet je op je site. Voor iedere week maak je een nieuwe rij, onder de vorige. Je krijgt zo een blok met 6x13 foto's (Als je net na de geboorte begint)
Iemand met belangstelling voor één kitten klikt op dat kitten, de grote foto verschijnt. Nu kan ze door 'pijl naar beneden' te kiezen alle foto's van dat ene kitten zien zonder zich door 6x13=78 foto's heen te hoeven worstelen!
Nadeel: de foto's worden alfanumeriek gesorteerd, je moet dus iets doen aan de bestandsnamen. Staat kitten Felix bij de geboorte op foto 3 dan moet hij de volgende week op foto 9. Hier is een voorbeeld: Bontjes tweede nest
Alles dat nu volgt in een .zip: bont.zip
Dat hele voorbeeld staat in één map. Daarin de volgende PHP stukken:
bont/kittens.php
| 1: | <HTML> |
| 2: | <HEAD><TITLE>Bontje 2</TITLE> |
| 3: | <LINK REL="stylesheet" TYPE="text/css" HREF="kat.css"> |
| 4: | </HEAD> |
| 5: | <body> |
| 6: | <!-- stat code --> |
| 7: | <script language="JavaScript" src="../mystat.js"></script> |
| 8: | |
| 9: | <noscript> |
| 10: | <div><img src="http://frankabbing.net16.net/mystat.php" alt="" height="0" /> |
| 11: | </div> |
| 12: | </noscript> |
| 13: | <!-- stat code --> |
| 14: | |
| 15: | <div id="tx"> |
| 16: | <a style="padding:4; background:#dda; border:1px solid #f00; width:70;" HREF="../phpfoto_nl.php">terug</A> <a style="padding:4; background:#dda; border:1px solid #f00; width:70;" HREF="../phpfoto_en.php">return</A> |
| 17: | <h1>Bontjes tweede nest</h1> |
| 18: | hier komen ze in close-up, klik voor vergroting: |
| 19: | <center> |
| 20: | <?php |
| 21: | $kol = 6; |
| 22: | include "album_n.php"; |
| 23: | ?> |
| 24: | <a name="rij"></a> |
| 25: | <P ALIGN="center"><IMG SRC="dsc01459rij.jpg" WIDTH="600" HEIGHT="369"> |
| 26: | </center> |
| 27: | </div> |
| 28: | <br><br></body></html> |
Merk op dat $kol op de juiste waarde moet staan, 3 bij drie kittens. In dit deel staat een 'include' voor het volgende:
bont/album_n.php
| 1: | <script> |
| 2: | function fullscreen(x) {window.open(x, '', 'fullscreen=yes, scrollbars=yes');} |
| 3: | </script> |
| 4: | <style> |
| 5: | td{text-align:center; vertical-align:top;} |
| 6: | img{border:none;} |
| 7: | </style> |
| 8: | |
| 9: | <?php |
| 10: | $mini = "klein/"; |
| 11: | |
| 12: | $fp = opendir("$mini"); |
| 13: | while ($file = readdir($fp)){ |
| 14: | $ext = strtolower(array_pop(explode(".", $file))); |
| 15: | if ($file != "." && $file != ".." && $ext=="jpg") $pics[] = $file; |
| 16: | } |
| 17: | closedir($fp); |
| 18: | $tel = count($pics); |
| 19: | sort($pics); |
| 20: | |
| 21: | $i = 0; |
| 22: | $fp = fopen("tekst.txt","r"); |
| 23: | while(! feof($fp)) $text[$i++] = fgets($fp); |
| 24: | fclose($fp); |
| 25: | $tp = 0; |
| 26: | |
| 27: | $x = 0; |
| 28: | if($kol>0) { // maak tabel. make table |
| 29: | echo '<table>'; |
| 30: | for ($i = 0; $i < $tel; $i++){ |
| 31: | if($x==0)echo '<tr>'; |
| 32: | echo '<td>'; |
| 33: | echo '<a href="javascript:void(0);" onClick=fullscreen("photo2.php?x='.$i.'")>'; |
| 34: | echo '<img src="'.$mini.$pics[$i].'"></a>'; |
| 35: | |
| 36: | if(++$x==$kol){ |
| 37: | echo '<tr>'; |
| 38: | for($j = 0; $j<$kol; $j++) echo '<td>'.$text[$tp++]; |
| 39: | $x = 0; |
| 40: | } |
| 41: | } |
| 42: | if($x>0){ // als laatste regel <$kol, if last line <$kol |
| 43: | echo '<tr>'; |
| 44: | for($j = 0; $j<$x; $j++)echo '<td>'.$text[$tp++]; |
| 45: | } |
| 46: | echo '</table>'; |
| 47: | } |
| 48: | else{ // maak geen table als kol==0, no table if kol==0 |
| 49: | for ($i = 0; $i < $tel; $i++){ |
| 50: | echo '<a href="javascript:void(0);" onClick=fullscreen("photo2.php?x='.$i.'")>'; |
| 51: | echo '<img src="'.$mini.$pics[$i].'"></a>'; |
| 52: | } |
| 53: | } |
| 54: | ?> |
Hierin een verwijzing naar:
bont/photo2.php
| 1: | <html> |
| 2: | <LINK REL="stylesheet" TYPE="text/css" HREF="kat.css"> |
| 3: | <LINK REL="stylesheet" TYPE="text/css" HREF="kat_2.css"> |
| 4: | <body> |
| 5: | <center> |
| 6: | <?php |
| 7: | $kol = 6; |
| 8: | include "album2.php"; |
| 9: | ?> |
| 10: | </center> |
| 11: | </body></html> |
Hierin een laatste verwijzing, naar
bont/album2.php
| 1: | <?php |
| 2: | |
| 3: | // toon grote foto, show large picture |
| 4: | |
| 5: | $maxi = "groot/"; |
| 6: | |
| 7: | $fp = opendir("$maxi"); |
| 8: | while ($file = readdir($fp)){ |
| 9: | $ext = strtolower(array_pop(explode(".", $file))); |
| 10: | if ($file != "." && $file != ".." && $ext=="jpg") $pics[] = $file; |
| 11: | } |
| 12: | closedir($fp); |
| 13: | sort($pics); |
| 14: | |
| 15: | $i = 0; |
| 16: | $fp = fopen("tekst.txt","r"); |
| 17: | while(! feof($fp)) $text[$i++] = fgets($fp); |
| 18: | fclose($fp); |
| 19: | |
| 20: | $tel = count($pics); |
| 21: | $p = (isset($_GET['x']))? $_GET['x'] : ''; |
| 22: | if($p<0)$p=$tel-1; |
| 23: | else if($p>($tel-1))$p=0; |
| 24: | $i = $p-$kol; |
| 25: | if($i>=0)echo '<a href="photo2.php?x='.$i.'"><img src="pijlop.gif"></a>'; |
| 26: | else echo '<img src="blank.gif">'; |
| 27: | $i = $p-1; |
| 28: | echo '<a href="photo2.php?x='.$i.'"><img src="pijllinks.gif"></a>'; |
| 29: | echo '<input type="button" value="" onclick="window.close()"> '; |
| 30: | $i = $p+1; |
| 31: | echo '<a href="photo2.php?x='.$i.'"><img src="pijlrechts.gif"></a>'; |
| 32: | $i = $p+$kol; |
| 33: | if($i<$tel)echo '<a href="photo2.php?x='.$i.'"><img src="pijlneer.gif"></a>'; |
| 34: | else echo '<img src="blank.gif">'; |
| 35: | $im = $maxi.$pics[$p]; |
| 36: | echo '<br><img class="ai" src="'.$im.'"><br><br>'; |
| 37: | echo $text[$p]; |
| 38: | ?> |
In de map waar dit allemaal in staat zijn twee sub-mappen. Eentje voor de grote foto's en eentje voor de kleintjes. Ze gebruiken allemaal dezelfde bestandsnamen. Als je meer dan één nest heb kan je dat handiger organiseren door een map per nest te nemen. In die map komen kittens.php en photo2.php en de twee submappen. Al het overige komt in een hogere map, zodat alle nesten dat kunnen gebruiken. Het bestand text.txt bevat alle onderschriften, een regel per foto, in dezelfde volgorde als de foto's. Zie ook http://www.bontgoed.nl
Bijna vergeten, er is ook nog wat CSS:
bont/kat.css
| 1: | body{ |
| 2: | color: #000; |
| 3: | font-size:100%; |
| 4: | font-family: verdana, sans-serif; |
| 5: | background: #a00; |
| 6: | } |
| 7: | td{font-size:80%;} |
| 8: | h1{color:#080; text-align:center;} |
| 9: | a{color:blue;} |
| 10: | img{margin-top:8px;} |
| 11: | |
| 12: | #tx{ |
| 13: | margin-left:8%; |
| 14: | margin-right:8%; |
| 15: | top:10px; |
| 16: | height:90%; |
| 17: | z-index:2; |
| 18: | position:relative; |
| 19: | overflow:auto; |
| 20: | padding:10px; |
| 21: | scrollbar-arrow-color: #f00; |
| 22: | scrollbar-base-color: #cc8; |
| 23: | background: #ffc; |
| 24: | } |
bont/kat_2.css
| 1: | body{background: #ffc;} |
| 2: | |
| 3: | img{border:none; margin:20 20 0 0;} |
| 4: | |
| 5: | input{ |
| 6: | background:url(terugknop.gif); |
| 7: | height:30px; |
| 8: | width:62px; |
| 9: | border:none; |
| 10: | margin:3px; |
| 11: | } |
| 12: |