WBCE CMS Forum

frankw

Mitglied

simples Galerie Droplet

Guten Tag,

ich bin neu hier und auf WBCE gestoßen, weil ich vor 9 Jahren mal 2 Webpräsenzen mit Website Baker erstellt habe und aufgrund eines Provider - Versionswechsels zu PHP 7.2 ein Update erforderlich wurde. Ich hatte von den Kunden auch 9 Jahre nichts mehr gehört...

Ich war hoch erfreut, dass WBCE sich so simpel drüberbügeln lässt.

Was nicht auf Anhieb lief, war die Bildergalerie. Die Kunden wollen nur, dass man auf die Bilder klickt und sich die Bilder nur vergrößern. Sind zwei Ferienwohnungsprojekte die zudem nicht ordentlich bezahlt werden.

Was auch etwas schräg läuft sind die jQuery Geschichten, hier kommt auf der Konsole immer:

$.insert is not a function

Die Zeit hier die Ursache zu finden will ich nicht investieren. Im Grunde laufen die Seiten auch ohne jQuery.

Für die Galerie habe ich mir ein kleines Droplet (quick an dirty)geschrieben, evtl. kann es einer brauchen:

Der Aufruf ist bspw.:   [[fw-galerie?verz=media/Ordner&text=Galerie...&breite=250]

if (!isset($verz)) return 'Verzeichnis nicht gesetzt';
if (!isset($text)) return 'Text nicht gesetzt';
if (!isset($breite)) return 'Breite nicht gesetzt';
$myDir=WB_PATH.'/'.$verz; 
$altText = $text;
$thumbWidth = $breite;
$myPics = [];
  $myFiles = glob("$myDir/*.*");
  //get GraphicFiles
  for ($i=0; $i<count($myFiles); $i++)
    if (in_array(strtolower(pathinfo($myFiles[$i], PATHINFO_EXTENSION)), ['gif','jpg','jpeg','png']))
        $myPics[]=basename($myFiles[$i]);
  //check if directory fw-thumbs exists
  if (!file_exists("$myDir/fw-thumbs")) mkdir("$myDir/fw-thumbs", 0777, true);
  //check thumbnails
  foreach($myPics as $imageName){
    //check if thumb failed
    $fileInfo = pathinfo($imageName);
    if (!file_exists($myDir.'/fw-thumbs/'.$fileInfo['filename'].'.jpg')){
      //create the Thumbnail
      $imgExt = $fileInfo['extension'];
      if ($imgExt=='jpg')$tempImage = imagecreatefromjpeg("$myDir/$imageName");
      if ($imgExt=='jpeg')$tempImage = imagecreatefromjpeg("$myDir/$imageName");
      if ($imgExt=='gif')$tempImage = imagecreatefromgif("$myDir/$imageName");
      if ($imgExt=='png'){
         $tempImage=imagecreatefrompng("$myDir/$imageName");
         imagealphablending($tempImage, true);
      }
      $width = imagesx($tempImage);
      $height = imagesy($tempImage);
      $thumbHeight = floor($height * ($thumbWidth / $width));
      $memoryImage = imagecreatetruecolor($thumbWidth, $thumbHeight);
      imagecopyresampled($memoryImage, $tempImage, 0, 0, 0, 0, $thumbWidth, $thumbHeight, $width, $height);
      imagejpeg($memoryImage, $myDir.'/fw-thumbs/'.$fileInfo['filename'].'.jpg');     
    }
  }
  $htmlOut='<style>div.fhw-galerie{width:100%;display:flex;flex-wrap:wrap;justify-content:space-between;align-content:space-between;align-items:center}div.fhw-galerie img{display:block;width:30%;margin-bottom:1em;border:3px solid #fff;box-shadow:0 0 9px 2px rgba(0,0,0,0.75)}@media only screen and (max-width: 767px){div.fhw-galerie img{width:45%}}@media only screen and (max-width: 400px){div.fhw-galerie img{width:40%}}.fhwBoxBlackOverlay,.fhwBoxImgOverlay,.fhwBoxLoaderAni{position:fixed;height:100%;width:100%;top:0;left:0}.fhwBoxBlackOverlay{background-color:#888;opacity:0;transition:all .5s}.fhwBoxImgOverlay,.fhwBoxLoaderAni{transform:scale(0);transition:all .5s;display:flex;flex-direction:row;align-content:center;align-items:center}.fhwBoxLoaderAni{transform:scale(1)}.fhwBoxLoaderAni h1{margin-left:auto;margin-right:auto}.fhwboxImgContainer{max-width:90%;max-height:80%;margin:auto}.fhwboxImgContainer img{width:100%;display:block}.fhwBoxImgHeader,.fhwBoxImgFooter{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-content:stretch;align-items:flex-start;background:#fff}.fhwBoxControls,.fhwBoxDescription{font-size:30px;line-height:30px;margin:5px 10px;font-weight:700;color:#000}.fhwBoxControls{transform:scale(1.0)}.fhwBoxControls:hover{color:red;cursor:pointer;transform:scale(1.3)}.fhwBoxNoDisplay{display:none}.fhwBoxNoTransition{transition:none}.fhwBoxOpacity8{opacity:.8}.fhwBoxScale1{transform:scale(1)}.fhwBoxZoom{cursor:pointer;cursor:-moz-zoom-in;cursor:-webkit-zoom-in;cursor:zoom-in}@media screen and (max-width: 450px){.fhwBoxControls,.fhwBoxDescription{font-size:20px;line-height:20px}.fhwboxImgContainer{width:90%}}@media screen and (min-width:1023px){.fhwboxImgContainer{width:850px}}</style>';
  $htmlOut .= '<div class=fhw-galerie>'; 
  foreach($myPics as $image){
    $imageInfo = pathinfo($image);
    $htmlOut.='<img src ="'.WB_URL.'/'.$verz.'/fw-thumbs/'.$imageInfo['filename'].'.jpg"';
    $htmlOut.=' data-fhwBox="'.WB_URL.'/'.$verz.'/'.$image.'" alt="'.$altText.'">';  	
  }
  $htmlOut.='</div>'; 
  $htmlOut.='<script>(function(a,d,b,c){for(a=function(a){return document.querySelector(a);},d=function(g,h){var e=document.createElement("div");e.classList.add("fhwBoxBlackOverlay"),e.classList.add("fhwBoxNoDisplay"),a("body").appendChild(e);var c=document.createElement("div");c.classList.add("fhwBoxImgOverlay"),c.classList.add("fhwBoxNoDisplay"),c.innerHTML="<div class=fhwboxImgContainer><div class=fhwBoxImgHeader><p class=fhwBoxDescription>Beschreibung</p><p class=\"fhwBoxControls fhwBoxClose\">x</p></div><div><img id=fhwBoxImage src=></div></div>",a("body").appendChild(c);var d=document.createElement("div");d.classList.add("fhwBoxLoaderAni"),d.classList.add("fhwBoxNoDisplay"),d.innerHTML="<h1>Laden...</h1>",a("body").appendChild(d),b.length==1&&a(".fhwBoxImgFooter").classList.add("fhwBoxNoDisplay"),a("#fhwBoxImage").setAttribute("src",g),a("#fhwBoxImage").complete||a(".fhwBoxLoaderAni").classList.remove("fhwBoxNoDisplay"),a("#fhwBoxImage").onload=function(){a(".fhwBoxLoaderAni").classList.add("fhwBoxNoDisplay"),a(".fhwBoxDescription").innerHTML=h,a(".fhwBoxBlackOverlay").classList.remove("fhwBoxNoDisplay"),a(".fhwBoxImgOverlay").classList.remove("fhwBoxNoDisplay"),a(".fhwBoxBlackOverlay").offsetWidth=a(".fhwBoxBlackOverlay").offsetWidth,a(".fhwBoxBlackOverlay").classList.add("fhwBoxOpacity8"),a(".fhwBoxImgOverlay").classList.add("fhwBoxScale1");};var f=function(){a(".fhwBoxImgOverlay").classList.remove("fhwBoxScale1"),a(".fhwBoxBlackOverlay").classList.remove("fhwBoxOpacity8"),setTimeout(function(){a(".fhwBoxBlackOverlay").classList.add("fhwBoxNoDisplay"),a(".fhwBoxImgOverlay").classList.add("fhwBoxNoDisplay"),a(".fhwBoxImgOverlay").parentNode.removeChild(a(".fhwBoxImgOverlay")),a(".fhwBoxBlackOverlay").parentNode.removeChild(a(".fhwBoxBlackOverlay")),a(".fhwBoxLoaderAni").parentNode.removeChild(a(".fhwBoxLoaderAni"));},510);};a(".fhwBoxClose").addEventListener("click",function(){f();}),a(".fhwBoxClose").addEventListener("touchstart",function(){f();});var i=function(){for(var c=0;c<b.length;c++)if(a("#fhwBoxImage").getAttribute("src")==b[c].getAttribute("data-fhwBox"))return c;};},b=document.querySelectorAll("img[data-fhwBox]"),c=0;c<b.length;c++)b[c].classList.add("fhwBoxZoom"),b[c].addEventListener("click",function(){d(this.getAttribute("data-fhwBox"),this.getAttribute("alt"));}),b[c].addEventListener("touchstart",function(){d(this.getAttribute("data-fhwBox"),this.getAttribute("alt"));});}());</script>';
  return $htmlOut; 

Beitrag geändert von frankw (08.05.2019 20:58:36)