Pix, the PHP Image Carousel Photo Album
A PHP script to display your images and photographs
by Tim Hill
Suitable for any OS.
A web server with PHP is required.
Now MOBILE FRIENDLY with added Responsive Web Design to always fit the width of your display
I think there may be a few people like me who want to do something simple: take some photographs or create some images and then put them on the internet or display them locally for your friends and family to see.
Perhaps you don't want facebook or instagram to re-process your pictures to be smaller and of a poorer quality with badly cropped thumbnails.
If you have some web space into which you can upload your images or a local web server with PHP this is just the script you've been looking for!
You can easily create albums similar to Blue-Bike and Schooner Pickle without editing the script at all.
Using the Pix Carousel PHP script is simple: carousel.zip (4.2MB) contains all the files which generate this example.
When installed on your web server, what's in the .zip download should produce identical output.
All you have to do to display your own pictures is to substitute your own images (in three sizes) and provide caption files (which can be empty).
The zip includes the Pix script (pix/pix.php) as well as an essential but minimalist shell 'parent' index.php, and three example images in various sizes and their captions in appropriate directories.
Don't point your browser at the script directly, target the index.php in the parent directory which 'includes' the script.
As you navigate the images, the index.php reloads itself (and the pix.php script) and whether it displays a sheet of thumbnails or a single larger image with previous/next navigation buttons
depends on the parameters the script passes itself.
Selecting the larger image results in the original (largest) image being displayed by the browser. Use the back button to return to the larger image and the up arrow to return to the thumbnails.
Here are the instructions on how to start using the Pix Carousel PHP script. Please try them with only a few images at first.
- Copy the contents of carousel.zip (4.2MB) to a new web folder.
- Type the path to the new folder into your browser.
- Make sure the output you see is the same as this example. Test it.
- When you know the script works, you may want to remove the original three images: empty EVERY directory inside the folder 'pix'. See how their filenames are similar.
- Choose your own original images from your collection having cropped or otherwise tweaked them as necessary. Copy them into the folder 'pix/originals'. They will be displayed in alphabetical sequence so adjust the filenames to change the order in which your pictures are shown.
- From your originals create 95% jpeg images constrained to 800 by 800 pixels (retain the aspect ratio and file name). Take care not to overwrite the originals! Save the new files to the folder 'pix/800x800'.
- From the 800x800 files create 95% jpeg images constrained to 240 by 240 pixels (retain the aspect ratio and file name). Save the new files to the folder 'pix/240x240'.
- Inside 'captions' you need to create a text file for each original image. Ideally, an image called <filename>.jpg in the three image directories will have a corresponding caption file called <filename>.txt.
- Edit the files in 'captions' as required or leave them empty. The captions are inserted into ALT and TITLE tags so avoid using the double-quote in your description..
- Type the path to the folder into your browser, as before. There will be an error if the four Pix directories don't contain the same number of files..
- If you change the directory names 800x800 or 240x240 (perhaps because you have decided on different sized thumbnails and larger images) amend the top of the pix/pix.php script, as indicated..
- Edit index.php as required!.
- At any future time you can add more images (and captions) and no script editing is required. Just make sure every directory has the same number of corresponding files; the script will complain if they differ.
- Share and donate!! Contribute ideas for improvements! Like and share! Follow!.
Tips and links for RISC OS users