AJAX Image Gallery - Make a Simple Image Gallery in PHP


The last file will just hold some simple javascript functions to allow us to browse the gallery or view images without reloading the page. Save this last file as javascript.js

var show = 5;
var current = 1;

function next(total) {
    if(current + show - 1 < total) {
        current++;
    }
    change(total);
}

function prev(total) {
    if(current > 1) {
        current--;
    }
    change(total);
}

function change(total) {
    for(i=1;i<total+1;i++) {
        document.getElementById('thumb_' + i).style.display = "none";    
    }
    for(i=1;i<total+1;i++) {
        if(i >= current && i < current + show) {
            document.getElementById('thumb_' + i).style.display = "inline";        
        }
    }
}

function show_full(source) {
    document.getElementById('full').src = source;
    document.getElementById('fulllink').href = source;
}




Code Breakdown:

var show = 5; - This is the number of thumbnails that being shown at once. (so if you change the 5 in the previous script, then change this as well)
var current = 1; - This variable is just for reference, it is the thumbnail that it will start on. (in this case the first one)
function next(total) { - This is how you define a custom function in Javascript, just like PHP.
if(current + show - 1 < total) { - This will check if the image going to be shown is less than total number of images. In other words, it will prevent us from browsing more thumbnails, when there really isn't.
change(total); - This function will be used to actually change the thumbnails visibility.
function prev(total) { - This is the same thing as the next() function we made but this is for going back, instead of forward. The only difference is this will check if the script can go backwards (e.g. there are images to show).
for(i=1;i<total+1;i++) { - This will loop through every thumbnail.
document.getElementById('thumb_' + i).style.display = "none"; - This will hide every thumbnail.
if(i >= current && i < current + show) { - While looping through every thumbnail after we have hidden them all, this will calculate which ones should be showing.
document.getElementById('thumb_' + i).style.display = "inline"; - For the images that should be showing, it makes them visible.
function show_full(source) { - This custom function will display the large image when the user clicks on the thumbnail.
document.getElementById('full').src = source; - This changes the 'src' of the image, which makes it load and display the new one.
document.getElementById('fulllink').href = source; - This changes the link, making it go to the new image so the user can view the highest resolution available.

Now upload all of those files (gallery.php, functions.php and javascript.js) in the same directory and then create the image directory in that directory, if you haven't already (it should be 'gallery') by default. Put some images in the directory and open gallery.php which should display the thumbnails of all those images.

Note: It isn't beautiful but I did not want to make this more confusing by adding some CSS or some additional files. Also it will be easier to integrate and customize with this being so simple.

Here is my result:




Pages (3) << [ First ] 1 2 3
Tutorial Statistics
Date Added: 16-07-2008
Votes: 16
Rating: 8.3
Views: 29762

Author: scott

Main Category:
PHP
Sub-Category:
General Development


Rate:
1 2 3 4 5