KOMPOOS.NL

image gallery - PHP (broncode)

home » image-gallery » php-image-gallery.html

sitemap


voorbeeld image gallery PHP | broncode voor de plaatjes gallerij

uitleg php image gallery procedure

Als je jouw pagina de php extensie geeft kan je de onderstaande broncode integraal gebruiken. Wil je alles op een html-pagina plaatsen moet je even de procedure volgen om php op een html-pagina te parsen.

Maak een directory aan met een door jou gekozen naam. Plaats daarin een php- of html- pagina (met ook een door jou zelf gekozen naam) en plaats de onderstaande code daarin. Maak daarna (in de door jou gemaakte directory) een lege sub-directory met de naam cache. Maak óók in deze directory (dus niet de cache-directory) zoveel subdirectories als je wilt met daarin een willekeurige hoeveelheid jpg-plaatjes. Tot slot plaats je een php-file in de (eerstgenoemde) directory met de naam verklein.php en doe de code (die je helemaal onderaan de pagina kan vinden) in deze file.
Resumerend:
Als alles goed gegaan is heb je nu een directory met daarin de main-file, de php-module verklein.php en alle plaatjes-directories als mede de cache-directory.

Het enige wat er nu nog moet gebeuren is om op de zesde regel van de "verklein.php" het absolute pad naar jouw cache-directory in te vullen, en de cache-directory (die je aangemaakt hebt) alle lees en schrijfrechten te geven (777).

De eerste keer als je de procedure gebruikt zullen alle thumbnail-plaatjes van de image-galley in de cache-directory geplaatst (=aangemaakt) worden, en bij elk volgend gebruik van de pagina, zullen de thumbnails vanuit de cache (ultra-snel) op de pagina geplaatst worden.

integrale broncode van de image gallery pagina


