Photo album is one of the easiest way to show the collection of pictures in the webpage. I was also searching simple one that can be easily customized. I was inspired by the article which is so simple and easy to use. It can be used in both automatic and manual method to show the pictures.
We can edit the simple CSS to change the appearance and size of the album.
In automatic mode, the picture changes according to the specified time. The picture also shows the description if we need and can be also hyper-linked. The time between the photo change can also be adjusted.
In manual mode, when we slide the mouse over the photo album a navigation menu appears in the bottom which contains the button for previous photo, pause/play and next photo. And rest features are same as automatic mode.
One demerit of this photo album is that we should first need to resize the photos same as that of the size of photo album. Because this photo album don’t automatically resize it. One should be careful about this.
Add the following script to the head section of your page:
The code above references two external .js files plus 4 images, which you need to download below (right click/ select “Save As”):
Then, add an empty DIV with a unique ID attribute where you wish a Gallery to appear on your page.
The DIV’s ID value should match up with the value set in simpleGallery.wrapperid in the code of Step 1 above. When the page loads, the script will load the gallery into this DIV.
Our Simple Photo Album is ready now.
Click here to see the sample