web blazonry web development scripts and tutorials Get best price on Samsung Galaxy S5, Copper Gold 16GB (Verizon Wireless)
   PHP       Name Generators       Perl       CSS       Javascript       Java       MySql       How Tos       Resources   




PHP Name Generators
  Wu-Name
  U.S. Name
  Baby Name

Bookmark and Share




Butt Simple Photo Gallery

I wrote this “Butt Simple” Photo Gallery so I could display a collection of photos quickly. There are many excellent open source photo albums and image galleries, but I did not want the complexity and extra work that came along with their many features, so I wrote this pared down photo gallery.

I did not want to upload just one image at a time through the application, or add a caption to each photo. Too tedious and time-consuming. Some apps had more features and complexity than I wanted (a "lightbox" feature, for example). I just wanted to upload a whole batch of photos and be done with it. Deliver just enough to entertain family with some photos.

The user interface is not elegant. View a page of thumbnails. Click any photo to view a large version of it. Use your back button to return to the thumbnail page.


Demo of Photo Gallery
View photo gallery (For this demo, I made the large versions of the photos smaller than in the real photo gallery. This is for user-friendliness of the viewing the demo.)


How The Photo Gallery Works
The PHP code looks for JPEGs and GIFs in the directory where the script is. Next, it builds the HTML page that displays all thumbnails, with each thumbnail having a link to the large version of the photo.

I use JPEGs and GIFs as a shortcut for the script to deal with which image is the thumbnail and which is the large version. I thought image quality would suffer, but it is fine and gets the job done.


Source Code: photos1.txt


How to Prepare Your Photos
Photos directly from a digital camera have too big a file size to upload directly. (I have family who still using dial-up.) The first step is to make two additional files from each photo. One is a thumbnail (a very small version) that I saved in GIF format. GIF works fine for most thumbnails, but the real reason is it simplifies writing the gallery code because all GIFs are thumbnails. The other file is larger, but less than full size and saved as a JPEG.

Automate this step of creating thumbnails and larger photos. I use Adobe ImageReady and the freeware program IrfanView. You could do this step manually using any image-editing software, but it's so easy and fast to automate.

So that I do not overwrite and lose my original photo file, I have IrfanView or ImageReady save each JPEG with a filename that appended -01 to the filename. For example, the original photo is filename IMG_1219.jpg. My less-than-full-size image became IMG_1219-01.jpg. My thumbnail became IMG_1219.gif

The exact naming convention is not critical. What matters is that you do not want to over-write your original file. Give the newly created files a slightly different name. But do include original file name in part of the new filenames so you can quickly find the original file.


How to Create the Photo Gallery
Create a directory on your web server for your photo gallery. One directory for each gallery. Upload photos to their directory. Upload the file with the Photo Gallery script to the same directory with all your photos. You will now have a photo gallery with all the JPEGs and GIFs in the directory.


Photo Gallery Notes
For layout of the page, I use an HTML TABLE A variable lets you easily change the number of images per row. In the demo, $perRow = 4;.

I let the script determine the image size. No need to do any work that the server can do. $size = GetImageSize($file);

In future versions of my photo gallery, I want to add a feature to browse large photos like slideshow. I also want to improve the user interface.


 

Newest Pages
Test Google Ads Ver. 2
Free Linux Admin Books
Free Linux Books for Programmers
Free Books for Linux on the Desktop
Free PHP Books
Free JavaScript Books
Free Java Books - Advanced
Free Java Books - Basic
Free Perl Books
Free Python Books
Quote of the Day (PHP)
Debugging Part 2
How to Test Google Ads
Most Popular Pages
Baby Name Generator
U.S. Name Generator
Wu Name Generator
Popup Windows (JavaScript)
Upload and Resize an Image (PHP)
How To Install Apache + PHP + MySQL
Intro to Web Databases (PHP, MySQL)

Least Popular Pages
iNews Applet (Java)
Java Resources
Site Monitor (Perl)
PHP Resources
 
 

  privacy policy     ||     © 1997-2016. astonishinc.com   All Rights Reserved.