Mysteriöse Lücke beim Einlesen von Bildern

elessar · 17.01.2013

Hi,

ich hab ein kleines Problem.

Und zwar möchte ich Bilder aus einem Ordner in ein Dokument einlesen, funktioniert auch soweit super.

Aber ich hab einen merkwürdigen Darstellungsfehler, der sich mir nicht erschließt. Ich weiß nicht wo die Ursache dieses Fehlers liegt.

Kann mir jemand bei dem Problem helfen?

Der Quellcode:

Code:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Unbenanntes Dokument</title>

<style type="text/css">
#main {
    width: 500px;
}

#galerie {
    padding:0;
    margin:0;
    list-style-type:none;
    font-family:Arial, Helvetica, sans-serif;
}
.bild{
    padding: 3px;
    background-color:#ebebeb;
    border:1px solid #CCC;
    float: left;
    margin:0 10px 10px 0;
}

ul#galerie li span{
    display:block;
    text-align:center;
    font-size:10px;
}
ul#galerie li a img{
        border:none;
}
</style>
</head>

<body>
<div id="main">
<div id="galerie">

<?php
$ordner = "bilder";
 
$allebilder = scandir($ordner); // Sortierung A-Z
 
foreach ($allebilder as $bild) {
    $bildinfo = pathinfo($ordner."/".$bild);
    $size = ceil(filesize($ordner."/".$bild)/1024);
 
    if ($bild != "." && $bild != ".."  && $bild != "_notes" && $bildinfo['basename'] != "Thumbs.db") {
    ?>
    <div class="bild">
        <a href="<?php echo $bildinfo['dirname']."/".$bildinfo['basename'];?>">
        <img src="<?php echo $bildinfo['dirname']."/".$bildinfo['basename'];?>" width="140" alt="Vorschau" /></a>
        <span><br><?php echo $bildinfo['filename']; ?></span>
    </div>
<?php
    };
 };
?>
</div>
</div>
</body>
</html>

P.S. nciht durch die ul/li-Styleangaben Irritieren lassen, das sind noch Überbleibsel eines Testes

Myhar · 17.01.2013

AW: Mysteriöse Lücke beim Einlesen von Bildern

Ich lasse mich nicht von deinem UL Styles irritieren, aber es schaut aus, als ob du es zuerst auf die korrekte Weise versucht hast und jetzt, da es nicht funktioniert hat, auf divs umgestiegen bist. Was ich mit diesem komplizierten Satz sagen will: Stelle deine Liste von Bildern wieder auf eine Liste (ul) um.
Des Weiteren solltest du deine Vorschaubilder auch wirklich als Vorschaubilder einbinden und nicht die Originalbilder einfach verkleinert darstellen. Daher kommt nämlich dein sonderbares Verhalten: Manche Bilder dürften beim skalieren in der Höhe um ein paar Pixel anders sein als andere, deshalb die Lücken. Es würde reichen, bei deinen Bildern eine Höhe anzugeben, aber ich hoffe, du schreibst die Galerie ordentlich.
Auch ein alt-Text, welcher bei allen Bildern lediglich "Vorschau" lautet ist nicht hilfreich. Vorschau wovon? "Vorschau Tiger im Zoo" ist zB besser.
Auch dein <br> im Span ist unnötig, wenn du deinen gefloateten Listenelementen eine fixe Breite zuweist. Dann wird der Text automatisch unter deinem Bild stehen.

HTML:

<ul>
  <li> <a href="" ><img src="" height="" width="" alt="Hier nicht nur Vorschau!" /> Weiterer Text </li>
</ul>

ul li{float:left;width:140px}

elessar · 17.01.2013

AW: Mysteriöse Lücke beim Einlesen von Bildern

hi,

wegen den thumbs schau ich dann mal, wie sich das umsetzen lässt.

in divs hatte ich das gesetzt, weil später mit jquery noch eine drag&drop vorhanden sein soll. Nicht meine Idee, sondern die meine Dozenten -.-" der unbedingt sowas rein haben möchte.

das ist halt auch noch langen icht fertig. Es ging nur um das automatische Einlesen der Bilder und der entstandenen lücke, die ich ja auch bei ul hatte,.. aber mit der höhe der Bilder ergibt Sinn. Werde daher mal nach einer Lösung schauen wegen dne Vorschaubildern.

Myhar · 17.01.2013

AW: Mysteriöse Lücke beim Einlesen von Bildern

Drag&Drop mittels jQuery lässt sich wunderbar mit Listen umsetzen. Ich habe selbst einmal so eine drag-drop Funktionalität mittels jQueryUI dragg- und droppable umgesetzt. Das ist also keine Entschuldigung, divs zu verwenden

Aber ich weiß, wie es im Studium ist... Man möchte schnell fertig werden und wenn es nun mal funktioniert... ist mir auch oft genug so gegangen *g*

elessar · 17.01.2013

AW: Mysteriöse Lücke beim Einlesen von Bildern

:rolleyes:

erwischt,...

das muss Montag abgegeben werden und es ist ja nicht so dass ich noch eine Wordpress- und Typo3 Seite machen muss + diverse Prüfungen nächste Woche :muede: Daher,.. Hauptsache ich kann was funktionsfähiges vorweisen

Wenn ich sie später tatsächlich nutzen möchte, würde ich natürlich mehr "Liebe" und Zeit reinstecken

Mein Dozent ist da zum Glück nicht so penibel

Werds aber auch mal mit den Listen und dem JQuery ausprobieren, kannte es bisher nur mit Divs, aber danke für den Tipp.

