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.
Die dazugehörige CSS
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:
