Bildpräsentation

Bilder präsentieren

Über Geschmack läßt sich trefflich streiten, über die Präsentationen nicht. Wer nicht mit Liebe, handwerklichem Können und Ideenreichtum an sein Tagwerk geht, liefert dann durchschnittliches. Es wird langweilige Massenware produziert. Es wird irgend etwas produziert. Ich komme einfach nicht drumherum, den Modulverbreitern die Schuld daran zu geben. Auf einmal fühlen sich Webseitenlaienbastler in der Lage, etwas anzubieten, was sie ohne nie nicht hätten auf die Beine stellen können. Es ist ein inflationärer Markt geworden. Und so sieht das Web zu 80% auch aus. Es ist ganz leicht herauszufinden, ob Webseiten mit einem CMS gebastelt wurden. Bei übergroßem Inhalt wird das gesamte main-Element gescrollt. Auch wenn nicht jeder gleich auf Elemente des HTML 5 zurückgreift, inhaltstragende Elemente waren früher halt DIVs, denen die Eigenschaft overflow: auto; gegeben wurde. Dem zentralen Objekt (heute main), dem alle weiteren Elemente als Kind zugeordnet werden, aber nicht. Ich hasse es, wenn die Navigation verschwindet und man wieder nach oben scrollen muss, um weiteres anschauen zu können.

Ja, das ist ein Reizthema für mich.

Viele Bilder mit Maßen um die 500px in Themenseiten zu stopfen, ist eher selten. Dank Slideshow ist dafür ein Gegenmittel gut verbreitet. Vorschaubilder, die Thumbnails, bieten eine weitere Möglichkeit.

+++ Klick im Bild zeigt eine große Ansicht! Die Navigation befindet sich dann im Fuß. +++

Die folgend beschriebenen zwei Dateien erledigen diese Vorschaubilder. die erste erfasst den Umfang/Anzahl der Bilder, die zweite dimensioniert und positioniert.
Diese werden um 50% verkleinert und dem Hoch- oder Querformat entsprechend zentriert. Der nicht ins Bild passende Teil wird durch die CSS-Eigenschaft clip nicht dargestellt.

Aber der Reihe nach wieder die nötigen Erklärungen. Mit dem Erfassen aller Bilder wird begonnen.
Teil1: die zu inkludierende Datei picdir.php, da die Anweisungen für die Einzelbilder noch einmal benötigt werden.

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20 <?php $picpath="../images_reihe/"; $verzeichnis = dir($picpath) or die("Fehler!"); $ar_pic = array(); $ar_picW = array(); $ar_picH = array(); while($datei = $verzeichnis->read()){ if (preg_match('/.jpg/',$datei)){ $pos = strpos($datei,"pic"); $suf = strpos($datei,"."); $thnum = substr($datei,$pos+3, 2); $picnum = intval(substr($datei, $suf-2, 2)); $bild = $picpath.$datei; $get_size = getimagesize($bild); $ar_picW[$picnum] = $get_size[0]; $ar_picH[$picnum] = $get_size[1]; $ar_pic[$picnum] = $bild ; } } $verzeichnis->close(); ?>

In 8: wird nach der Zeichenkombination pic gesucht. Die Benennung der Bilddateien ist wieder willkürlich. Ich benutze picxx_xx.jpg. Die ersten beiden xx stehen für eine Zahlenfolge, die falls notwendig, eine Themengliederung erfassen können. Es folgt _xx zur Durchnummerierung.
14 und 15: Die Bildabmessungen werden Arrays übergeben.
16: Der Pfad zu den Bildern.
Teil2: die zu inkludierende Datei picoftheme.php. Nun wird festgelegt, wie alles dargestellt werden soll. Diese Datei ist ebenfalls extern. Das muss nicht sein, aber ich mag es halt immer ein wenig geordnet und der besseren Erklärung dient es auch.

0
1
2
3
4
5
6 <?php $left = 0 ; $top = 0 ; $faktor = 200 ; $stepleft = $faktor+5 ; $steptop = $faktor+5 ; $topzahl =0; $leftzahl = 1; $piktonr = 1; $toppx = $top ."px" ; $leftpx = $left ."px" ;

Die Initialisierung der verwendeten Variablen. Mit $faktor wird die Ausgabengröße der Vorschaubilder bestimmt. Eine Größenänderung davon wird wie folgt nachgereicht:
( muss ich anders hervorheben, um den Echo-Befehl sichtbar zu machen. )


echo "<style type='text/css'>
 .pic_contain{ clip: rect(0 ".$faktor."px ".$faktor."px 0); }
 </style>";

