Jake
Jake

Reputation: 1390

populate an HTML <ul> with images from a folder automatically

I wanted to ask how can I populate an HTML list with Images located in a folder automatically?

lets say I have 4 pages with 4 different lists. lets say the lists are as follows: Cars, Motorcycles, Airplanes, Ships each list entry has a src as a thumbnail and a href as a link to full size image. my folder contain images with specific titles: C=Cars M=Motorcycles A=Airplanes S=Ships

then I have a serial number

and the ending is either T=Thumbnail F=Full Image

so a complete file name would be C20T.jpg or C20F.jpg.

I am looking for a script that will update the 4 lists according to their subject and populate them automatically with related file names.

from my search here I have found this piece of code but I believe it needs some tweaking and I am not sure how to do this :(

$dir    = '/images';
$files = scandir($dir);
$images = array();
foreach($files as $file) {
  if(fnmatch('*.jpg',$file)) {
    $images[] = $file;
  }
}

foreach($images as $image) {
  echo '<img src="images/'.$image.'" />';
}

I hope someone could help me with this!

Thank you for your time reading this.

Upvotes: 2

Views: 4500

Answers (1)

alex
alex

Reputation: 490183

$type = 'c';

$imagesDir = 'images/';

$images = glob($imagesDir . $type . '*[TYPE].{jpg,jpeg,png,gif}', GLOB_BRACE);

This should get all your full images.

Making a ul is then pretty easy...

<ul>
<?php foreach($images as $image): ?>
   <li><a href="<?php echo str_replace('[TYPE]', 'F', $image); ?>"><img src="<?php echo str_replace('[TYPE]', 'T', $image); ?></a>" alt="" /></li>
<?php endforeach; ?>
</ul>

Upvotes: 5

Related Questions