PHP en foto's
Er is een ongestructureerde verzameling van afbeeldingen, type jpg en gif. De gif's zijn bovendien geanimeerde gif's. Alle andere bestanden worden genegeerd. Het script om ze te bekijken gebruikt geen thumbnails maar verkleint de originelen. Daar kan je op klikken om een vergroting te zien. Afbeeldingen die te groot zijn voor het scherm worden aangepast. Ze worden gecentreerd getoond. Door een klik op de vergroting kom je terug bij het blad met de verkleiningen. Voorbeeld, de wilde zwijnen zijn opgenomen met een infraroodcamera.
Voordeel van deze methode: gemakkelijk te organiseren. Alle plaatjes die je in foto_archief dumpt worden automatisch getoond. Nadeel: traag, thumbnails zijn kleiner, die worden sneller geladen. Voor een grote verzameling plaatjes kan je beter met thumbnails werken.
Er zijn drie bestandjes:
getfiles.php
| 1: | <style> |
| 2: | body{ |
| 3: | background:#444; |
| 4: | color:#fff; |
| 5: | font-family:verdana, sans-serif; |
| 6: | font-size: 80%; |
| 7: | } |
| 8: | .b{ |
| 9: | background:#ff8; |
| 10: | color:#00f; |
| 11: | margin:0 100; |
| 12: | padding:10; |
| 13: | border:2px solid #f00; |
| 14: | } |
| 15: | img{margin:8; border:none;} |
| 16: | </style> |
| 17: | |
| 18: | <script type="text/javascript"> |
| 19: | <!-- |
| 20: | function fs(url){ |
| 21: | win=window.open(url,'venster','fullscreen=yes'); |
| 22: | return false; |
| 23: | } |
| 24: | // --> |
| 25: | </script> |
| 26: | |
| 27: | <body> |
| 28: | <img src="iptracker.php" height="1" border="0"> |
| 29: | <p align="right"><a class="b" href="javascript:history.back()"> |
| 30: | |
| 31: | <?php |
| 32: | if($_GET['lan']== nl){ |
| 33: | echo "terug</a><h2>foto archief</h2>"; |
| 34: | echo "klik een plaatje voor een vergroting. Klik de vergroting om terug te keren.<p>"; |
| 35: | } |
| 36: | else{ |
| 37: | echo "return</a><h2>foto archive</h2>"; |
| 38: | echo "Click an image to enlarge it. Click the enlargement to return.<p>"; |
| 39: | } |
| 40: | |
| 41: | $dir = "../foto_archief/"; |
| 42: | $list = array(); |
| 43: | $i = 0; |
| 44: | if ($fp = opendir($dir)) { |
| 45: | while (($file = readdir($fp)) !== false) { |
| 46: | $pos = strpos($file,'.jpg') + strpos($file,'.gif') ; |
| 47: | if($pos>0) $list[$i++] = $file; |
| 48: | } |
| 49: | closedir($fp); |
| 50: | $j = 0; |
| 51: | while($j<$i){ |
| 52: | $im = $list[$j++]; |
| 53: | echo "<a href=\"javascript:void(0)\" onclick=\"fs('vul.html?".$im."')\">"; |
| 54: | echo "<img src=".$im." height=100></a>\n"; |
| 55: | } |
| 56: | } |
| 57: | ?> |
| 58: | </body> |
Let op regel 46 met '.jpg' en '.gif'. Die kan desgewenst uitgebreid worden met '.jpeg', '.png', enzovoorts.
vul.html
| 1: | <html> |
| 2: | <head> |
| 3: | <title>vul</title> |
| 4: | <style> |
| 5: | body{ |
| 6: | background:#444; |
| 7: | color:#fff; |
| 8: | font-family:verdana, sans-serif; |
| 9: | font-size: 80%; |
| 10: | } |
| 11: | a{color:#ff0;} |
| 12: | img{border:none; margin:none;} |
| 13: | </style> |
| 14: | </head> |
| 15: | <script type="text/javascript"> |
| 16: | var pan, win_y, win_x, img_y, img_x |
| 17: | function adapt(){ |
| 18: | win_y = document.body.clientHeight |
| 19: | win_x = document.body.clientWidth |
| 20: | img_x = document.images[0].width |
| 21: | img_y = document.images[0].height |
| 22: | pan = img_x / img_y |
| 23: | var y_r = img_y / win_y |
| 24: | var x_r = img_x / win_x |
| 25: | if (img_y>win_y) img_y /= x_r |
| 26: | if (win_y>img_y) document.images[0].style.margin= (win_y-img_y)/2+" 0 0 0" |
| 27: | if (y_r > x_r && img_y>win_y) document.images[0].style.height = "100%" |
| 28: | else if(img_x>win_x) document.images[0].style.width = "100%" |
| 29: | } |
| 30: | |
| 31: | function p(x){document.write(x)} |
| 32: | |
| 33: | </script> |
| 34: | |
| 35: | <body> |
| 36: | <p align="center"> |
| 37: | |
| 38: | <script type="text/javascript"> |
| 39: | var file = window.location.search.substring(1) |
| 40: | p("<a href=\"#\" onclick=\"window.close()\"><img src="+file+"></a>") |
| 41: | adapt() |
| 42: | if(pan>3 && img_x > win_x)p("<p><a href=\"#\" onclick=\"window.open('vulpan.html?"+file+"','','fullscreen=yes, scrollbars=yes')\">panorama</a>.") |
| 43: | </script> |
| 44: | |
| 45: | </body> |
De wat vreemde berekening in regel 25 is nodig om heel grote foto's te centreren. In de verzameling is dat 'brandsklarenpan', die is 5333x985.
In regel 42 wordt vastgesteld of een foto waarschijnlijk een panorama is. In de volgende 'vulpan' wordt de foto zo hoog mogelijk met een scrollbar er onder getoond:
vulpan.html
| 1: | <html> |
| 2: | <head> |
| 3: | <title>vul pano</title> |
| 4: | |
| 5: | <style> |
| 6: | body{ |
| 7: | background:#444; |
| 8: | overflow-y:hidden; |
| 9: | scrollbar-base-color:#666; |
| 10: | } |
| 11: | img{border:none; margin:none; height:100%;} |
| 12: | </style> |
| 13: | </head> |
| 14: | |
| 15: | <body> |
| 16: | <script type="text/javascript"> |
| 17: | var file = window.location.search.substring(1) |
| 18: | document.write("<a href=\"#\" onclick=\"window.close()\"><img src="+file+"></a>") |
| 19: | </script> |
| 20: | </div> |
| 21: | </body> |