Antworten auf deine Fragen:
Neues Thema erstellen

PHP - Skript welches Bilder aus einem Ordner ausliest in einen div-container setzen .

G

Gelöschtes Mitglied 63549

Guest

Hallo!

Vorab eine kurze Beschreibung des Vorhabens:

Der Verein bei dem ich tätig bin, bereitet für eine Gemeinde Kabel-TV auf. Einer dieser Sender strahlt eine Powerpoint Präsentation mit Informationen der Gemeinde aus. Nun wollen wir diesen "Infokanal" auch online zur Verfügung stellen.

Meine Idee ist es über eine PHP-Skript die JPG Dateien aus einem Ordner auszulesen und per Liste auszugeben. Danach noch Lightbox zur Anzeige eingebaut und fertig.

Jetzt habe ich angefangen vielleicht das ganze noch in eine übersictliche einfach Seite mit DIV's zu verpacken und da scheitere ich kläglich daran das Element <ul id="galerie"> in den <div id="content"> zu setzen.
Die Bilder werden zwar an die Breite von 700px die der <div id="container"> vorgibt zwar angepasst jedoch erst nach dem <div id="content"> angezeigt.

Link zur Testseite:

Anbei die Quellcodes der PHP-Datei und zugehöriger CSS Datei.
Vielleicht kann mir hier jemand weiterhelfen! Ich bin für die Hilfe sehr dankbar.

Besten Dank.

HTML:
<!--
----------------------------------------------------------------------
Online Version des Infokanal
Start: 08.11.2013
Letzte Aenderung: 08.11.2013
Autor: martin wieser - www.din-wiesel.at
Media: Screen
----------------------------------------------------------------------
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fersehgemeinschaft Breitenau a.H. - Infokanal</title>
<link href="css/screen.css" rel="stylesheet" type="text/css" />
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery-lightbox/js/jquery.lightbox-0.5.js"></script>
<link href="jquery-lightbox/css/jquery.lightbox-0.5.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function() {
	$('#galerie a').lightBox();
});
</script>
</head>

<body class="body">
<div id="container">
<div id="top-space"></div>
<div id="content">
<ul id="galerie">
<?php
$ordner = "images";
$allebilder = scandir($ordner);
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']."/".$bildinfo['basename'];?>">
        <img src="<?php echo $bildinfo['dirname']."/".$bildinfo['basename'];?>" width="140" alt="Vorschau" /></a> 
        <span><?php echo $bildinfo['filename']; ?> (<?php echo $size ; ?>kb)</span>
    </li>
<?php
	};
 };
?> 
</ul>
</div>
</div>
</body>
</html>

Die dazugehörige CSS

HTML:
@charset "utf-8";
/* 
----------------------------------------------------------------------
Online Version des Infokanal
Start: 08.11.2013
Letzte Aenderung: 08.11.2013
Autor: martin wieser - www.din-wiesel.at
Media: Screen
----------------------------------------------------------------------
*/

* {
	margin: 0;
	padding: 0;
}
body, html{
		min-height:101%; /*Scrollbar immer anzeigen*/
}
.body {
	background-color: #f7f1e3;
	margin: 25px 0 25px 0;
	padding: 0px;
	text-align: center;
}
#container {
	background-color: #FFFFFF;
	margin: 0 auto;
	width: 700px;
	text-align: center;
}
#top-space {
	height: 5px;
}
ul#galerie {
	padding:0;
	margin:0;
	list-style-type:none;
	font-family:Arial, Helvetica, sans-serif;
	background-color:#FFFFFF;
}
ul#galerie li{
	padding: 3px;
	background-color:#ebebeb;
	border:1px solid #CCC;
	float:left;
	margin:0 10px 10px 0;	
}
ul#galerie li:hover{
	border:1px solid #333;
}
ul#galerie li span{
	display:block;
	text-align:center;
	font-size:10px;
}
ul#galerie li a img{
		border:none;
}
 
Zuletzt bearbeitet von einem Moderator:

cebito

undefined

AW: PHP - Skript welches Bilder aus einem Ordner ausliest in einen div-container setz

So schwer zu sagen, hast du 'nen Link zu 'ner Testseite?
Schalt mal das Lightbox-Script aus und schau es dir dann mal an...
 
G

Gelöschtes Mitglied 63549

Guest

AW: PHP - Skript welches Bilder aus einem Ordner ausliest in einen div-container setz

Nachtrag - Link zur Testseite:
 

cebito

undefined

AW: PHP - Skript welches Bilder aus einem Ordner ausliest in einen div-container setz

Bei mir ist alles da drin wo es sein soll, aber dein Kommentar vor dem Doctype ist nicht valide.
Ansonsten kann ich dein "Problem" jetzt nicht nachvollziehen, da hier alles iO scheint.
 
G

Gelöschtes Mitglied 63549

Guest

AW: PHP - Skript welches Bilder aus einem Ordner ausliest in einen div-container setz

Bei mir bekomme ich dieses Ergebnis



Also über der ersten Bilderreihe die weiße Linie die ich aus dem <div id="top-space"></div> mit 5px definiert habe.

Irgendwie sollte ja auch der Hintergrund bei den Bildern #FFFFFF sein wie im <div id="container"> per CSS festgelegt oder?

Ich hab es auf Chrome, Firefox und Safari auf Win 7 getestet. Bei allen dreien das gleiche Ergebnis. Aktuell sind die Skripten ausgeklammert!

Könntest von dir einen Screenshot zeigen?
 

cebito

undefined

AW: PHP - Skript welches Bilder aus einem Ordner ausliest in einen div-container setz

Bei mir bekomme ich dieses Ergebnis

Ich auch, deshalb meine Verwirrung, denn ich hatte hier

jedoch erst nach dem <div id="content"> angezeigt.
verstanden das die erst dort ausgegeben werden. Es ist also ein CSS-Problem das sich mit richtigem clear lösen lässt...

Code:
ul#galerie:after{
   clear:both;
   display:block;
   content:'';
}
 
G

Gelöschtes Mitglied 63549

Guest

AW: PHP - Skript welches Bilder aus einem Ordner ausliest in einen div-container setz

Dankeschön!
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.635
Beiträge
1.538.474
Mitglieder
67.558
Neuestes Mitglied
StarsMan
Oben