Mit Echo wird die CSS-Eigenschaft für clip nachgereicht, damit $faktor sich auch auf das Abschneiden des Bildes auswirkt.

11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44 asort ($ar_pic) ; $thempic = '' ; while (list ($key, $val) = each ($ar_pic)) { $pw = $ar_picW[$key] ; $ph = $ar_picH[$key] ; $format = $ph > $pw ? 'H' : 'Q' ; if ( $format == 'H' ) $koef = $pw /$faktor ; else $koef = $ph / $faktor ; $pwk = $pw/$koef.'px' ; $phk = $ph/$koef.'px' ; if ( $format == 'Q' ) { $xkor = ((intval($pwk)-$faktor )/2) .'px' ; $ykor = 0 ; $style = "style='display: block; margin-left: -$xkor ;' " ; }else{ $xkor = 0 ; $ykor = ((intval($phk)-$faktor )/2) .'px' ; $style = "style='display: block; margin-top: -$ykor ;' " ; } // Die anzuzeigenden Elemente zusammenbauen k=$dir&s=$file&ogr=$og&fnr=$filenr&b=$key $bildanzeige = "<a href='?k=$dir&s=$file&ogr=$og&grz=$grz&fnr=$filenr&b=$key&a=$anav&m=$move'> <img src='$val' $style height='$phk' width='$pwk' border='0' ></a>" ; echo "<div style='position:absolute; top:$toppx; left:$leftpx;' class='pic_contain'> $bildanzeige</div>\n" ; // Anzahl der Vorschaubilder in einer Reihe und Positionieren der folgenden Reihen $spalten = 4 ; $bildnavi = 0 ; $leftzahl = $piktonr % $spalten ; $leftpx = $piktonr % $spalten * $stepleft .'px' ; if ( $leftzahl == 0 ) $topzahl++ ; $toppx = $topzahl * $steptop .'px'; $piktonr++ ; } ?>

14 und 15: Auswertung der Bildabmessungen.
16 bis 18: Feststellen des Formates.
19 und 20: Verkleinern
21 bis 29: Bilder werden zentriert
36 bis 42: Die Anordnung der Vorschaubilder

Die Datei „einzelbild.htx“

Die Datei zur Darstellung der Einzelbilder erkläre ich in vier Teilen: der CSS-Formatierung, dem PHP-Teil und JavaScript für die notwendigen Nachjustierungen der Anzeige. Der vierte Punkt beschäftigt sich mit der Navigation im footer-Element.
CSS

06
07
08
09
10
11
12
13
14
15
16
17
18
19
20


<style type="text/css" media="all"><!--

/* spezielle Formatierungen für die Seite*/

#bildfond { background-color: black; position: relative; 

   top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; z-index: 2; 

   margin: 0; padding: 0; box-shadow: 0px 0px 12px 12px #999 inset; }

#bild { border-color: #fff #084b7e #084b7e #fff; border-style: solid; border-width: 1px 2px 2px 1px; }

#bildhoehe { color: white; visibility: hidden; }

#bildtitel { font-size: 15px; font-family: arial; position: absolute; left: 1px; bottom: 0; }

figure { position: absolute; margin: 0; padding: 0; display: inline-block; }

figure > figcaption { text-align: center; margin: 0; 

   background-color: rgba(0, 0, 0, 0.5); bottom: 3px; height: 22px; padding: 2px 0 0; }

figcaption { color: white; }

#figure { position: absolute; }

--></style>

Das id-Element #bildhoehe wird für die PHP-Verarbeitung wichtig.
PHP

21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45 <div id='bildfond'> <?php include "../komponenten/picdir.php" ; if(is_file($ar_pic[$abb])){ $pw = $ar_picW[$abb] ; $ph = $ar_picH[$abb] ; $xkor = (1010 - $pw) / 2 .'px' ; $darstellen = $ar_pic[$abb] ; $tph = $ph+50 .'px' ; echo "<var id='bildhoehe'>$ph</var>" ; //ist zur Weiterverarbeitung in JavaScript // Bildtitel auslesen $exif = exif_read_data($ar_pic[$abb], 0, true); $textausgabe = $exif["IFD0"]["ImageDescription"] ; // figure und figcaptain Maße des Bildes nachreichen echo ' <style type="text/css"> figure { height: '.$ph.'px; left: '.$xkor.' ; } figure > figcaption { width: '.$pw.'px; } </style>'; } $vollbild = "<img src='$darstellen' id='bild' border='0' alt='$textausgabe' />" ; echo "<figure id='figure'>$vollbild<figcaption id='bildtitel'>$textausgabe</figcaptain></figure>" ; $bildnavi = 1 ; ?> </div>

23 Da die Einzelbilddarstellung in der Datei „einzelbild.htx“ mit jedem neuen Aufruf, also auch durch die Navigation seinen Bildinhalt sammeln muss, kommt wieder die Datei „picdir.php“ zum Einsatz.
43 Die Variable $bildnavi teilt der main.php mit, dass im footer eine Bildnavigation erscheinen soll.

JavaScript
Nun soll das article-Element #contain eine neue Größe erhalten, #figure und #bild bekommen ihre Platz zugewiesen. #figure wird vertikal zentriert. In 53 wird nun die Höhe ermittelt.
58 bis 60: Nachdem der Wert der Bildhöhe erfasst ist, wird die Bildhöhe von der Gesamthöhe subtrahiert und durch 2 geteilt. Damit wird die vertikale Ausrichtung vorgemommen. Drei Pixel wieder höher zu rutschen, tut nur meinem Ego gut. Es bißchen spannungsvoll außermittig habe ich nämlich gern. Sonst wäre es ja langweilig.
Damit sind wir für die Einzelbilddarstellung durch!

47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62


<script>

var obj_contain = document.getElementById("contain") ;

obj_contain.style.top = 150+"px" ;

obj_contain.style.left = -10+"px" ;

obj_contain.style.width = 1010+"px" ;

// contain hat jetzt die maximal zur Verfügung stehenden Maße 

var cbh = obj_contain.offsetHeight ;

var obj_einzelbild = document.getElementById("bildfond") ;

var xpos = obj_einzelbild.offsetLeft ;

var obj_bild = document.getElementById("figure") ;

// Nun kommt der unsichtbare p-tag id "bildhoehe" zum Einsatz, wie in Zeile 32 darauf hingewiesen.

var bildH = document.getElementById("bildhoehe").innerHTML ;

var hkor = (( cbh - bildH ) / 2)-3 ;

obj_bild.style.top = hkor+"px" ;

</script>

Die Datei „bildnavi.htx“

Kommt im footer zum Einsatz, wenn in ein Bild geklickt wird. Es übernimmt den weiteren Bildwechsel.

00
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31


<style type="text/css" media="all"><!--

/* spezielle Formatierungen für die Seite*/

#bildnavi { position: absolute; top: 8px; left: 50%; 

  width: 250px; height: 30px; margin-top: 8px; margin-left: -125px; }

#bildnavi .bildnav{ background-color: #084b7e; position: absolute; 

  bottom: 10px; width: 230px; }

#bildnavi .bildnav a[href] { color: white; text-decoration: none; width: 100%; }

#bildnavi .bildnav a:hover{ color: #eec785; }

.cell { background-color: #3e81b4; text-align: center; vertical-align: middle; width: 33%; }

#bildnavi td a { position: relative; min-width: 80px; }

--></style>

<div id='bildnavi'>

<?php

$bk = $abb-1 ;

$fw = $abb+1 ;

$fill = "&nbsp; &nbsp; " ;

$nl = $abb > 1 ? "<td class='cell'>

  <a href='?k=$dir&s=$file&ogr=$og&b=$bk&grz=$grz&fnr=$filenr&a=$anav&m=$move'>

  $fill ◄ $fill </a></td>" 

  : "<td class='cell'></td>" ;

$nr = $abb < count($ar_pic) ? "<td class='cell'>

  <a href='?k=$dir&s=$file&ogr=$og&b=$fw&grz=$grz&fnr=$filenr&a=$anav&m=$move'> $fill ► $fill </a></td>" 

  : "<td class='cell'></td>" ;

$no = "<td class='cell'>

  <a href='?k=$dir&s=$file&ogr=$og&grz=$grz&fnr=$filenr&a=$anav&m=$move'> $fill ▲ $fill </a></td>" ;

?>

 <table class='bildnav' border='1' cellspacing='2' cellpadding='0'>

  <tr>

   <?php echo $nl.$no.$nr ; ?>                

  </tr>

 </table>

</div>

Die Werte der URL-Anhänge werden in der main.php vor Auslösen weiterer Inhalte in der Superglobelvariable $_GET ermittelt.
$dir = isset($_GET['k']) ? $_GET['k'] : 0 ;
$file = isset($_GET['s']) ? $_GET['s'] : 0 ;
$og = isset($_GET['ogr']) ? $_GET['ogr'] : 0 ;
$abb = isset($_GET['b']) ? $_GET['b'] : 0 ;
Vielleicht noch eine Erwähnung zur Variablen $fill. Es dient zum Auffüllen, um den aktiven Bereich um die Dreiecke zu vergrößern und eine für die URL-Anhänge grz=$grz&fnr=$filenr&a=$anav&m=$move. Diese werden für die alternative Navigation benötigt.