Da ich für die Gallerie auch nur diese Bilder als Beispiel verwenden möchte, hab ich das Problem nun mit einer festen Höhe gelöst und sieht wesentlich besser aus. Für die angefordeten Zwecke reicht das vollkommen aus. Vielen Dank jedenfalls für den Hinweis, wäre ich nie drauf gekommen, dass da unterschiedliche Bildgröße bei sein könnten, die die Darstellung zerrissen haben.

elessar · 18.01.2013

AW: Mysteriöse Lücke beim Einlesen von Bildern

Ich nutz noch mal mein altes Thema für ein anderes Problem der Galerie,.. -.-"

Und zwar schaut es aktuell so aus:

nun würd ich gern wissen, wie ich das mit der Lightbox am besten hinbekomme,.. vermutlich hab ich da im PHP nur einen kleinen logischen Fehler, der sich mir aufgrund der Betriebsblindheit nicht erschließt -.-" Denn er zeigt akktuell beim Anklicken eines Bildes immer nur das letzte in der Vorschau an.

Code:

<body>
<div id="main">
    <ul id="galerie">
    
    <?php
    $ordner = "bilder";
     
    $allebilder = scandir($ordner); // Sortierung A-Z
     
    foreach ($allebilder as $bild) {
        $bildinfo = pathinfo($ordner."/".$bild);
        $size = ceil(filesize($ordner."/".$bild)/1024);
     
        if ($bild != "." && $bild != ".."  && $bild != "_notes" && $bildinfo['basename'] != "Thumbs.db") {
        ?>
        <li>
            <a href="#<?php echo $bildinfo['dirname'];?>">
            <div class="bild"><img src="<?php echo $bildinfo['dirname']."/".$bildinfo['basename'];?>" height="180" alt="Vorschau" /></div></a>
            <span class="bildtitel"><?php echo $bildinfo['filename']; ?></span>
        </li>
    <?php
        };
     };
    ?>
    </ul>
        <ul class="lightbox">
    
        <li id="<?php echo $bildinfo['dirname'];?>">
            <a href="#start">
            <img src="<?php echo $bildinfo['dirname']."/".$bildinfo['basename'];?>" alt="Vorschau" /></a>
            
        </li>
 
    </ul>
</div>

vermutlich liegt es daran, dass er in der Zwischenzeit wieder vergisst, wass der Dateiname des auszuwählenden Bildes war.

Da es bei dem automatischen Laden der Bilder bleiben soll, weil ich nciht wie ich das nun am besten umsetzen kann,..

Achja,.. Jquery sollen wir nun doch nciht benutzen,... sondern rein CSS *seufz*

Duddle · 18.01.2013

AW: Mysteriöse Lücke beim Einlesen von Bildern

Ist JS komplett verboten?

Falls ja ist das erstmal ein HTML/CSS-Problem und ist in diesem Unterforum falsch augehoben. Mach das erstmal statisch mit zwei Bildern (entweder schaust du dir vorhandene Lösungen an, oder du nimmst deine bisherige und erzeugst das notwendige CSS und die Links dynamisch), dann kannst du ja immer noch abstrahieren und in PHP schreiben.

Falls JS an sich okay ist, musst du ja nur beim Klick auf ein Bild dessen Zielbild holen und in das lightbox-<li> schreiben.

Duddle

elessar · 18.01.2013

AW: Mysteriöse Lücke beim Einlesen von Bildern

Also würde sich das mit PHP so gar nicht lösen lassen?

ich hab ja das Beispiel mit der Lightbox von einer anderen Seite, aber dort wurde halt mit festen IDs gearbeitet und nciht mit dynamisch erzeugten.

Duddle · 18.01.2013

AW: Mysteriöse Lücke beim Einlesen von Bildern

Das Grundproblem hat mit PHP nichts zu tun. PHP arbeitet serverseitig. Der Nutzer sieht nur das Ergebnis, als läge es so auf dem Server.

Wie gesagt kannst du das derzeitige Prinzip abstrahieren/verallgemeinern, es dann in Code ausdrücken und erzeugen lassen. Dann ist eine serverseitige Sprache nützlich.

Duddle

elessar · 18.01.2013

AW: Mysteriöse Lücke beim Einlesen von Bildern

hm.. so ganz versteh ich das nun nicht.

ich hatte es ja erst vereinfacht usw. und dann Stück für Stück mit php halt erweitert und finde halt den Fehler aktuell nicht.

In JS müsste ich nun nachlesen wie ich dam besten den aktuellen Dateipfad rauslese und an anderer Stelle wiede ausgebe. Bin leider was JS angeht nicht so bewandert,..

Zum Haare raufen diese Aufgabe,... -.-"

Naja, danke schon mal für deine Antwort.

Duddle · 18.01.2013

AW: Mysteriöse Lücke beim Einlesen von Bildern

Schritt 1: verstehe, wie dein derzeitiges Beispiel funktioniert und warum die Lightbox so angezeigt wird wie sie es wird.

Schritt 2: isoliere die notwendigen Bestandteile, um eindeutig den Wolf anzuzeigen.

Schritt 3: schreib statisch für zwei Bilder, wie diese Bausteine für diese zwei Bilder aussehen würden.

Falls danach die Lighbox für beide Bilder individuell funktioniert, wendest du dich PHP zu mit
Schritt 4: nimm die sich unterscheidenden Teile in den zwei Bildern und behandel diese als Variablen. Alles andere ist statisch und kann einfach pro eingelesenem Bild ausgegeben werden.

Duddle