How combine flickicity with a php script to get all images in a folder

PHP
, ,
1

I have this script, working, and giving a list off all images in a given folder:

<?php
    
 $rii = new RecursiveIteratorIterator(new RecursiveDirectoryIterator("$root/multimedia/img/immagini-di-paesaggi"));
 $myFileTypes = ["php", "inc", "txt"];
 foreach ($rii as $file)
 {
    if ($file->isDir() || in_array($file->getExtension(), $myFileTypes))
   { 
        continue;
   }
   $files[] = $file->getPathname(); 
   $filen = $file->getBasename('.jpg');
 echo '<li><img src="'.$file.'" alt="'.$file.'" onclick="onClick(this)" /><br /><b>'.$filen.'</b></li>'; 
 }
?>

I wonder if it would be possible to combine the above script to flickicity, so that I can get a flickicity gallery with all the images in that folder, without writing every time the name of each file (in that folder).

The code flickicity (you probably know already) is something like this

 <div id="gallery" style="width: 50%; margin-left: auto; margin-right: auto; margin-bottom: 4%;">
  <div class="carousel" data-flickity='{ "cellAlign": "center", "contain": true, "fullscreen": true, "wrapAround": true, "lazyLoad": 1 }'>
  <div class="carousel-cell"><img data-flickity-lazyload="" alt="" onclick="onClick(this)" /></div>
  </div>
   <div class="carousel-cell"><img data-flickity-lazyload="" alt="" onclick="onClick(this)" /></div>
  </div>
 </div>
2

Solved, with this code

<div id="gallery" style="width: 50%; margin-left: auto; margin-right: auto; margin-bottom: 4%;">
<div class="carousel" data-flickity='{ "cellAlign": "center", "contain": true, "fullscreen": true, "wrapAround": true, "lazyLoad": 1 }'>

<?php

    $images = glob("$root/my-path/*.jpg");
    $flag=1;

    foreach($images as $image)
    {
      echo '<div class="carousel-cell' .($flag?' active':''). '">';
      echo '<img data-flickity-lazyload="'. $image .'" onclick="onClick(this)" />';
      echo '</div>';
      $flag=0;
    }
  ?>

</div>
</div>

Inspired by this code.

3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.