Updated 2/6/2010 — Read more below!
There are a lot of PHP photo gallery scripts out there. I know; because I went looking for one some time ago, and found myself barraged with Javascript, AJAX, and complicated installations. I didn’t want any of those things, so in the end I just wrote one for myself — and this is the end result. Download the ZIP package.
It’s not a complicated script, and it doesn’t do a whole lot for you: but, assuming you’re running on Linux with PHP, it’ll be incredibly easy for you to install and configure. View the sample installation.
What’s in the Package?
There are six main files included in this zip package (Version 1.2):
gallery.php— the photo gallery script.functions.php.index.php— the home file which includes the gallery script andcontains configuration info.Configuration now in separate file; gallery files now contain only a few gallery-specific variables. You can copy this page to create additional galleries just by saving it with a new name and changing the configuration information.test.phpis a second example referencing a separate gallery, to demonstrate the multiple gallery features.titles.txt— a simple text file which uses pipe-separated fields to indicate the image name, an image description, and analttext option.title.php— a script which provides a unique title element for each image in the gallery.functions.php.basic_styles.css— a very basic stylesheet so that your default photo gallery doesn’t look too boring. Warning: no attempt whatsoever has been made to test these styles outside of Firefox.readme.txt— installation instructions
I’ve also supplied a (very) small gallery of images for the included gallery.
What does the script do?
This is pretty straightforward. The configuration information you’ll send to the script provides the title of the gallery, the relative path to your images folder, and the name of your text file containing the image information. Using this information, the gallery script creates a page containing (in order):
- Navigation links to move between the previous and next images in the gallery. The sequence is the order in which you’ve listed the images in your text file. The navigation is circular, so in the initial position the previous link will send you to the last image in the gallery.
- A full size image with a caption. The caption is the second field in your text file.
- An unordered list of thumbnail images in the gallery. Again, the order is from the text file. In the default styling, the list is displayed as a panel of images rather than as a list. Each image is a link to the full sized image within the gallery.
The script does NOT automatically generate your thumbnail images. Sure, I could have done that — but my feeling is that manually creating thumbnail images will usually be more aesthetically pleasing. My preference is to create 80×80 square thumbnails cropped from the image. The tiling effect of the unordered list is much more effective with square thumbnails; and the ability to choose a particular section of the image for the thumbnail is much nicer than whatever programmatically selected truncation might have done.
Some Small Recommendations
The script allows the ability to use an alt text on your images. It also provides a description which can be used to caption the images in a paragraph either over or under the image. To me, it’s redundant to provide both descriptive text associated with the image AND a descriptive alt attribute. Therefore, I’ve also provided the option to turn off alt text in the full sized images. The default settings are what I’d recommend: visible descriptions enabled for the full size image, alt attributes left blank, and alt attributes enabled for all thumbnails.
I also recommend keeping your alt attributes short and to the point. The reason for having separate descriptions and alt attributes is because they serve different purposes: don’t try and use the description field as an alt attribute and don’t try and use the alt field for a description!
There’s nothing fancy about this script. Really — I mean it. It’s down and dirty “make me a photo gallery” programming. Use at your own risk!
Changes as of 2/6/2010
- Improved pagination feature, adding a control to set the number of visible page links at a time.
- Simplified support for multiple galleries.
- Generate a list of available photo galleries.
- Navigate through multiple galleries continuously.
- Separated most configuration options into an external file, rather than configuring the same options for every gallery.
These changes are very substantial to the core code; although the majority of the actual code has remained the same, the structure of the code usage has been significantly revised. See the readme.txt for details on usage.
On the whole, this should be easier than ever before; although you may be in for a little work if you’re trying to revise.
Note: The basic output (HTML, unique ID’s, classes, etc.) is unchanged. The format of the titles.txt file is unchanged. The only changes are in the addition of new features, in the way configuration options are set up, and in the way information is output from the scripts.
Correction, columns, instead of rows
Thanks, Mark
That should be something readily adjustable using CSS. You’ll need to adjust the width of the #thumbs
div, the overall width of the gallery area, and have the thumbs float left to create a column effect.Greetings Mark.
I REALLY like and admire the aesthetic look of your gallery.
However I have little knowledge of CSS, so learning.
Does the basic_styles.css provided by you have entries not used within
your gallery? I.E. a generic CSS used by you elsewhere?
The reason is that I have written a program to receive images via a
single form combining an email and POST.
This will be the source of the images within gallery.
I would like to make my work compliment your style/CSS.
Thank you
Philip
Greetings Philip
The CSS and the page self are not completed jet, and I’m rebuilding the CSS to give it another sytle like my other site Weerlogboek.nl. I’m editting the scripts and use my knowledge about HTML and CSS. For now it’s just a testpage/beta page.
My other site, Weerlogboek.nl has a finished CSS and HTML, so if you’re interested in the CSS, you can look there.
Greetings, Mark (Sorry for my bad englisch)
Hello,
I had one questions that not has been answered yet: Is it possible to use a HTML file instead of an txt. file to show descriptions/titles beneath the pictures. If so, what do I need to change?
I’m a newby in PHP, but I’m willing to learn
Greetings, Mark ( The Netherlands )
You can include HTML in your
.txtfile, but using an HTML file in place of the .txt file would get much more complicated. In the .txt file, where the code calls for the description, just add the needed HTML to your text string.Hi,
The script is now full in use, and the last few days I’m implementing the PHP and CSS to make my own layout.
I’d noticed that when I click on a thumbnail, for example “thumbnail 1” the link: http://www.fotologboek.nl/?a=0 will open, and not http://www.fotologboek.nl/?a=1 … Is it possible to fix this? So when i click on the first thumnail this link will open: http://www.fotologboek.nl/?a=1 instead of http://www.fotologboek.nl/?a=0?
Greetings, Mark
Well, you can always mess around with the math to switch it from a starting count of 1. It’s just set up to use a basic decimal counting system. It’s not something I’m interested in messing around with, though. I’m not certain off the top of my head (I wrote that loop a long time ago,) but I think the change would require quite a few small changes to the code.
Hi joe, is there any way I can mod this to just output all the files in the specified without having to include the text file?
Hi,
Why is there a linebreak after alt=”” in the tag? Is this because of the .txt file? I’m cleaning up my scriptstructures and found this problem.
Example
Greetings, Mark
Hi, Problem with thumbnailnav solved!
Another question, why is it impossible to use ‘enters’ in the .txt file for photo descriptions. Reason for that, I want to integrate a small table for each photo which contains information about de camera/photo specifications. Because of the errors that appear when I use enters I need to put al the HTML on 1 line. An whit a table en a short photo descriptions the scriptstructure turns into a mess…
Is there another solution for this problem? Or can I modify something in the PHP?
Greetings, Mark
Modifying the PHP would be a significant chore. The way the script distinguishes between one gallery entry and the next is by splitting the information on line breaks — thus the problem when you place a hard return directly in the text file.
If what you want is for your .txt file to look clean, then there’s nothing I can really do to help you. If what you want is for your output source to look clean, I’d suggest trying the
/ncharacter to create line breaks in the output.Hi,
The problem about the scriptstructure is solved, i’ve created a string an builded a list where i can fill in the information that I wanted to show.
In the mean time I saw another script with a photocounting, is it possible to integrate something like that in this script?
In de Category navigation I made a tag where I set the number of photos per category by hand. It would be much easier if it runs automatic per photocategory
http://www.fotologboek.nl/fotobestand/paddestoelen.php >>> Category navigation at the left.
Greetings, Mark (The Netherlands)
That’s a very nice implementation of the script! The photo count is available in the variable
$result, but I suspect that’s not what you’re looking for. You’re looking for something where you can simply insert the number of images in the gallery into the category navigation, right?Well, the easiest thing would be to simply add a function to the script which runs the number of images - then you could call that function.
You can just re-use the count code already in the script as a function, and call the function with the text file as an argument. Then you have a simple function which takes a file, counts the number of records in the file, and returns the value.
Hi,
My experience with PHP is not that big, so can you give an example or a start? untill now I used extra strings to increase the functions for the photo that was a easy to make, like a date, description and name. After that I created a sequence in the textfile and it worked. With this I need to fill in a number in a file called ‘fotobestand.php’ between the tag…
So if you can give me an example or a start, I can figure it out by my self, and learning from it
Greetings, Mark
Well, here’s a function which will do what I described:
This is completely untested and written off the top of my head, so no guarantees - but it should get you started.
Best,
joe
Hi,
Thanks for the quick and helpful response. On the test page which has a part a HTML script from inside the gallery.php it works with a string. But the problem is now that the category navigation is a include PHP which is included in index.php for example, how do I implement the string in a included file form another path?
Thanks, Mark
Hi,
In the mean time I’m trying some things with the pagination. Because when I created al larger number of pages, the paginantion doesn’t stop…
Situation
1,2,3,4,5,6,7,8,9,10 etc.
should look like this
.. 1 .. 5,6,7, … 10
or this
… 5,6,7,8,9 … next page … 6,7,8,9,10
Greetings, Mark
I’ve done that before, with a different script - I’ll look end see how easy it would be to incorporate the pagination method from my search script into this one. It shouldn’t be unmanageable.
Oke, I’ll hope it is possible.
I have in the mean time the problem with the photocounting script you gave me. When I’m adding a $string inside the gallery.php the counting works. But I don’t know how to add a string in another PHP file for example categories.php in this script is a span tag and thats the place where I want to add the string like an class by CSS.
Situation
PHP/fotoscript.php (gallery PHP with the script you gave)
includes/categories.php (the menu with the span where I want to show the amount of photo’s)
Greetings, Mark
Greetings Joe.
Just to let you know. With your thumbnails for me a VERY
important feature is :-
>right click on thumbnails>properties>alternate text
In my case the information would be supplied by a comment
supplied when the taker of the picture downloads it from
the camera and adds the text as a ‘comment’
Feature works perfect with Firefox but does not work in IE 7 and 8
I have not been able to test with Apple yet
My warmest regards
Philip.
p.s. fonts possibly change sizes in IE too..will confirm
Hi, Philip - thanks for your comments, but none of those are actually a part of the script. The ability to right click on thumbnails and get the alternate text in properties is a browser feature. The
altattribute text is set in the script, but that doesn’t change anything about how you can access the text in the browser.Font sizes may well change in various browsers - the CSS delivered with the script is nothing more than an example layout, and not intended for use in a production setting. No effort has been taken to make it work identically across various browsers.
There’s a possibility I’d actually release a version with some various CSS layouts available, but it’s not at all a top priority.
@Mark You should be able to run the function as long as a document with the function included is also available on the page. It would just be a matter of including
< ?php echo numImages("txtfile.txt"); ?>in the place you want the number to appear.Hi,
Maybe I’m getting this wrong, but I replaced the script you gave me with the excisting part. Is this wrong, or is it an extra function that needs to be placed beneath the existing script?
De menu.php is included in the page where also included gallery.php
Greetings, Mark
http://www.fotologboek.nl
Hi,
Maybe I’m getting this wrong, but I replaced the script you gave me with the existing part. Because in that script where the same functions.Or do I need to place this script beneath the existing one…
Menu.php is included in the samen page as the gallery.php.
Greetings, Mark
Hi Joe.
Some time ago you mentioned it was be ‘fairly’ easy to have your
script automatically generate the thumbnails.
Have you considered this?.
Perhaps similar size to current ones ( 80 x 80) but with a possible
location set approximately 1/3rd from the top in the center?
It would be a great help to me.
Oh and your font size stability is far better than mine across
different browsers.
Philip
@Mark I’m not sure I understand what you’re saying. What did you use, and where?
@Philip It is fairly easy to write a script which generates thumbnails; but doing that dynamically can be very costly of server resources. Better would be to use a script to upload your images which also generates a thumbnail version of the same image in the process. It would be more work than I’m likely to go to to actually incorporate that into the same script, however. The whole point of this script is that it doesn’t do a lot for you; just takes the images you give it and assembles them into a gallery.
I replaced this:
With this:
With your counting script, I translated the strings in Dutch. When i used the string ‘resulteerd’ inside the gallery script, it showed the number of photos, but outside the gallery script, in another PHP file which also included in the same photopage I would’nt work…
hmmm, script doesn’t show up between
can I e-mail this to you?I replaced this:
$fp = fopen($tekstlijst, ‘r’);
while ($buffer= fgets($fp,4096)) {
$afbeelding[$y] = explode(“|”, $buffer);
$foto[$y] = str_replace(“.”, “_tn.”, $afbeelding[$y][0]);
$y++;
}
$resulteert = count($foto);
With this:
function numImages($tekstlijst) {
$file = getcwd() . “$tekstlijst”;
$fp = fopen($tekstlijst, ‘r’);
while ($buffer = fgets($fp, 4096)) {
$afbeelding[$y] = explode(“|”, $buffer);
$foto[$y] = str_replace(“.”, “_tn.”, $afbeelding[$y][0]);
$aantal[$y] = $buffer;
$y++;
}
$resulteert = count($aantal); return $resulteert;
With your counting script, I translated the strings in Dutch. When i used the string ‘resulteerd’ inside the gallery script, it showed the number of photos, but outside the gallery script, in another PHP file which also included in the same photopage I would’nt work…
Hmmm. Well that could confuse things…I’m surprised that the script still works if you took out the original code and replaced it with the function I provided, even with your modifications. It was really intended to supplement the script, not replace anything.
The problem with simply accessing the variable outside the script is that the variable is only defined within the context of the script. The function, however, is defined globally when the script is available. You can call the function during another script (or as an independent script) and have it operate effectively. However, it needs to know what gallery to operate on; which is why I provided the text document as an argument for the function. Without that argument, there’s no way to access the information for a specific gallery.
Hi,
Okay, I have backups for mistakes I make, so that’s not the problem.
Because I’m still a newby at PHP I thought that the script you gave me was a replacement with extra functions, because in the script where tags that used in the existing script.
But as I understand now, it is the intention that the script/fucntion is placed separately in the gallery script. The question that than remains is, where in the gallery script do I need to place it?
And do you have also solution for the pagination?
Greetings, Mark
The function can really go just about anywhere, as long as it doesn’t interrupt any of the other logic - at the beginning or the end of the script is fine. In fact, it could be a separate file entirely, since it’s completely independent of the gallery script itself.
Hi,
I tried it in different ways, but the call function give any time an error:
Step 1
Put the call tag echo numImages(“informatie”); (with PHP tags, offcourse) (but won’t show up in message) in the span tags from the menu.php
step 2
I put the script is a separate file counting.php and included it in the same page as gallery.php
include(“/php/counting.php”);
include(“/php/gallery.php”);
and then, nomatter what I tried (online and offline)
Fatal error: Call to undefined function numImages() in C:\Program Files\EasyPHP5.3.0\www\invoegingen\fotobestand.php on line 6
Last possibility, do I need to make and seperate textfile?
Another solution would be $results, but this doesn’t work outside the script the menu.php include…
There shouldn’t be any need for a separate text file. You just need to reference the same text file as you are for the gallery itself.
I’m uncertain why you’re coming up with an undefined function error — but it’s very difficult to provide definite advice without actually seeing what you’ve done. Try including the counting script as the very first thing on the page; perhaps there’s an order of events problem.
Hi,
I’ve send you an e-mail with the scripts as I used it. In the mean time I have tried different ways, but all ending with the same errors.
Greetings, Mark
Greetings Joe.
What I am trying to do is to provide a gallery of images taken DURING a wedding ceremony.
At the following reception each guest would be given as a gift a photo taken during the ceremony.
The person taking the picture OR printing does not require technical knowledge.
When the gallery is displayed ‘they’ chose the ‘nicest’ picture from the gallery.
Please view the above URL.
Then a click on “Print this Photo’ PUTS the current image (is it located in $_GET[‘a]’ ??) into a directory such as \home\my_name\wedding_pics\
Joe I have added/changed the text of ‘Previous’ to ‘Print this Photo’ as an example.
I have NO idea how to do a PUT of $_GET[‘a’] into say \home\my_name\picture\
PLEASE help is possible……
(Oh and Joe I am likely older than your grandfather)
My warmest appreciation
Philip
Hi Joe,
I’ve wondered if you have made/found some PHP in the meantime for the pagination within the gallery. Because with a growing amount of photo pages it could be very useful when the numbers would reduce to 5 per page for example.
Greetings, Mark (Netherlands)
Hi,Joe. Thanks for your scripts. I downloaded it. and it work well with my web.
Joe I am overwhelmed by your kindness. An incredible thank you.
Sadly I can not get your changes to work.
With all your changes installed when I start the program all I get is a blank but correctly colored blank screen.
If I leave out the addition :-
Place this in the gallery.php PHP script, after line 96 and before line 97.
Line 97 is “echo ”\n”;
echo “\n”;
The program works normally again.
In the HTML I tried adding:-
var pwin;
function printImg() {
pwin = window.open(document.getElementById(“mainImg”).src,”_blank”);
setTimeout(“pwin.print()”,2000);
}
before <?php
and within the end of PHP script
also between ?> and
It seems the problem is with the addition of :-
into the gallery.php causes the failure (just a blank colored screen).
Removing the addition and retaining the other additions the gallery worked as previously.
You can see effects from http://www.price-solutions.com/basic/index.php
and http://www.price-solutions.com/basic2/index.php
Thanking you yet again and again,
Philip.
p.s. Joe you are correct re: not being over 100, but mother-in-law lives with us is 99, that is close.
Joe I have no idea what happened in the above. I cut and pasted the comment and it was severely edited.
Simply put, with all the changes installed, that you so kindly provided, the upgrade fails with the results being a blank screen as per :-
http://www.price-solutions.com/basic2/index.php
If I leave out the to component from the gallery.php script, with all other supplied changes installed, it returns to the original working
http://www.price-solutions.com/basic/index.php
Obviously with the JAVA print feature not working as yet.
Please can you make suggestions?.
Philip
Thank you Joe and I hope I have clearly expressed the problem.
Philip
Joe, Sir.
Your suggestion worked perfectly.
You are brilliant.
Thank you so much.
Philip
Excellent. Glad that it worked out for you!
Hi Joe,
I have two new questions, When you see a page like Youtube you have an input field that shows the URL from te movie.
Is something like that possible by the “large” picture. The reason for this function is for other plans that are still on my checklist
Greetings, Mark
Hi Joe,
How do I use photos from several image maps in one page?
for example:
$map = “nature”, “sport”;
Greetings, Mark
Anyone?
Hi, Mark -
Sorry about the delay, but I’ve been pressed by work commitments. 1) Yes, it would be possible, but would require some fairly significant changes to the template. Not terribly difficult, on the whole, however. 2) I’m not certain what you mean. An image map is an image which has various “hot spots” defined as links within the image using HTML. I don’t see how that even relates to the photo gallery…can you explain what you mean?
Hi, Joe
The reason is that I want to make a summary page, where al de photo’s from different maps: Nature, Weather, Sports come together.
When I navigate the photoloop starts by the beginning when clicking on the next button from the last picture. But in this case I want to connect the pages with eachother
each photopage has his own map:
Nature.php / Nature + text.txt
Weahter.php / Weather + text.txt etc.
Putting al the images in one map create a mess, because it will grow to hundreds.
Greetings, Mark
Hi,
Maybe this is a little bit clearer, I’ve updated my website to Fotologboek.nl v1.1
http://www.fotologboek.nl - See the navigation below ‘Fotografie’ (Photography)…
Maybe I’m using you’re script in a to large context, because it’s nog a single part of a website with a couple of photo’s. So there are several photomaps.
Greetings, Mark (Netherlands)
Anyone??
Greetings, Mark
http://www.fotologboek.nl
Anyone who knows a solution?
http://www.fotologboek.nl
Combine different directories in one sitemappage were from each page plus minus 5 photo’s are shown for example:
http://www.fotologboek.nl/fotografie/natuur.php (30 photo’s)
http://www.fotologboek.nl/fotografie/paddestoelen.php (32 photo’s)
Problem, each page has is own .txt wich uses for text by PHP
Greetings, Mark