Fancybox mit Vorschau-Bilder creator
Das Script erstellt aus euren Fotos ein zusätzliches Vorschaubild. Damit kann man Datenvolum sparen. Deine Besucher werden es dir danken.
Download-archiv
Der hier verwendete Code
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Homepage von Basti1012 = myscript ,Fancy Box mit Vorschau </title>
<link href="/css_webseite/fancybox.css" rel="stylesheet">
<style>
div#gallery {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
#gallery a{
margin:10px 0;
}
figure{
max-height:300px;
max-width:300px;
display:inline-flex;
border:2px solid black;
flex-direction:column;
padding:10px;
}
figure>img{
max-height:200px;
}
figcaption{
height:100px;
display:flex;
flex-direction:column;
}
figcaption > p{
margin:0;
padding:0;
flex:1;
word-wrap: break-word;
}
a{
text-decoration:none;
}
</style>
<script src="/js_webseite/jquery.js"></script>
<script src="/js_webseite/fancybox.js"></script>
</head>
<body>
<main>
<?php
$kleinebilder='image/klein';// Ordner für Thumb Bilder
$grossebilder='image/gross';// Ordner für Bilder
$extensions = array("jpg", "bmp", "gif", "jpeg", "png"); // erlaubte datei endungen
//$homepage_pfad='https://basti1012.bplaced.net/';//installation ordner
error_reporting(-1);
ini_set('display_errors', 1);
include('php_website/dir_images.php');
if($x<$x2){
?>
<h4>Es gibt nicht für alle Großen Bilder ein Vorschau Bild,.<br>
möchten sie jetzt die Vorschaubilder erstellen ?</h4>
<?php
include('php_website/resizer.php');
}else{
echo '<h1>Fancybox mit Thumbs erstellen aus Ordner laden </h1><div id="gallery">';
echo $sammeln;
}
?>
</div>
<script>
$('a').fancybox({});
</script>
</main>
</body>
</html>