WBCE Home | WBCE Hilfe | WBCE Addon Repository | Impressum | Datenschutz

WBCE CMS Forum

WBCE CMS – Way Better Content Editing.

You are not logged in.

#1 18.05.2019 16:55:36

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 16:56:13)

Offline

Liked by:

florian, thanks

#2 18.05.2019 19:08:41

florian
Administrator

Re: kleines Sliderdroplet

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

Offline

Board footer

Powered by FluxBB

up