Fotogalerie

Hallo zusammen,

Ich will eine Fotogalerie die mehrere Zeilen hat erstellen.
Jetzt frage ich mich wie ich am besten vorgehe.
Oft habe ich Lösungen die auf einer Liste basieren gesehen.
Allerdings frage ich mich ob es Sinn macht, zwei Listen ineinander zu verschachteln.
Die andere Möglichkeit die ich sehe wäre eine klassische Tabelle.
Kann mir jemand sagen, welcher Ansatz schöner ist?

Gruss
Markus

Listen sind auch hier die beste Möglichkeit. Mit einer festen Breite im

    und floatende
  • 's kann man dann auch mehrzeilige Ausgaben erreichen.

Hallo,

wie mein Vorposter bin ich auch der Meinung das Listenelemente die bessere Umsetzung sind, zumal sich die Anzahl der horinzontal anzuzeigenden Bilder flexibel an den Viewport anpassen lässt ohne Scrollbalken. Tabellen sind da eher starr, da sie ja die Tabellenfelder vorgeben müssen, die horizontal angezeigt werden.

Allerdings frage ich mich ob es Sinn macht, zwei Listen ineinander zu verschachteln.

Warum muss man 2 Listen ineinander verschachteln?

Vermutlich eine Liste für die Zeilen und eine Liste (mit je 4 Einträgen oder so) für die „Spalten“, also die „Zellen“ einer Zeile. Das ist aber natürlich nicht so, wie Floats funktionieren.

Hallo zusammen,

Danke für euere Antworten.

Jetzt brauche ich aber erst recht etws Nachhilfe.

Von Selfhtml have ich folgenden Code entnommen:
[HTML]

  • Suchmaschinen
    • Google
    • AltaVista
    • Fireball
  • Verzeichnisse
    • Yahoo
    • Web.de
    • Dino-Online
  • Was anderes
  • Noch was anderes
[/HTML]

Ist dieser Ansatz falsch?

Vermutlich eine Liste für die Zeilen und eine Liste (mit je 4 Einträgen oder so) für die „Spalten“, also die „Zellen“ einer Zeile. Das ist aber natürlich nicht so, wie Floats funktionieren.

Ja genau. Das war eigentlich meine Idee.
Die Galerie soll mehrere Zeilen haben.
Wie ist den der Ansatz mit den Floats richtig?

Gruss
Markus

Wir reden aber über eine Bildergalerie, oder?
Weil dein Ansatz im code etwas anderes vermuten lässt, wofür erst recht keine Tabellen in Frage kommen.
Hier mal eine Bildergalerie:
http://www.2seb.de/images/bildergalerie_1.jpg

Meinste du sowas?

Ansonsten wäre es gut wenn du genau beschreiben würdest was du vor hast, sonst geht die Hilfe womöglich in die falsche Richtung.

