Quadratische Bildergalerie mit dynamischen Bildern

T

TribunM

Erfahrenes Mitglied
Hallo Leute,

Oben genannte Gallerie möchte ich gerne implementieren. Die Bilderansicht soll dabei quadratisch sein und die Bilder mittig zentriert (höhe und breite) dargestellt werden, egal ob es sich um schmale oder breite Bilder handelt.

Mit text-align kann ich das Bild zumindest vertikal zentrieren aber horizontal ist ja so nicht direkt zu machen.

Mein bisheriger Ansatz:

Momentan hatte ich es so geplant, dass ich mit php die Bildgröße auslese und ermittle daraus den Abstand für die kleinere Seite. Hohe Bilder sollen der höhe nach (wenn höher als Rahmen) und breite nach der Breite (wenn breiter) skaliert werden.

Ursprünglich wollte ich entweder width bzw. height für den img tag setzen, so dass die Bilder dann per HTML skaliert werden. Allerdings muss ich dann wiederum die Höhe und breite neu auslesen (per javascript und dann die Werte für den Balken zum Rand errechnen.

Das hört sich jetzt aber nicht so richtig sauber an. Da gibt es sicherlich bessere Lösungen.

Evtl. kann man die Bilder mit php vorher runterskalieren, dann spart man sich die Javascript Geschichte oder welche anderen Möglichkeiten gibt es da noch?

Über Lösungsansätze und Tipps würde ich mich sehr freuen

Tribbi
 
Zuletzt bearbeitet:
Mit PHP bzw der GD-Lib kannst du das eigentlich alles ganz gut umsetzen.
http://php.net/manual/de/book.image.php
Mit getimagesize() kannst du zb Die Höhe und Breite holen und mit imagecopyresized das Bild verkleinern.
Ich glaub darüber gibts sogar etliche Tuts zum Thema Bildergalerie.

Grüsse Joe.
 
Ich habe es ähnlich umgesetzt, Im Moment siehts so aus:

PHP: 
$imagesize = getimagesize($thumb);
	
	$maxwidth = 240;
	$maxheight = 200;
	$width = $imagesize[0];
	$height = $imagesize[1];
		
     if( $height > $maxheight )
    { 
      $width = floor($width * $maxheight / $height); 
      $height = $maxheight; 
    } 
    if( $width > $maxwidth )
    {
      $height = floor($height * $maxwidth / $width);
      $width = $maxwidth;
    }
    
    // Innenabstand errechnen
    $left = floor(($maxwidth/2) - ($width/2));
    $top = floor (($maxheight/2) - ($height/2));

Das ganze übergebe ich an HTML und ich kriege das gewünschte Ergebnis. Darum geht es mir auch nicht.

Ich finde das recht umständlich nur um Bilder dynamisch mittig zu zentrieren. Vor allem wenn man mehrere Bilder hat die dann noch per Ajax dynamisch geladen werden.

Wenn ich das so löse gibt es zwei Möglichkeiten:
1. Ich ermittle in einer Schleife die Werte für width, height, top, left je Bild und schreibe sie in einen Array, denn ich dann auslese
2. Ich mache das ganze per Javascript dynamisch, wobei ich denke, dass diese Methode eine Verzögerung mit sich bringen wird.

Ich würde gerne wissen, ob man das auch ohne dieses ganze Tamtam lösen kann.
Vielleicht hat wer ja einen völlig anderen Ansatz.
 
CPoly hat gesagt.:
CSS: 
background-position:center center;

und hab die Thumbnails so skaliert, dass sie in das entsprechende Quadrat passen.
Zum Vergrößern anklicken....
Genau das habe ich mir auch grad gedacht.
Na und ne Schleife wäre ja auch immer begrenzt auf die Annzahl Bilder welche von den Grössen insgesamt her ins Bild passen.

Was genau meint eigentlich dynamisch?
 
Mit Background geht leider nicht wegen dem ajax carousel. Das braucht einen img Tag. Und das umzubauen würde viel mehr Arbeit verursachen.

Habe jetzt eigentlich ne ganz probate Lösung gefunden mit display: table-cell. Dooferweise will der im IE das nicht, obwohl der das eigentlich fressen müsste.
 
Manchmal muss ich echt sagen sind Tabellen die bessere Lösung. Mit table-cell gibts ja im IE Probleme und da ist es echt einfacher einfach eine Tabelle zu nutzen. Man kann sich zumindest die Abstandberechnung sparen.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück