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.
<?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'>|<</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'><<</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'> ^^ </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'>>></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'>>|</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\">|<</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'><<</span></a><span class='gallery_navigatie_knop'><a href=\"${_SERVER['SCRIPT_NAME']}?tothoever=$onthoud_image_gallery_pagina\"> ^^ </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'>>></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'>>|</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'> </span></a><a href=\"${_SERVER['SCRIPT_NAME']}?tothoever=$resultaat\"><span class='gallery_navigatie_knop'>>></span></a>";
echo "<a href=\"${_SERVER['SCRIPT_NAME']}?tothoever=$naar_laatste_gallery_serie\" 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><a><span class='gallery_navigatie_knop'>>|</span></a>";}
}
else{
$start=0;
$resultaat=$image_gallery_thumbnails;
echo "<a><span class='gallery_navigatie_knop'>|<</span></a><a><span class='gallery_navigatie_knop'><<</span></a><a><span class='gallery_navigatie_knop'> </span></a><a href=\"${_SERVER['SCRIPT_NAME']}?tothoever=$resultaat\"><span class='gallery_navigatie_knop'>>></span></a><a href=\"${_SERVER['SCRIPT_NAME']}?tothoever=$naar_laatste_gallery_serie\"><span class='gallery_navigatie_knop'>>|</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>
<?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);
}
}
}
}
}
}
?>