<?php header("Cache-Control:public");header("Content-Type:text/html;charset=utf-8");ob_start("ob_gzhandler");?>
<!DOCTYPE html><html lang="nl">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>image gallery - PHP module</title>
<meta name="keywords" content="image gallery" />
<meta name="description" content="PHP image gallery. de snelste en beste image gallery voor jouw website. geheel cross browser." />
<meta name="author" content="Bobik" />
<meta name="robots" content="noimageclick" />
<style type="text/css">
        .gallery a{
                text-decoration:none;
                color:#fff}
        p.stijl{
                margin-left:0px;
                width:100%;
                height:800px;
                text-align:center}
        p.stijl img{
                padding:20px;
                border:0}
        .gallery_navigatie_knop{
                text-shadow:0 0 3px #000;       
                letter-spacing:-3px;
                font-size:1.4em;
                font-family:Monospace;
                padding-left:1em;
                padding-right:1em;
                font-weight:bold;
                background:-moz-linear-gradient(top, #ffb7db, #c4a8a4, #c93f27, #a03120, #c93f27 ,#ff4e32);
                background:-o-linear-gradient(top, #ffb7db, #c4a8a4, #c93f27, #a03120, #c93f27 ,#ff4e32);
                background-color:#c93f27;
                background-image:-webkit-gradient(linear, 0 0, 0 100%,
                color-stop(0, #ec9f95),
                color-stop(0.5, #c93f27),
                color-stop(0.5, #af301f),
                color-stop(1, #f87036));
                border:1px solid #af3c2c;
                -webkit-border-radius:6px;
                -webkit-box-shadow:0 2px 4px rgba(248,112,54,0.7);
                box-shadow:0 2px 4px rgba(248,112,54,0.7);
                moz-box-shadow:0 2px 4px rgba(248,112,54,0.7);
                -webkit-box-shadow:0 2px 4px rgba(248,112,54,0.7);
                border-radius:6px;
                -moz-border-radius:6px;
                box-shadow:0 2px 4px rgba(248,112,54,0.7);
                moz-box-shadow:0 2px 4px rgba(248,112,54,0.7)}
</style>
<!--[if lte IE 9]>
        <style type="text/css">
                .gallery_navigatie_knop{
                        background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAeCAYAAAAVdY8wAAAAK0lEQVQ4jWP8//9/HAMRgIWBgeHfwCn8Q3WFA2j1yPTMqBupo3BYuZG6CgGUAyBzH+1NtQAAAABJRU5ErkJggg==')}
        </style>
<![endif]-->
</head>
<body style="font-family:sans-serif">
<h1>KOMPOOS.NL</h1>
<h2>image gallery - PHP</h2>
<h3><a href="/">home</a> » <a href="/image-gallery/">image-gallery » index</a></h3>
<p><strong><em><a href="/site-map.html">sitemap</a></em></strong></p>
<hr />
<h4><a href="/image-gallery/">voorbeeld image gallery PHP</a> | <a href="/image-gallery/php-image-gallery.html">broncode voor de plaatjes gallerij</a></h4>
<?php
$hijkomtvan=$_SERVER['HTTP_REFERER'];
if(!preg_match('/(een_lijst_van_bijvoorbeeld_spambots|of_een_andere_uitsluiting)/i',$hijkomtvan)){
echo '<div class="gallery"><p class="stijl">';
$image_gallery_thumbnails=6;
$aantal_thumbnails_per_regel=3;
$onthoud_image_gallery_pagina=0;                
$aantal_plaatjes_voor_de_gallery=1;
$maak_een_nieuwe_regel=(round($image_gallery_thumbnails/$aantal_thumbnails_per_regel));
if(isset($_GET['foto'])){
        if(isset($_GET['tothoever'])){$onthoud_image_gallery_pagina=$_GET['tothoever'];}
                $image_gallery_directory_groot=$_GET['foto'];
        $allemaal=$_GET['alles'];
        $de_laatste_foto=$allemaal-1;
        $nummer_van_afbeelding=$_GET['nummertje'];
        $de_volgende_foto=$nummer_van_afbeelding+1;
        if($de_volgende_foto>$de_laatste_foto){$de_volgende_foto=$de_laatste_foto;}
        $de_vorige_foto=$nummer_van_afbeelding-1;
        if($de_vorige_foto<0){$de_vorige_foto=0;}
        $files=array();
        if (file_exists($image_gallery_directory_groot)){$dir=opendir($image_gallery_directory_groot);}
        else{exit;}
        while ($f=readdir($dir)){if(eregi("\.jpg",$f)){array_push($files,"$f");}}
        $groot_plaatje=$image_gallery_directory_groot."/".$files[$nummer_van_afbeelding];
        $terug_naar_de_index=((floor($nummer_van_afbeelding/$image_gallery_thumbnails))*$image_gallery_thumbnails);
        echo "<a href=\"${_SERVER['SCRIPT_NAME']}?tothoever=$onthoud_image_gallery_pagina&foto=$image_gallery_directory_groot&alles=$allemaal&nummertje=0\" rel=\"nofollow\"><span class='gallery_navigatie_knop'>|&lt;</span></a><a href=\"${_SERVER['SCRIPT_NAME']}?tothoever=$onthoud_image_gallery_pagina&foto=$image_gallery_directory_groot&alles=$allemaal&nummertje=$de_vorige_foto\"><span class='gallery_navigatie_knop'>&lt;&lt;</span></a><a href=\"${_SERVER['SCRIPT_NAME']}?tothoever=$onthoud_image_gallery_pagina&klik=$image_gallery_directory_groot&plaat=$terug_naar_de_index\"><span class='gallery_navigatie_knop'>&nbsp;&nbsp;^^&nbsp;&nbsp;</span></a><a href=\"${_SERVER['SCRIPT_NAME']}?tothoever=$onthoud_image_gallery_pagina&foto=$image_gallery_directory_groot&alles=$allemaal&nummertje=$de_volgende_foto\"><span class='gallery_navigatie_knop'>&gt;&gt;</span></a><a href=\"${_SERVER['SCRIPT_NAME']}?tothoever=$onthoud_image_gallery_pagina&foto=$image_gallery_directory_groot&alles=$allemaal&nummertje=$de_laatste_foto\"><span class='gallery_navigatie_knop'>&gt;|</span></a>";
        echo "<br /><br />";
        $img=$groot_plaatje;$dimensions=getimagesize($img);$breedte=$dimensions[0];$hoogte=$dimensions[1];
        echo "<a href=\"\"><img src=\"$groot_plaatje\" width=\"".$breedte."\" height=\"".$hoogte."\" alt=\"".$groot_plaatje."\" title=\"".$groot_plaatje."\" /></a>";
}
else{
if(isset($_GET['klik'])){
        $de_volgende_regel=0;
        $start=0;
        $resultaat=$image_gallery_thumbnails;
        if(isset($_GET['plaat'])){
                $start=$_GET['plaat'];}
        $huidige_image_gallery_directory=$_GET['klik'];
        if(isset($_GET['tothoever'])){$onthoud_image_gallery_pagina=$_GET['tothoever'];}
        $files=array();
        if (file_exists($huidige_image_gallery_directory)){$dir=opendir($huidige_image_gallery_directory);}
        else{exit;}
        if(empty($dir)){break;}
        while ($f=readdir($dir)){if(eregi("\.jpg",$f)){array_push($files,"$f");}}
        $aantal_plaatjes_in_gallery = count($files);
        $overgebleven=$aantal_plaatjes_in_gallery%$image_gallery_thumbnails;
        $laatste_is_berekend=$aantal_plaatjes_in_gallery-$overgebleven;
        if(($start+$image_gallery_thumbnails)>$aantal_plaatjes_in_gallery){$tothier=$aantal_plaatjes_in_gallery;}
        else{$tothier=$start+$image_gallery_thumbnails;}
        if ($aantal_plaatjes_in_gallery>($start+$image_gallery_thumbnails)){
        $meer_galleries_zien=$start+$image_gallery_thumbnails;}else{$meer_galleries_zien=$laatste_is_berekend;}
        if (($start-$image_gallery_thumbnails)>-1){
        $minder_galleries_zien=$start-$image_gallery_thumbnails;}else{$minder_galleries_zien=0;}
        if($aantal_plaatjes_in_gallery==$laatste_is_berekend){$laatste_is_berekend=($aantal_plaatjes_in_gallery-$image_gallery_thumbnails);}
        if ($aantal_plaatjes_in_gallery==($start+$image_gallery_thumbnails)){$meer_galleries_zien=$laatste_is_berekend;}
        echo "<span class='gallery_navigatie_knop'><a href=\"${_SERVER['SCRIPT_NAME']}?tothoever=$onthoud_image_gallery_pagina&klik=$huidige_image_gallery_directory&plaat=0\" rel=\"nofollow\">|&lt;</a></span><a href=\"${_SERVER['SCRIPT_NAME']}?tothoever=$onthoud_image_gallery_pagina&klik=$huidige_image_gallery_directory&plaat=$minder_galleries_zien\"><span class='gallery_navigatie_knop'>&lt;&lt;</span></a><span class='gallery_navigatie_knop'><a href=\"${_SERVER['SCRIPT_NAME']}?tothoever=$onthoud_image_gallery_pagina\">&nbsp;&nbsp;^^&nbsp;&nbsp;</a></span><a href=\"${_SERVER['SCRIPT_NAME']}?tothoever=$onthoud_image_gallery_pagina&klik=$huidige_image_gallery_directory&plaat=$meer_galleries_zien\"><span class='gallery_navigatie_knop'>&gt;&gt;</span></a><a href=\"${_SERVER['SCRIPT_NAME']}?tothoever=$onthoud_image_gallery_pagina&klik=$huidige_image_gallery_directory&plaat=$laatste_is_berekend\"><span class='gallery_navigatie_knop'>&gt;|</span></a>";
        echo "<br /><br />";
        for($hoeveel_plaatjes_in_gallery=$start;$hoeveel_plaatjes_in_gallery<$tothier;$hoeveel_plaatjes_in_gallery++){
                $de_sub_file=$huidige_image_gallery_directory.'/'.$files[$hoeveel_plaatjes_in_gallery];
                echo "<a href=\"${_SERVER['SCRIPT_NAME']}?tothoever=$onthoud_image_gallery_pagina&foto=$huidige_image_gallery_directory&alles=$aantal_plaatjes_in_gallery&nummertje=$hoeveel_plaatjes_in_gallery\" rel=\"nofollow\"><img src=\"verklein.php?image=./".$de_sub_file."\" alt=\"".$de_sub_file."\" title=\"".$de_sub_file."\" /></a>";
                for($maak_gallery=1;$maak_gallery<($image_gallery_thumbnails+1);$maak_gallery++){
                        if ($de_volgende_regel==(($maak_gallery*$aantal_thumbnails_per_regel-1))){echo "<br />";}
                }
                $de_volgende_regel++;
        }
}
else{
$alle_directories_galleries=array();
if ($handle = opendir('.')){
        while ($lees_gallery_directories=readdir($handle)){
                if((!strstr($lees_gallery_directories, "."))&&(!strstr($lees_gallery_directories,"cache"))){
                        array_push($alle_directories_galleries,"$lees_gallery_directories");
                }
        }
        closedir($handle);
}
$resultaat=count($alle_directories_galleries);
$onthoudresultaat=$resultaat;
$rest_gallery=$onthoudresultaat%$image_gallery_thumbnails;
$naar_laatste_gallery_serie=($onthoudresultaat-$rest_gallery);
rsort($alle_directories_galleries);
if(isset($_GET['tothoever'])){
        $start=($_GET['tothoever']);
        $resultaat=$start+$image_gallery_thumbnails;
        $terug=$start-$image_gallery_thumbnails;
        if($terug>-1){
                echo "<a href=\"${_SERVER['SCRIPT_NAME']}?tothoever=0\" rel=\"nofollow\"><span class='gallery_navigatie_knop'>|<</span></a>";
                echo "<a href=\"${_SERVER['SCRIPT_NAME']}?tothoever=$terug\" rel=\"nofollow\"><span class='gallery_navigatie_knop'><<</span></a>";
        }else{echo "<a><span class='gallery_navigatie_knop'>|<</span></a><a><span class='gallery_navigatie_knop'><<</span></a>";}
        $laat_gallery_link_zien=$onthoudresultaat-$resultaat;
        if ($laat_gallery_link_zien>0){
        echo "<a><span class='gallery_navigatie_knop'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></a><a href=\"${_SERVER['SCRIPT_NAME']}?tothoever=$resultaat\"><span class='gallery_navigatie_knop'>&gt;&gt;</span></a>";
        echo "<a href=\"${_SERVER['SCRIPT_NAME']}?tothoever=$naar_laatste_gallery_serie\" rel=\"nofollow\"><span class='gallery_navigatie_knop'>&gt;|</span></a>";
        }
        else{echo "<a><span class='gallery_navigatie_knop'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></a><a><span class='gallery_navigatie_knop'>&gt;&gt;</span></a><a><span class='gallery_navigatie_knop'>>|</span></a>";}
        }
else{
        $start=0;
        $resultaat=$image_gallery_thumbnails;
        echo "<a><span class='gallery_navigatie_knop'>|&lt;</span></a><a><span class='gallery_navigatie_knop'>&lt;&lt;</span></a><a><span class='gallery_navigatie_knop'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></a><a href=\"${_SERVER['SCRIPT_NAME']}?tothoever=$resultaat\"><span class='gallery_navigatie_knop'>&gt;&gt;</span></a><a href=\"${_SERVER['SCRIPT_NAME']}?tothoever=$naar_laatste_gallery_serie\"><span class='gallery_navigatie_knop'>&gt;|</span></a>";
        }
        echo "<br /><br />";
$de_volgende_regel=0;
$hoeveel_directories_in_image_galleries=0;
for($hoeveel_directories_in_image_galleries=$start;$hoeveel_directories_in_image_galleries<$resultaat;$hoeveel_directories_in_image_galleries++){
        $files=array();
        $dir=opendir($alle_directories_galleries[$hoeveel_directories_in_image_galleries]);
        if(empty($dir)){break;}
        while ($f=readdir($dir)){if(eregi("\.jpg",$f)){array_push($files,"$f");}}
        $i=0;
        foreach($files as $plaatje){
                if ($i==$aantal_plaatjes_voor_de_gallery){break;}
                $de_sub_file=$alle_directories_galleries[$hoeveel_directories_in_image_galleries].'/'.$plaatje;
                echo "<a href=\"${_SERVER['SCRIPT_NAME']}?klik=$alle_directories_galleries[$hoeveel_directories_in_image_galleries]&tothoever=$start\"  rel=\"nofollow\"><img src=\"verklein.php?image=./".$de_sub_file."\" alt=\"".$alle_directories_galleries[$hoeveel_directories_in_image_galleries]."\" title=\"".$alle_directories_galleries[$hoeveel_directories_in_image_galleries]."\" /></a>";
                for($maak_gallery=1;$maak_gallery<($maak_een_nieuwe_regel+1);$maak_gallery++){
                        if ($de_volgende_regel==(($maak_gallery*$aantal_thumbnails_per_regel-1))){echo "<br />";}
                }
                $i++;
        }
        $de_volgende_regel++;
}
}
}
}
?></p></div></body></html>

integraal de php-pagina "verklein.php"


<?php
error_reporting(E_WARNING);
if(isset($_REQUEST['image'])) $plaatje=$_REQUEST['image'];
$image_breedte = 100;              
$image_hoogte = 100;             
$cache_dir =$_SERVER["DOCUMENT_ROOT"]."/HET_ABSOLUTE_PAD_NAAR/image-gallery/cache/";
function haal_nieuwe_afmetingen($src_b, $src_h) {
        global $image_breedte, $image_hoogte;
        $procent_breedte = $image_breedte * 100 / $src_b;
        $procent_hoogte = $image_hoogte * 100 / $src_h;
        $bereken_de_gallery = ($procent_breedte < $procent_hoogte) ? 100 / $procent_breedte : 100 / $procent_hoogte;
        $image_breedte_wordt = round($src_b / $bereken_de_gallery);
        $image_hoogte_wordt = round($src_h / $bereken_de_gallery);
        return array($image_breedte_wordt, $image_hoogte_wordt);
}
function show_plaatje_image_gallery($file, $type) {
        $last_modified = gmdate('D, d M Y H:i:s', filemtime($file)) . ' GMT';
        $ditmoment = gmdate('D, d M Y H:i:s', time()) . ' GMT';
        header("Content-Type: image/$type");
        header("Last-Modified: $last_modified");
        header('Cache-control: private, no-cache, must-revalidate');
        header('Expires: Sat, 01 Jan 2020 00:00:00 GMT');
        header("Date: $ditmoment");
        header('Pragma: no-cache');
        readfile($file);
        exit;
}
function lees_de_cache_thumb($het_origineel, $thumbnaam, $laatzien = true) {
        if(file_exists($het_origineel)) {
                $type = 'jpeg';
                if($type) {
                        $thumbnail = "$thumbnaam.$type";
                        clearstatcache();
                        $last_modified = gmdate('D, d M Y H:i:s', filemtime($thumbnail)) . ' GMT';
                        if(isset($_SERVER['HTTP_IF_MODIFIED_SINCE'])) {
                                $laatstgewijzigd = preg_replace('/;.*$/', '', $_SERVER['HTTP_IF_MODIFIED_SINCE']);
                                if($laatstgewijzigd == $last_modified) {
                                        if($laatzien) {
                                                header('HTTP/1.0 304 Not Modified');
                                                exit;
                                        }
                                        else return true;
                                }
                        }
                        if($laatzien) show_plaatje_image_gallery($thumbnail, $type);
                        else return true;
                }
        }
        return false;
}
function maak_de_thumbnail($het_origineel, $thumbnaam, $type, $laatzien = true) {
        $error = '';
        if(!$error) {
                if($fp = @fopen($het_origineel, 'rb')) {
                        $data = fread($fp, filesize($het_origineel));
                        fclose($fp);
                        if($data) {
                                if(!$src_img) {
                                        if($type == 'jpeg') {
                                                if(function_exists('ImageCreateFromJPEG')) {
                                                        $src_img = @ImageCreateFromJPEG($het_origineel);
                                                }
                                        }
                                }
                                if(!$error) {
                                        $src_b = ImageSX($src_img);
                                        $src_h = ImageSY($src_img);
                                        list($image_breedte_wordt, $image_hoogte_wordt) = haal_nieuwe_afmetingen($src_b, $src_h);
                                        $trans_col = -1;
                                        $dst_img = ImageCreateTrueColor($image_breedte_wordt, $image_hoogte_wordt);
                                        if(function_exists('ImageCopyResampled'))
                                                ImageCopyResampled($dst_img, $src_img, 0, 0, 0, 0, $image_breedte_wordt, $image_hoogte_wordt, $src_b, $src_h);
                                        else ImageCopyResized($dst_img, $src_img, 0, 0, 0, 0, $image_breedte_wordt, $image_hoogte_wordt, $src_b, $src_h);
                                        }
                                        if($type == 'jpeg') {
                                                @ImageJPEG($dst_img, "$thumbnaam.$type");
                                        }
                                        ImageDestroy($src_img);
                                        ImageDestroy($dst_img);
                                        if($laatzien) lees_de_cache_thumb($het_origineel, $thumbnaam);
                                }
                        }
                }
        return $error;
}
// hoofdlus van image gallery
$error = '';
if( $plaatje) {
        $data = '';
                if($plaatje) {
                        if($fp = @fopen($plaatje, 'rb')) {
                                while(!feof($fp)) $data .= fread($fp, 4096);
                                        fclose($fp);
                                }
                        else $error = 'kan foto niet openen';
                        }
                        if(!$error) {
                                $het_origineel = "$cache_dir/img_" . md5($data);
                                $thumbnaam = $het_origineel . '_' . $image_breedte . 'x' . $image_hoogte;
                                $cached = lees_de_cache_thumb($het_origineel, $thumbnaam);
                                if(!$cached) {
                                        if(!file_exists($het_origineel)) {
                                                if($fp = @fopen($het_origineel, 'wb')) {
                                                fwrite($fp, $data, strlen($data));
                                                fclose($fp);
                                        }
                                        else $error = 'kan foto niet opslaan';
                                }
                                if(!$error) {
                                        $imgsize = @getImageSize($het_origineel);
                                        $type = 'jpeg';
                                        if($type) {
                                                if($imgsize[0] <= $image_breedte && $imgsize[1] <= $image_hoogte) {
                                                        show_plaatje_image_gallery($het_origineel, $type);
                                                }
                                        else {
                                                if($imgsize[0] < $image_breedte) $image_breedte = $imgsize[0];
                                                        if($imgsize[1] < $image_hoogte) $image_hoogte = $imgsize[1];
                                                                $error = maak_de_thumbnail($het_origineel, $thumbnaam, $type);
                                                }
                                        }
                                }
                        }
                }
        }
?>