WBCE CMS Forum

WBCE CMS – Way Better Content Editing.

Du bist nicht angemeldet.

#1 18.05.2019 16:55:36

frankw
Mitglied

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;

Beitrag geändert von frankw (18.05.2019 16:56:13)

Offline

Liked by:

florian, thanks, screamindan

#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.


Code allein macht nicht glücklich. Jetzt spenden!

Offline

#3 03.10.2020 13:58:28

beichholz
Mitglied

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

Offline

#4 03.10.2020 14:26:29

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.


Code allein macht nicht glücklich. Jetzt spenden!

Offline

#5 15.04.2023 11:57:39

berny
Mitglied

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?

Offline

#6 15.04.2023 16:50:36

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.
attachment.php?item=3434&download=1

Beitrag geändert von florian (15.04.2023 16:51:15)


Code allein macht nicht glücklich. Jetzt spenden!

Offline

Fußzeile des Forums

up