Fürs float schreibst in dein Stylesheet li{float:left;} an passender Stelle,
das war`s schon.

Ja genau sowas will ich machen.
Wurde das über sechs Listen die gefloated wurden realisiert?
Oder wie ist hier das Vorgehen?

Gruss
Markus

Um bei deinem Beispiel zu bleiben:

[HTML]

  • alternativer Bildtext
  • alternativer Bildtext
  • alternativer Bildtext
  • alternativer Bildtext
  • alternativer Bildtext
  • alternativer Bildtext
  • alternativer Bildtext
  • alternativer Bildtext
  • alternativer Bildtext
  • alternativer Bildtext
  • alternativer Bildtext
  • alternativer Bildtext
  • alternativer Bildtext
  • alternativer Bildtext
  • alternativer Bildtext
  • alternativer Bildtext
  • alternativer Bildtext
  • alternativer Bildtext
  • alternativer Bildtext
  • alternativer Bildtext
  • alternativer Bildtext
  • alternativer Bildtext
  • alternativer Bildtext
  • alternativer Bildtext
  • alternativer Bildtext
  • alternativer Bildtext
  • alternativer Bildtext
  • alternativer Bildtext
  • alternativer Bildtext
  • alternativer Bildtext
  • alternativer Bildtext
  • alternativer Bildtext
  • alternativer Bildtext
  • alternativer Bildtext
  • alternativer Bildtext
  • alternativer Bildtext

[/HTML]

Hier wird dadurch das die Listenelemente nach links gefloatet werden automatisch eine Aneinanderreihung der Bilder erzeugt.
Die Stilangaben werden im CSS angegeben.
Für CSS und HTML bitte die Tutorials im Netz durchlesen.

Wenn man alle Listenelemente floaten und dabei Sechser-Reihen erzeugen will, dann muss man die Breite des Eltern-Divs so einstellen, dass nach jeweils sechs Bildern automatisch umbrochen wird. Das wäre aber unsauber.

Ich würde das HTML lieber in einer Foreach-Schleife ausgeben und als Tabelle formatieren. Sofern man die Bilder nummeriert, spart das sogar noch weitere Schreibarbeit.

Hast du den ganzen Thread gelesen? Sein Problem ist ja noch gar nicht ganz umschrieben, das mit den 6 Bildern pro Reihe war ein Beispiel, welches ich willkürlich rausgesucht habe um zu schauen was er meint. Ob er mit PHP umzugehen weiss ist noch ein anderes Kapitel.

Ich hatte mich auf den Screenshot bezogen. So eine Bilderausgabe gehört zu den Aufgaben, welche man tatsächlich mal mit einer Tabelle lösen kann; oder meinetwegen auch mit mehreren Listen.

Mag ja sein, dass es nach deiner Beschreibung funktioniert, aber da ich täglich mit Cross-Browser-Kompatibilität zu tun habe, versuche ich potenziellen Problemen immer aus dem Weg zu gehen.

Potenziellen Problemen wie schmalen Viewports?

inline-block:

[html]

<head>
    <meta charset="utf-8" />
    <title>New</title>
    <style type="text/css">

        * {
            margin: 0;
            padding: 0;
        }

        .gallery {
            list-style: none;
        }

        .gallery li {
            width: 200px;
            border: 1px solid #ccc;
            padding: 5px;
            margin: 10px;
            text-align: center;
            display: inline-block;
        }

        .gallery li img {
            max-width: 200px;
            max-height: 200px;
            vertical-align: middle;
        }

    </style>
</head>

<body>

    <ul class="gallery">
        <li><img src="http://upload.wikimedia.org/wikipedia/commons/e/e1/Jean-Baptiste-Camille_Corot_006.jpg" alt="JBC Corot" /></li>
        <li><img src="http://upload.wikimedia.org/wikipedia/commons/3/3a/Jean-Baptiste-Camille_Corot_007.jpg" alt="JBC Corot" /></li>
        <li><img src="http://upload.wikimedia.org/wikipedia/commons/c/c9/Jean-Baptiste-Camille_Corot_040.jpg" alt="JBC Corot" /></li>
        <li><img src="http://upload.wikimedia.org/wikipedia/commons/6/67/Jean-Baptiste-Camille_Corot_041.jpg" alt="JBC Corot" /></li>
        <li><img src="http://upload.wikimedia.org/wikipedia/commons/a/aa/Jean-Baptiste-Camille_Corot_016.jpg" alt="JBC Corot" /></li>
        <li><img src="http://upload.wikimedia.org/wikipedia/commons/7/79/Jean-Baptiste-Camille_Corot_024.jpg" alt="JBC Corot" /></li>

        <li><img src="http://upload.wikimedia.org/wikipedia/commons/c/c2/Jean-Baptiste-Camille_Corot_021.jpg" alt="JBC Corot" /></li>
        <li><img src="http://upload.wikimedia.org/wikipedia/commons/e/e9/Camile_Corot_Chartres.jpg" alt="JBC Corot" /></li>
        <li><img src="http://upload.wikimedia.org/wikipedia/commons/1/18/Jean-Baptiste-Camille_Corot_049.jpg" alt="JBC Corot" /></li>
        <li><img src="http://upload.wikimedia.org/wikipedia/commons/c/c2/Jean-Baptiste-Camille_Corot_022.jpg" alt="JBC Corot" /></li>
        <li><img src="http://upload.wikimedia.org/wikipedia/commons/8/8f/Jean-Baptiste-Camille_Corot_036.jpg" alt="JBC Corot" /></li>
        <li><img src="http://upload.wikimedia.org/wikipedia/commons/0/08/Jean-Baptiste-Camille_Corot_044.jpg" alt="JBC Corot" /></li>
        <li><img src="http://upload.wikimedia.org/wikipedia/commons/1/1f/View_of_Genoa_%28Camille_Corot%29.jpg" alt="JBC Corot" /></li>
        <li><img src="http://upload.wikimedia.org/wikipedia/commons/9/95/Jean-Baptiste-Camille_Corot_019.jpg" alt="JBC Corot" /></li>
        <li><img src="http://upload.wikimedia.org/wikipedia/commons/6/6b/Venise%2C_La_Piazetta_%28Camille_Corot%29.jpg" alt="JBC Corot" /></li>

    </ul>

</body>
[/html]

float:

[html]

<head>
    <meta charset="utf-8" />
    <title>New</title>
    <style type="text/css">

        * {
            margin: 0;
            padding: 0;
        }

        .gallery {
            list-style: none;
        }

        .gallery li {
            width: 200px;
            height: 200px;
            line-height: 200px;
            border: 1px solid #ccc;
            padding: 5px;
            margin: 10px;
            text-align: center;
            float: left;
        }

        .gallery li img {
            max-width: 200px;
            max-height: 200px;
            vertical-align: middle;
        }

    </style>
</head>

<body>

    <ul class="gallery">
        <li><img src="http://upload.wikimedia.org/wikipedia/commons/e/e1/Jean-Baptiste-Camille_Corot_006.jpg" alt="JBC Corot" /></li>
        <li><img src="http://upload.wikimedia.org/wikipedia/commons/3/3a/Jean-Baptiste-Camille_Corot_007.jpg" alt="JBC Corot" /></li>
        <li><img src="http://upload.wikimedia.org/wikipedia/commons/c/c9/Jean-Baptiste-Camille_Corot_040.jpg" alt="JBC Corot" /></li>
        <li><img src="http://upload.wikimedia.org/wikipedia/commons/6/67/Jean-Baptiste-Camille_Corot_041.jpg" alt="JBC Corot" /></li>
        <li><img src="http://upload.wikimedia.org/wikipedia/commons/a/aa/Jean-Baptiste-Camille_Corot_016.jpg" alt="JBC Corot" /></li>
        <li><img src="http://upload.wikimedia.org/wikipedia/commons/7/79/Jean-Baptiste-Camille_Corot_024.jpg" alt="JBC Corot" /></li>

        <li><img src="http://upload.wikimedia.org/wikipedia/commons/c/c2/Jean-Baptiste-Camille_Corot_021.jpg" alt="JBC Corot" /></li>
        <li><img src="http://upload.wikimedia.org/wikipedia/commons/e/e9/Camile_Corot_Chartres.jpg" alt="JBC Corot" /></li>
        <li><img src="http://upload.wikimedia.org/wikipedia/commons/1/18/Jean-Baptiste-Camille_Corot_049.jpg" alt="JBC Corot" /></li>
        <li><img src="http://upload.wikimedia.org/wikipedia/commons/c/c2/Jean-Baptiste-Camille_Corot_022.jpg" alt="JBC Corot" /></li>
        <li><img src="http://upload.wikimedia.org/wikipedia/commons/8/8f/Jean-Baptiste-Camille_Corot_036.jpg" alt="JBC Corot" /></li>
        <li><img src="http://upload.wikimedia.org/wikipedia/commons/0/08/Jean-Baptiste-Camille_Corot_044.jpg" alt="JBC Corot" /></li>
        <li><img src="http://upload.wikimedia.org/wikipedia/commons/1/1f/View_of_Genoa_%28Camille_Corot%29.jpg" alt="JBC Corot" /></li>
        <li><img src="http://upload.wikimedia.org/wikipedia/commons/9/95/Jean-Baptiste-Camille_Corot_019.jpg" alt="JBC Corot" /></li>
        <li><img src="http://upload.wikimedia.org/wikipedia/commons/6/6b/Venise%2C_La_Piazetta_%28Camille_Corot%29.jpg" alt="JBC Corot" /></li>

    </ul>

</body>
[/html]

(Code-Darstellung mogelt mir da eine Leerzeile rein. Hoffe, das sind alle Änderungen.)

PHP:

[php]<?php

$images = <<<EOT
http://upload.wikimedia.org/wikipedia/commons/e/e1/Jean-Baptiste-Camille_Corot_006.jpg
http://upload.wikimedia.org/wikipedia/commons/3/3a/Jean-Baptiste-Camille_Corot_007.jpg
http://upload.wikimedia.org/wikipedia/commons/c/c9/Jean-Baptiste-Camille_Corot_040.jpg
http://upload.wikimedia.org/wikipedia/commons/6/67/Jean-Baptiste-Camille_Corot_041.jpg
http://upload.wikimedia.org/wikipedia/commons/a/aa/Jean-Baptiste-Camille_Corot_016.jpg
http://upload.wikimedia.org/wikipedia/commons/7/79/Jean-Baptiste-Camille_Corot_024.jpg
http://upload.wikimedia.org/wikipedia/commons/c/c2/Jean-Baptiste-Camille_Corot_021.jpg
http://upload.wikimedia.org/wikipedia/commons/e/e9/Camile_Corot_Chartres.jpg
http://upload.wikimedia.org/wikipedia/commons/1/18/Jean-Baptiste-Camille_Corot_049.jpg
http://upload.wikimedia.org/wikipedia/commons/c/c2/Jean-Baptiste-Camille_Corot_022.jpg
http://upload.wikimedia.org/wikipedia/commons/8/8f/Jean-Baptiste-Camille_Corot_036.jpg
http://upload.wikimedia.org/wikipedia/commons/0/08/Jean-Baptiste-Camille_Corot_044.jpg
http://upload.wikimedia.org/wikipedia/commons/1/1f/View_of_Genoa_(Camille_Corot).jpg
http://upload.wikimedia.org/wikipedia/commons/9/95/Jean-Baptiste-Camille_Corot_019.jpg
http://upload.wikimedia.org/wikipedia/commons/6/6b/Venise%2C_La_Piazetta_(Camille_Corot).jpg
EOT;

$images = explode(„\n“, $images);

?>

<head>
    <meta charset="utf-8" />
    <title>New</title>
    <style type="text/css">

        * {
            margin: 0;
            padding: 0;
        }

        .gallery {
            list-style: none;
        }

        .gallery li {
            width: 200px;
            height: 200px;
            line-height: 200px;
            border: 1px solid #ccc;
            padding: 5px;
            margin: 10px;
            text-align: center;
            float: left;
        }

        .gallery li img {
            max-width: 200px;
            max-height: 200px;
            vertical-align: middle;
        }

    </style>
</head>

<body>

    <ul class="gallery">
<?php foreach ($images as $image) : ?>
        <li><img src="<?php echo $image; ?>" alt="JBC Corot" /></li>
<?php endforeach; ?>
    </ul>

</body>
[/php]

Danke @mermshaus,

Ich glaube ich kann es mir so langsahm vorstellen.
Also dein Beispiel passt sich dem Browserfenster an.
Ich will jetzt aber erreichen, dass z.B. 5 x 6 Bilder fix dargestellt werden
die nicht auf eine Veränderung des Browserfensters reagieren.
Kann ich das ganze in eine Div Box setzten und dem Div eine fixe Höhe und
Weite zuweisen?

Gruss
Markus

Kann ich das ganze in eine Div Box setzten und dem Div eine fixe Höhe und
Weite zuweisen?

Ja das geht selbstverständlich. Wie sieht´s bei dir denn mit deinen Kenntnissen aus in Sachen HTML und CSS, meinst du, du bekommst das hin?

Ich will jetzt aber erreichen, dass z.B. 5 x 6 Bilder fix dargestellt werden
die nicht auf eine Veränderung des Browserfensters reagieren.

Ich finde eine fixe Galerie ja nicht so doll, da bei breitem Browserfenster viel Platz verschwendet wird wo Bilder dargestellt werden und man dann dennoch nach unten scrollen muss und wenn das Fenster klein ist, wie bei Smartphones zum Beispiel man immerzu horinzontal wie auch vertikal scrollen muss. Also eigentlich nur Nachteile und extrem Benutzerunfreundlich.
Warum willst du es denn dennoch fix haben?

[html]

body{ background-color: rgb(200,200,200); } div.galerie div{ float:left; margin: 10px; padding:10px; border: 1px solid black; background-color:white; }
alternativer Text
[/html]

Sofern du die Bilder aufsteigend nummerierst (jean-baptiste_1.jpg, jean-baptiste_2.jpg, …), lässt sich das HTML noch verkürzen.

[HTML]

Fotogalerie
    <?php for ($i = 1; $i < 37; $i++) { echo '
  • <a href="#"jean baptiste
  • '; }; ?>
[/HTML]

Ja, schon, aber da büßt du meines Erachtens Flexibilität ein.

Was ist, wenn ein Bild nachträglich entfernt werden muss? Dann entsteht eine Lücke in der Nummerierung oder alle nachfolgenden Bilder müssen neu indiziert werden, was eventuell Verlinkungen oder mit dem Bildnamen verknüpfte Daten zerstört.

Was ist, wenn die Bilder etwa chronologisch sortiert werden sollen, aber zu einem späteren Zeitpunkt Bilder hinzugefügt werden, die weiter vorne einzuordnen sind?

Das ist aber auch eine Frage des generellen Designs der Software. Wenn der Ausgabe-Code nur einmal vorkommt und die oben erwähnten Fälle nicht relevant sind, wird nicht unbedingt eine flexible Lösung für die Generierung benötigt. Der Vorteil einer flexiblen Lösung ist es hingegen, dass der Ausgabe-Code an verschiedenen Stellen eingebunden werden könnte, wenn er als eine Art Schnittstelle angelegt wird, an die eine Liste von Bild-URLs übergeben wird.

Aber gut, das sind Punkte, die vermutlich für den konkreten Fall hier nicht übermäßig relevant sind.