Homepage » PHP & MySQL » Scripts » Fotoalbum
| Info | ||||
| Door: | Peck | Moeilijkheidsgraad: |  | |
| Geplaatst op: | 27-02-2007 | Reacties: | 0 | |
| Views: | 219521 | Log in om zelf te reageren | ||
| Laatste keer aangepast op 17-05-2008 door Peck | Waardering: | |||
Uitleg
Dit is een fotoalbum dat ik gisteren en eergisteren ineen gestoken heb. Het is redelijk eenvoudig.
Alles wat je moet veranderen om het goed te kunnen laten werken staat in het script vermeld helemaal bovenaan.
In het css-file kan je de achtergrond en nog enkele andere opmaak elementen wijzigen.
// EDIT
Er waren blijkbaar heel wat gevallen waarbij het script niet werkte, daarom heb ik het grotendeels herschreven, en daar ik nu moderator ben, heb ik het eindelijk kunnen veranderen. :)
Script
//===========foto.css
BODY {
background-color: #d3d3d3;
font-family: Tahoma
}
a:visited {
color: black;
text-decoration: none;
}
a:link {
color: black;
text-decoration: none;
}
a:hover {
color: gray;
text-decoration: underline;
}
a:active {
color: black;
text-decoration: underline;
}
.image {
border: 1px solid black;
cursor: pointer;
}
.image:hover {
border: 1px solid white;
cursor: pointer;
}
.this_image {
border: 3px outset black;
cursor: default;
}
div#mainlayer {
margin: 0 auto;
text-align: center;
font-size: 14px;
}
.hidden {
visibility: hidden;
font-size: 14px;
margin: 2px;
}
.image2 {
border: 1px solid black;
}
.image2:hover {
border: 1px solid white;
}
.overzicht {
margin-left: 5px;
font-size: 13px;
}
h2.title {
text-align: center;
margin: 5px;
}
//============ foto.php
<?php
/**
*
* Script gemaakt door Jens Peeters
*
*/
// Deze variabelen moet je naar eigen wensen veranderen
$dirname = "fotos/"; // map waarin de afbeeldingen staan
$dir_thumbs = "fotos/thumbs/"; // map waarin de thumbnails zitten
$afbeeldingenperrij = "4"; // aantal afbeeldingen per rij
$aantalrijen = "4"; // aantal rijen per pagina
$breedte_thumbnail = "100"; // breedte van de thumbnails
$hoogte_thumbnail = "100"; // hoogte van de thumbnails
$showtitle = "yes"; // wil je bovenaan een titel weergeven? ("yes" of "no")
$albumnaam = "Fotoalbum"; // titel die bovenaan weergegeven wordt
// de huidige locatie op de server vaststellen
$php_self = explode("/",$_SERVER['PHP_SELF']);
if (is_array($php_self))
{
$php_self = urlencode($php_self[count($php_self)-1]);
}
else
{
$php_self = urlencode($php_self);
}
// toegelaten extensies
$ext = "jpg gif png bmp wbmp pjpeg jpeg";
if (!@opendir($dirname) || !@opendir($dir_thumbs))
{
echo "Kan de map met foto's of de map met thumbnails niet openen";
exit;
}
$time_start = microtime(true);
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Fotoalbum</title>
<link rel="stylesheet" type="text/css" href="foto.css">
<script language="javascript" type="text/javascript">
function check_images() {
for(i=0;i<document.images.length;i++) {
var maxWidth = 800;
if(document.images[i].width > maxWidth){
var origWidth = document.images[i].width;
var origHeight = document.images[i].height;
document.images[i].width = maxWidth;
document.images[i].height = origHeight/(origWidth/maxWidth);
}
}
}
setInterval(check_images,1000);
</script>
</head>
<body>
<?php
/*
Functie om te controleren of de opgegeven pagina wel bestaat.
*/
function pageExists($pagenr)
{
global $aantalpaginas;
if ($pagenr <= $aantalpaginas && $pagenr > 0)
{
return true;
}
else
{
return false;
}
}
/*
Functie die het aantal fotobestanden in een map telt.
*/
function countPhotos($dirname)
{
global $ext;
$ext2 = $ext;
$open = @opendir($dirname);
$aantalfotos = 0;
$ext2 = explode(" ",$ext2);
while (false !== ($file = @readdir($open)))
{
$pathinfo = pathinfo($file);
if (in_array(strtolower($pathinfo["extension"]), $ext2))
{
$aantalfotos++;
}
}
@closedir($open);
return $aantalfotos;
}
function generateArrDir($dir)
{
global $ext;
$ext2 = $ext;
$handle = @opendir($dir);
$files = array();
$ext2 = explode(" ",$ext2);
if ($handle)
{
while (false !== ($file = @readdir($handle)))
{
$ext = explode(".",$file);
$ext = $ext[count($ext)-1];
if (in_array(strtolower($ext),$ext2))
{
$files[] = $file;
}
}
@closedir($handle);
return $files;
}
else
{
return false;
}
}
/*
Functie die thumbnails (=kleine foto's) maakt en ze dan in de thumbnailmap opslaat
*/
function thumbnail($map,$thumblocatie,$bestandsnaam,$breedte,$hoogte)
{
$breedte2 = $breedte;
$hoogte2 = $hoogte;
list($breedte_origineel, $hoogte_origineel, $type) = getimagesize($map.$bestandsnaam);
if (($breedte_origineel < $hoogte_origineel) && ($breedte > $hoogte))
{
$breedte = ($hoogte / $hoogte_origineel) * $breedte_origineel;
}
else
{
$hoogte = ($breedte / $breedte_origineel) * $hoogte_origineel;
}
$afbeelding = imagecreatetruecolor($breedte, $hoogte);
// eerst controleren of de foto wel verkleind moet worden
if ($breedte_origineel > $breedte2 || $hoogte_origineel > $hoogte2)
{
switch ($type)
{
case 1:
//gif
$afbeelding_origineel = imagecreatefromgif($map.$bestandsnaam);
imagecopyresampled($afbeelding, $afbeelding_origineel, 0, 0, 0, 0, $breedte, $hoogte, $breedte_origineel, $hoogte_origineel);
imagegif($afbeelding, $thumblocatie.$bestandsnaam);
break;
case 2:
//jpg
$afbeelding_origineel = imagecreatefromjpeg($map.$bestandsnaam);
imagecopyresampled($afbeelding, $afbeelding_origineel, 0, 0, 0, 0, $breedte, $hoogte, $breedte_origineel, $hoogte_origineel);
imagejpeg($afbeelding, $thumblocatie.$bestandsnaam,80);
break;
case 3:
//png
$afbeelding_origineel = imagecreatefrompng($map.$bestandsnaam);
imagecopyresampled($afbeelding, $afbeelding_origineel, 0, 0, 0, 0, $breedte, $hoogte, $breedte_origineel, $hoogte_origineel);
imagepng($afbeelding, $thumblocatie.$bestandsnaam);
break;
}
}
// anders kopiëren we de foto gewoon naar de thumbsmap
else
{
@copy($map.$bestandsnaam,$thumblocatie.$bestandsnaam);
}
return true;
}
/*-----------------------------------------------------
Hieronder dient niets meer veranderd te worden
-------------------------------------------------------*/
$fotosperpagina = $afbeeldingenperrij * $aantalrijen;
$aantalfotos = countPhotos($dirname);
$aantalpaginas = ceil($aantalfotos / $fotosperpagina);
// fotomap openen
$open = @opendir($dirname);
// als er geen actie is opgegeven
if (empty($_GET['action']))
{
$photos = generateArrDir($dirname);
$page = $_GET['page'];
// opgegeven paginanummer controleren
if (!is_numeric($page) || !pageExists($page))
{
$page = "1";
}
else
{
$page = $page;
}
$photos = array_chunk($photos,$fotosperpagina,true);
$photos = $photos[$page-1];
$vorige = $page-1;
$volgende = $page+1;
echo "<table style=\"width: 100%;\">";
// titel bovenaan weergeven indien zo ingesteld
if ($showtitle == "yes")
{
echo "<tr>";
echo "<td colspan=\"2\">";
echo "<h2 class=\"title\">" . $albumnaam . "</h2>\n";
echo "</td>";
echo "</tr>";
}
echo "<tr>";
if (is_array($photos))
{
echo "<td style=\"width: 170px; vertical-align: top;\">";
echo "<div class=\"overzicht\">";
// enkele statistieke meegeven
echo "Totaal aantal foto's: ".$aantalfotos;
echo "\n<br>\n";
echo "Aantal pagina's: ".$aantalpaginas;
echo "\n<br>\n";
echo "Aantal foto's per pagina: ".$fotosperpagina;
echo "\n<br>\n";
echo "Ga naar pagina: \n<br>\n<br>\n";
echo "<form method=\"get\" action=\"" . $php_self . "\">\n";
echo "<select name=\"page\" onchange=\"this.form.submit()\" style=\"width: 70px;\">\n";
for ($k = 1; $k <= $aantalpaginas; $k++)
{
if ($k == $page)
{
echo "<option value=\"" . $k . "\" selected=\"selected\">" . $k . "</option>\n";
}
else
{
echo "<option value=\"" . $k . "\">" . $k . "</option>\n";
}
}
echo "</select>\n";
echo "</form>\n";
echo "</div>";
echo "</td>";
echo "<td style=\"vertical-align: top;\">";
echo "<div id=\"mainlayer\">\n";
// kijken of er een "vorige" knop nodig is
if (pageExists($vorige))
{
echo "<a href=\"" . $php_self . "?page=".$vorige."\"><< Vorige</a>\n";
}
else
{
echo "<span class=\"hidden\">Vorige >></span>";
}
echo " \n";
// kijken of er een "volgende" knop nodig is
if (pageExists($volgende))
{
echo "<a href=\"" . $php_self . "?page=".$volgende."\">Volgende>> </a>\n";
}
else
{
echo "<span class=\"hidden\">Volgende >></span>";
}
echo "<br>\n<br>\n";
$inrij = 0;
foreach ($photos as $id => $photo)
{
if (!file_exists($dir_thumbs . $photo))
{
// ... dan maken we die aan
thumbnail($dirname,$dir_thumbs,$photo,$breedte_thumbnail,$hoogte_thumbnail);
}
echo "<img src=\"" . $dir_thumbs . $photo . "\" alt=\"" . $photo . "\" onclick=\"location.href='" . $php_self . "?action=photo&id=".$id."'\" class=\"image\">\n";
$inrij++;
// als de foto de laatste van de rij is, breken we de rij af om terug aan de kant te beginnen
if ($inrij == $afbeeldingenperrij)
{
echo "<br>\n";
// $inrij op 0 zetten
$inrij = "0";
}
}
echo "</div>\n";
}
else
{
echo "<td>Geen foto's aanwezig";
}
echo "<td>";
echo "</tr>";
echo "<tr>";
echo "</table>";
}
// als er op een foto geklikt wordt willen we dat deze foto in het groot wordt weergegeven
elseif ($_GET['action'] == "photo" && isset($_GET['id']) && is_numeric($_GET['id']))
{
$volgende = $_GET['id']+1;
$vorige = $_GET['id']-1;
$photoid = $_GET['id'];
$page1 = $_GET['id'] + 1;
$page = $page1 / $fotosperpagina;
$page = ceil($page);
$photos = generateArrDir($dirname);
echo "<div id=\"mainlayer\">\n";
// begin navigatie bovenaan...
if (file_exists($dir_thumbs . $photos[$photoid-1]) && in_array($photos[$photoid-1],$photos))
{
echo "<a href=\"" . $php_self . "?action=photo&id=".$vorige."\"><< Vorige</a>\n";
}
else
{
echo "<span class=\"hidden\">Vorige >></span>";
}
echo " \n";
if (file_exists($dir_thumbs . $photos[$photoid+1]) && in_array($photos[$photoid+1],$photos))
{
echo "<a href=\"" . $php_self . "?action=photo&id=".$volgende."\">Volgende >></a>\n";
}
else
{
echo "<span class=\"hidden\">Volgende >></span>";
}
echo "<br>\n";
echo "<br>\n";
// ... einde navigatie bovenaan
//begin foto...
if (file_exists($dir_thumbs . $photos[$volgende]) && in_array($photos[$volgende],$photos))
{
echo "<img src=\"" . $dirname . $photos[$photoid] . "\" alt=\"" . $photos[$photoid] . "\" onclick=\"location.href='" . $php_self . "?action=photo&id=" . $volgende . "'\" class=\"image\">\n";
}
else
{
echo "<img src=\"" . $dirname . $photos[$photoid] . "\" alt=\"" . $photos[$photoid] . "\" class=\"image2\">\n";
}
echo "<br>\n";
echo "<br>\n";
// ... einde foto
// begin thumbnailsbalk....
if (file_exists($dir_thumbs . $photos[$photoid-2]) && in_array($photos[$photoid-2],$photos))
{
$location = $photoid - 2;
echo "<img src=\"" . $dir_thumbs . $photos[$photoid-2] . "\" class=\"image\" alt=\"" . $photos[$photoid-2] . "\" onclick=\"location.href='" . $php_self . "?action=photo&id=" . $location . "'\">\n";
}
else
{
echo " \n";
}
if (file_exists($dir_thumbs . $photos[$photoid-1]) && in_array($photos[$photoid-1],$photos))
{
$location = $photoid - 1;
echo "<img src=\"" . $dir_thumbs . $photos[$photoid-1] . "\" class=\"image\" alt=\"" . $photos[$photoid-1] . "\" onclick=\"location.href='" . $php_self . "?action=photo&id=" . $location . "'\">\n";
}
else
{
echo " \n";
}
if (file_exists($dir_thumbs . $photos[$photoid]) && in_array($photos[$photoid],$photos))
{
echo "<img src=\"" . $dir_thumbs . $photos[$photoid] . "\" class=\"this_image\" alt=\"" . $photos[$photoid] . "\">\n";
}
else
{
echo " \n";
}
if (file_exists($dir_thumbs . $photos[$photoid+1]) && in_array($photos[$photoid+1],$photos))
{
$location = $photoid + 1;
echo "<img src=\"" . $dir_thumbs . $photos[$photoid+1] . "\" class=\"image\" alt=\"" . $photos[$photoid+1] . "\" onclick=\"location.href='" . $php_self . "?action=photo&id=" . $location . "'\">\n";
}
else
{
echo " \n";
}
if (file_exists($dir_thumbs . $photos[$photoid+2]) && in_array($photos[$photoid+2],$photos))
{
$location = $photoid + 2;
echo "<img src=\"" . $dir_thumbs . $photos[$photoid+2] . "\" class=\"image\" alt=\"" . $photos[$photoid+2] . "\" onclick=\"location.href='" . $php_self . "?action=photo&id=" . $location . "'\">\n";
}
else
{
echo " \n";
}
echo "<br>";
echo "<br>";
// ... einde thumbnailsbalk
// begin navigatie onderaan...
if (file_exists($dir_thumbs . $photos[$photoid-1]) && in_array($photos[$photoid-1],$photos))
{
echo "<a href=\"" . $php_self . "?action=photo&id=".$vorige."\"><< Vorige</a>\n";
}
else
{
echo "<span class=\"hidden\">Vorige >></span>";
}
echo " \n";
if (file_exists($dir_thumbs . $photos[$photoid+1]) && in_array($photos[$photoid+1],$photos))
{
echo "<a href=\"" . $php_self . "?action=photo&id=".$volgende."\">Volgende >></a>\n";
}
else
{
echo "<span class=\"hidden\">Volgende >></span>";
}
echo "<br>\n";
echo "<br>\n";
echo "<a href=\"" . $php_self . "?page=".$page."\">Overzicht</a>\n";
echo "<br>\n";
echo "<br>\n";
echo "[ <a href=\"" . $dirname . $photos[$photoid] . "\">Origineel</a> ]";
// ... einde navigatie onderaan
echo "</div>\n";
}
?>
</body>
</html>
<?php
$time_end = microtime(true);
$time = $time_end - $time_start;
//echo "<br />Pagina generatie in $time seconden.\n";
?>
Nog geen reacties
Om te reageren moet je ingelogd zijn.
Nog niet geregistreerd? Doe dat dan nu!
Terug naar gewone pagina
Websitemaken wordt gehost door Nucleus.be, uw Hosting Solution Builder