WBCE CMS Forum

frankw

Member

kleines Sliderdroplet

Dieses kleine Droplet erstellt einen Imageslider für den Kopfbereich
Hierzu muss ein Verzeichnis unter media mit der Bezeichnung 'headerpics' angelegt werden.
Einige gleich große Bilder lege ich dort ab (diese sind für alle Seiten gleich.
Will ich andere Bilder für Unterseiten haben, erstelle ich in diesem Verzeichnis weitere Verzeichnisse mit der PageID und speichere dort die entsprechenden Bilder...
Evtl. kann es einer brauchen...

$headerDirs = '/headerpics';
  if (file_exists(WB_PATH.MEDIA_DIRECTORY.$headerDirs.'/'.PAGE_ID)){
    $workDir = WB_PATH.MEDIA_DIRECTORY.$headerDirs.'/'.PAGE_ID;
    $workPath = MEDIA_DIRECTORY.$headerDirs.'/'.PAGE_ID;
  } else {
    $workDir = WB_PATH.MEDIA_DIRECTORY.$headerDirs;
    $workPath = MEDIA_DIRECTORY.$headerDirs;
  }
  $myPics = [];
  $myFiles = glob("$workDir/*.*");
  for ($i=0; $i<count($myFiles); $i++)
    if (in_array(strtolower(pathinfo($myFiles[$i], PATHINFO_EXTENSION)), ['gif','jpg','jpeg','png']))
        $myPics[]=basename($myFiles[$i]);
  

   if ( count($myPics) == 1 ){
    $myHTMLOut = '<figure role=group class=my-header-single-image>';
  } else {
    $myHTMLOut = '<figure role=group class=my-slider>';
  }
  
  foreach($myPics as $imageName){
    $myHTMLOut .= '<figure>';
     $myHTMLOut .= '<img src="'.$workPath.'/'.$imageName.'" alt="sliderImage">';
    $myHTMLOut .= '</figure>';
  }
  $myHTMLOut .= '</figure>';
  $picsCount = count($myPics);
  $fadeInTime = .7; // secs
  $viewTime = 5; //secs
  $aniDuration = $picsCount * ($viewTime+$fadeInTime);
  $aniDelay = $aniDuration / $picsCount;
  $delayFirstPic = 2 * $fadeInTime * -1;

  $myCSS = '<style>';
  if ($picsCount > 1){
    $myCSS.= 'figure.my-slider{overflow-x:hidden;display: flex;margin:0;}';
    $myCSS.= 'figure.my-slider figure{margin:0;display:block;}';
    $myCSS.= 'figure.my-slider img{width:100%;display:block;}';
    $myCSS.= 'figure.my-slider figure{transform:translateX(-100%);animation: fhwsliderani '.$aniDuration.'s ease-in-out 0s infinite;}';
    $myCSS.= 'figure.my-slider figure:nth-child(1){animation-delay: '.$delayFirstPic.'s;}';
    for ($i=2;$i<=$picsCount;$i++){
      $delayFirstPic+=$aniDelay;
      $myCSS.= 'figure.my-slider figure:nth-child('.$i.'){animation-delay: '.$delayFirstPic.'s;margin-left:-100%;}';
    }
    //nun die keyframes
    $myCSS.='@keyframes fhwsliderani {';
    $myCSS.=($fadeInTime/$aniDuration*100).'% {transform: translateX(0);}'; 
    $myCSS.=(($fadeInTime+$viewTime)/$aniDuration*100).'% {transform: translateX(0);}'; 
    $myCSS.=(($fadeInTime*2+$viewTime)/$aniDuration*100).'% {transform: translateX(100%);}';     
    $myCSS.='100% {transform: translateX(100%);}';      
    $myCSS.='}';
  } else {
     $myCSS.= 'figure.my-header-single-image img{width:100%;display:block;}';
  }
  $myCSS .= '</style>';
  return $myHTMLOut.$myCSS;

Last edited by frankw (18.05.2019 17:56:13)

florian

Administrator

Re: kleines Sliderdroplet

Danke schön - ein sehr praktisches Droplet! Ich hab's gleich mal im AOR ergänzt.

---

Sorgen sind wie Nudeln: man macht sich meist zu viele.

beichholz

Member

Re: kleines Sliderdroplet

Habe mal eine Frage zu dem Droplet, gibt es hier Beschränkungen hinsichtlich Menge der Bilder ?
(wären 27 möglich ?)
MFG
Bernd

---

Wenn Tischtennis einfach wäre, würde es Fussball heißen

florian

Administrator

Re: kleines Sliderdroplet

Ich weiß nicht, ob das funktioniert,  aber selbst wenn: wer schaut sich denn 27 Sliderbilder an? Eine normale Galerie scheint mir da doch deutlich benutzerfreundlicher.

---

Sorgen sind wie Nudeln: man macht sich meist zu viele.

berny

Member

Re: kleines Sliderdroplet

ich hätte das jetzt probiert, aber nach dem ersten Bild kommt nichts mehr nach
könnte das css etwas veraltet sein?

florian

Administrator

Re: kleines Sliderdroplet

Wenn WBCE in einem Unterverzeichnis liegt, muss bei $workPath jeweils noch WB_URL. davorgesetzt werden.

...
  if (file_exists(WB_PATH.MEDIA_DIRECTORY.$headerDirs.'/'.PAGE_ID)){
    $workDir = WB_PATH.MEDIA_DIRECTORY.$headerDirs.'/'.PAGE_ID;
    $workPath = WB_URL.MEDIA_DIRECTORY.$headerDirs.'/'.PAGE_ID;
  } else {
    $workDir = WB_PATH.MEDIA_DIRECTORY.$headerDirs;
    $workPath = WB_URL.MEDIA_DIRECTORY.$headerDirs;
  }
...

Allerdings stimmt irgendwas mit der Berechnung der Animation nicht - die Bilder, obwohl alle gleich groß, werden nicht vollständig überlagert. Da kommt dann sowas heraus.

Last edited by florian (15.04.2023 17:51:15)

---

Sorgen sind wie Nudeln: man macht sich meist zu viele.