24.02.2007

Bilder im Bildordner listen und jetzt auch ansehen :-)

Silke Schümann wrote this 18:37:

So nun hat mein erstes kleines Tool für Webentwicklung (auf meinem lokalen Webserver Bilder und deren Maße listen) hat nun ein ertes Extra bekommen und wer möchte kann sich das gute Stück ziehen (Link am Ende des 56 60 Zeilen langen Skripts, Rechtsklick, “speichern unter” und das “.txt” am Ende des Seitennamens entfernen). :-)

  1. <?PHP
  2. // Bezeichnung: Webbilderlister 1.0
  3. // Beschreibung: Bildordner auslesen, samt Maße listen und kleinem Prieview per hover
  4. // Autorin: Silke Schümann (http://www.tempuscreativ.de)
  5. // Copyright: Creative Commons Attribution (http://creativecommons.org/licenses/by/2.0/de/ )
  6. // Stand: 24. Februar 2007
  7. echo '<?xml version="1.1" encoding="iso-8859-1"?>'."\r\n";
  8. ?>
  9. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  10. <html>
  11. <head>
  12. <title>Webbilderlister 1.0</title>
  13. <meta name="generator" content="tempus creativ silke schuemann http://templaterie.de" />
  14. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  15. <style type="text/css">
  16. html, body, img, div {padding: 0; margin: 0; border: 0;}
  17. html {height: 100.05%;}
  18. body {height: 100%; background: #f7f7f7;}
  19. body, p, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, td, div
  20. {font: 13.25px/1.4em Verdana, Arial, Helvetica,sans-serif; color: #474747;}
  21. h1 {font-size: 1.5em; padding-top: 30px;}
  22. h2 {font-size: 1.3em; }
  23. h3 {font-size: 1.15em;}
  24. h4 {font-size: 1em; }
  25. h5 {font-size: .95em; }
  26. h6 {font-size: .95em; }
  27. .mono {margin-left: 30px; margin-top: 48px;}
  28. a {color: #474747; text-decoration: none;}
  29. a:link {color: #474747; text-decoration: none;}
  30. a:visited {color: #600;}
  31. a:active {color: #e00;}
  32. a:hover {color: #f00; text-decoration: underline;}
  33. /* Bildvorschau vom CSS-Playground http://www.cssplay.co.uk/menu/avatars2.html */
  34. #imglist a img {display: block; position: absolute; width: 1px; height: 1px; border: 0px; top: -1px; left: -1px;}
  35. #imglist a:hover img {display: block; position: absolute; width: auto; height: auto; top: 135px; left: 475px; z-index: 5;}
  36. .filename {padding: 4px 9px;}
  37. .sizes {padding: 4px 9px;}
  38. .kb {padding: 4px 9px; text-align: right;}
  39. .odd {background: #e7e7e7;}
  40. table {border: 1px solid #ddd;}
  41. </style>
  42. </head>
  43. <body>
  44. <div class="mono">
  45. <h1>Bilder im Ordner "<?PHP $dirArr = explode(DIRECTORY_SEPARATOR, dirname(__FILE__)); echo (isset($dirArr[(count($dirArr))-2]))? $dirArr[(count($dirArr))-2]."/":""; echo (isset($dirArr[(count($dirArr))-1]))? $dirArr[(count($dirArr))-1]:"./"; ?>"</h1>
  46. <table id="imglist">
  47. <?PHP
  48. foreach (glob("{*.gif,*.jpg,*.png}", GLOB_BRACE) as $pics) {
  49. $picsize = getimagesize($pics);
  50. $pics_kb = filesize($pics)/1024;
  51. $pics_kb = round($pics_kb,2);
  52. $odd = ($i%2)? "class='odd'":"";$i++;
  53. echo "<tr $odd><td><a href=\"#\" class=\"picview\"><img src=\"$pics\" alt=\"\" />{$pics}</a> </td><td class=\"sizes\">Width: $picsize[0] </td><td class=\"sizes\">Height: $picsize[1] </td><td class=\"kb\">$pics_kb KB</td></tr> \n";
  54. }
  55. ?>
  56. </table>
  57. </div>
  58. </body>
  59. </html>
  60. <!-- XHTML Valide -->
  61. Download this code: imageslister.php.txt

Für den Preview der Bilder habe ich Stu Nichols Methode, um Bilder an anderer Stelle in der Seite anzuzeigen, verwendet.

Update Dateigröße ergänzt.

* Filed under: Programmierung, Tools
* 1 Comment

One Response to “Bilder im Bildordner listen und jetzt auch ansehen :-)”

  1. Templaterie Blog Says:
    February 27th, 2007 at 12:33

    [...] Es war überfällig hier einen konformen Website Entwurf vorzustellen. Schlicht und mit Logo-Spiegelung. Cleverness ist im Detail bei der Navigation geplant. Die Idee zum Verhalten der Navigation (Reflektion des roten Buttons auf den Folgelink) kam mir bei der Umsetzung der Funktion für meine Webjobs um die Bilder eines Ordner samt Daten aufzulisten [...]

Leave a Reply