Info  
Door: PeckMoeilijkheidsgraad: 2/3
Geplaatst op: 27-02-2007 Reacties: 0
Views: 198891Log in om zelf te reageren
Laatste keer aangepast op 17-05-2008 door PeckWaardering: 9/10 (5 stemmen)

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_origineel0000$breedte$hoogte$breedte_origineel$hoogte_origineel);
                
imagegif($afbeelding$thumblocatie.$bestandsnaam);
                break;
            case 
2:
                
//jpg
                
$afbeelding_origineel imagecreatefromjpeg($map.$bestandsnaam);
                
imagecopyresampled($afbeelding$afbeelding_origineel0000$breedte$hoogte$breedte_origineel$hoogte_origineel);
                
imagejpeg($afbeelding$thumblocatie.$bestandsnaam,80);
                break;
            case 
3:
                
//png
                
$afbeelding_origineel imagecreatefrompng($map.$bestandsnaam);
                
imagecopyresampled($afbeelding$afbeelding_origineel0000$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."\">&lt;&lt;&nbsp;Vorige</a>\n";
        }
        else
        {
            echo 
"<span class=\"hidden\">Vorige&nbsp;&gt;&gt;</span>";
        }
        
        echo 
"&nbsp;&nbsp;&nbsp;\n";
        
        
// kijken of er een "volgende" knop nodig is
        
if (pageExists($volgende))
        {
            echo 
"<a href=\"" $php_self "?page=".$volgende."\">Volgende&gt;&gt;&nbsp;</a>\n";
        }
        else
        {
            echo 
"<span class=\"hidden\">Volgende&nbsp;&gt;&gt;</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&amp;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&amp;id=".$vorige."\">&lt;&lt;&nbsp;Vorige</a>\n";
    }
    else
    {
        echo 
"<span class=\"hidden\">Vorige&nbsp;&gt;&gt;</span>";
    }
    echo 
"&nbsp;&nbsp;&nbsp;\n";
    if (
file_exists($dir_thumbs $photos[$photoid+1]) && in_array($photos[$photoid+1],$photos))
    {
        echo 
"<a href=\"" $php_self "?action=photo&amp;id=".$volgende."\">Volgende&nbsp;&gt;&gt;</a>\n";
    }
    else
    {
        echo 
"<span class=\"hidden\">Volgende&nbsp;&gt;&gt;</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&amp;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&amp;id=" $location "'\">\n";
    }
    else
    {
        echo 
"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\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&amp;id=" $location "'\">\n";
    }
    else
    {
        echo 
"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\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 
"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\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&amp;id=" $location "'\">\n";
    }
    else
    {
        echo 
"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\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&amp;id=" $location "'\">\n";
    }
    else
    {
        echo 
"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\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&amp;id=".$vorige."\">&lt;&lt;&nbsp;Vorige</a>\n";
    }
    else
    {
        echo 
"<span class=\"hidden\">Vorige&nbsp;&gt;&gt;</span>";
    }
    echo 
"&nbsp;&nbsp;&nbsp;\n";
    if (
file_exists($dir_thumbs $photos[$photoid+1]) && in_array($photos[$photoid+1],$photos))
    {
        echo 
"<a href=\"" $php_self "?action=photo&amp;id=".$volgende."\">Volgende&nbsp;&gt;&gt;</a>\n";
    }
    else
    {
        echo 
"<span class=\"hidden\">Volgende&nbsp;&gt;&gt;</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