CODEWITHSUNDEEP
javascriptphpjqueryhtmlimage-gallery
SJBenton
SJBenton

Reputation: 43

Creating gallery from folder

I have created a gallery of images, thumbnails that when you click on them the large image is replaced with the image you have clicked on. Currently I have to write each file in html and create a seperate JS script for each file. This is an example of my current code:

Gallery: 

        <img id="bigPicMarie" src="assets/Images/MariePeterWeddingImages/Edited/KJ4V7314edit.jpg" alt="banner" />
        <div class="captionBox">
            <p id="captionText"></p>
        </div>

        </div> <!-- end of bigPicMarieContainer -->
        <div class="floatFix"></div>

        <div id="thumbnails" >

            <div id="thumbContainerMarie">
                <a class="galleryLink" onclick="putPic141();">
                    <img class="landscape" src="assets/Images/MariePeterWeddingImages/KJ4V7314editthumb.jpg" width="100" alt="thumb" />
                </a>

                <a class="galleryLink" onclick="putPic142();">
                    <img class="portrait" src="assets/Images/MariePeterWeddingImages/MM_24083editthumb.jpg" width="100" alt="thumb" />
                </a>

                <a class="galleryLink" onclick="putPic143();">
                    <img class="landscape" src="assets/Images/MariePeterWeddingImages/MM_24089editthumb.jpg" width="100" alt="thumb" />
                </a>

JS:

 //Marie&PeterWeddingAlbum//
 function putPic141(){
document.getElementById('bigPicMarie').src = "assets/Images/MariePeterWeddingImages/Edited/KJ4V7314edit.jpg";
document.getElementById('captionText').innerHTML = 'IMG001';    
 }//end putPic141

 function putPic142(){
document.getElementById('bigPicMarie').src = "assets/Images/MariePeterWeddingImages/Edited/MM_24083edit.jpg";
document.getElementById('captionText').innerHTML = 'IMG002';    
 }//end putPic142

An example of what the gallery looks like: http://www.jamielouise.co.uk/portraits.html

What I want is a way of making the gallery generate automatically from all the images in a specified folder. Ideally I would like to it to appear and function in the same way as it does currently.

Upvotes: 3

Views: 4853

Answers (1)

brasofilo
brasofilo

Reputation: 26055

First you need to read all images in a folder and create an array out of it. Solution in Php read directory file.

It would be much easier if you had the full size images in one directory and the thumbnails in another. Otherwise, the array build up will have to detect files with the thumb suffix and act accordingly.

With the array at hand, do a foreach and print the HTML. Note that single and double quotes have different uses in PHP.

/* Supposing an array like */
$images = array( 
       array( 'thumb' => 'thumb1url', 'full' => 'full1url' ), 
       array( 'thumb' => 'thumb2url', 'full' => 'full2url' ) 
);

echo '<div id="thumbContainerMarie">' . "\r\n";
$id_num = 1;
foreach( $images as $img )
{
    printf(
        '<a class="galleryLink" id="%s" onclick="%s"><img class="landscape" src="%s" width="100" alt="thumb" /></a>', 
        'galLink' . $id_num,
        "putPic('" . $img['full'] . "');",
        $img['thumb']
    );
    echo "\r\n";
    $id_num++;
}
echo '</div>';
?>
<script type="text/javascript">
function putPic( url )
{
    alert( url );
}
</script>

This creates the following HTML. Note the use of only one JS function with the value we need being passed to it:

<div id="thumbContainerMarie">
<a class="galleryLink" id="galLink1" onclick="putPic('full1url');"><img class="landscape" src="thumb1url" width="100" alt="thumb" /></a>
<a class="galleryLink" id="galLink2" onclick="putPic('full2url');"><img class="landscape" src="thumb2url" width="100" alt="thumb" /></a>
</div>
<script>etc...

Upvotes: 2

Related Questions