Place images from a folder into list with preview

Question

I need to build a dynamic image gallery plugin for Joomla! that will go into a specific folder and pull out all images from the folder and show first of them as a large preview image and the rest in a list. Afterwards I will need to make the preview image open in a lightbox if clicked and in the lightbox I need to have the small thumbnails of listed images as well.

But know I need just php to go to the folder and pull out all the images from the folder specified. I have googled a bit and found some solution but this does not work for some reason I don't understand. Could someone tell me please, what is wrong with the code?

Thanks!

<div id="images">
        <?php 
        $images_dir = 'images/';
        $scan = scandir($images_dir);
        echo '<img src="' . $images_dir . $scan[2] . '"alt="image" />';
        ?>
        <ul id="smallimages">
        <?php
        for($i=0; $i<count($scan); $i++){
            $ext = substr($scan[$i], strpos($scan[$i], '.'), strlen($scan[$i]-1));
        $filetypes = array('.jpg', '.JPEG', '.jpeg');
        if(in_array($ext, $filetypes)){
            echo '<li><a href="' . $images_dir . $scan[$i] . '"><img src="' . $images_dir . $scan[$i] . '" alt="' . $scan[$i] . '"></a></li>';}         }?></ul>

</div>

score 0 · Answer 1 · answered Sep 13 '13 at 10:42

I think it's because you haven't defined the path correctly. Try using the following:

$images_dir = JUri::root() . 'plugins/content/plg_new/images';

JUri::root() is the root of your Joomla site so change the path from there on accordingly to where ever your images are located

Hope this helps

score 0 · Answer 2 · answered Sep 13 '13 at 11:35

Does this work for you?

<?php
$image_directory="hrevert/images/";
$pictures = glob("$image_directory*.{gif,jpg,png}", GLOB_BRACE); 

//displays the first image
$first_img=reset($pictures);
echo "<img src=\"".$first_img."\" width='20px' />"; 


//loops through other images and prints them
echo "<ul>";
foreach($pictures as $picture)  {

    echo "<a href='$picture'><img src=\"".$picture."\" width='20px' /></a>"; 
}
echo "</ul>"
?>

Place images from a folder into list with preview

2 Answers2