Auto-gallery
The PHP script below reads a directory/folder and outputs the file names (18 images) into a nice, semantically-correct, html4strict-validated list. There is another folder which has thumbnail images with the same names.
The gallery idea is not mine - I 'borrowed' it from Stu Nicholls because I think it's great. Thanks, Stu.
What I've done here - the point of this page - is automated it. The point of this is that it saves you typing out all those file-names.
At the top of the page there's a path to the top-drawer directory of this site. Just above that is my folder (thumbs72) which has the thumbnails - they're 72px wide and 54px high. For this gallery, there are 18 images in the folder. Then, there are images with the same names in a different folder. They're 500px by 375px and they're in a folder called 'thumbs500'.
In the CSS there's a 'while' loop that basically reads the names of all the files in your folder. Each time it goes through the loop, the value of the variable $i goes up one, so the names of the ids are inserted into the css - #pic1, #pic2, etc. When $i reaches 10, it adds 400px margin-top to the styles so that we can have the images at the bottom.
Further down, in the html, the same thing happens - it reads the directory, finds the names of the files and puts each one into img tags inside li tags to make a nice list. The ids are also inserted into the li tags in the same way as in the css.
You can see in the img tag part of the second loop, there's this : '/thumbs500/$file'. That inserts the big images. The big images are all loaded up, but they are shrunk to 1px dots, so you can't see them. The CSS says that on hover the images will be 500px wide (and placed absolutely in the centre there).
I think that's about it...
PHP
<?php
$dir="thumbs72/";
$path=getcwd().'/'.$dir;
$handle=opendir($path);
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CHEERS pics</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
body {
background-color:#fff;
}
ul, li {
padding:0;
list-style:none;
}
ul {
position:relative;
width:745px;
margin:auto;
background:url(cheerslogo500.jpg) 125px 70px no-repeat;
border:1px solid #ccc;
height:525px;
padding-left:5px;
}
li {
margin:5px 0;
float:left;
width:82px;
height:54px;
background-position:center center;
background-repeat:no-repeat;
}
<?php
$i=1;
while ($file=readdir($handle)) {
if (strpos($file, '.jpg')) {
echo "#pic$i {".(($i>9)? '
margin-top:400px;' :'')."
background-image:url($dir$file);
}
";
$i++;
}
}
?>
a {
display:block;
height:54px;
}
a img {
position:absolute;
top:70px;
left:125px;
width:1px;
border:0;
}
* html a:hover {
display:block;
height:53px;
}
a:hover img {
width:500px;
}
a:active img,
a:focus img {
z-index:1;
width:500px;
}
-->
</style>
</head>
<body>
<ul>
<?php
$i=1;
$handle=opendir($path);
while ($file=readdir($handle)) {
if (strpos($file, '.jpg')) {
echo "<li id=\"pic$i\"><a href=\"#n\"><img src=\"/thumbs500/$file\" alt=\"pic$i\" /></a></li>
";
$i++;
}
}
?>
</ul>
</body>
</html>
In case you're wondering, the pictures are of my school, I'm the fool in the blue shirt and the logo was designed by Ikuko.
Comments
#1 #2Hi this is a fantastic display , can you show me how to create the same gallery but using an mysql DB , and using a onclick insted of a o rolloer ?
would really make my day ,i know a lot of people who would benefit from this , i will be happy to spread the word
Lutfi,
To do that, just change the while loops to use mysql queries instead of reading the directory and remove the :hover part from the CSS.
The quality of the content of this site never ceases to amaze me. This site is awesome, and I hope you continue to share awesome code with us!
PS. It would be great if you would show us how this comment form works.
God bless,
Brian G.
Temecula, CA
I'm having lots of trouble with this gallery. I dont know much php so customizing it is getting to be a pain. What I want is for the thumbnails to line up on the left, then the large image to appear on the right. I'm gonna put the thumbnails in a scrolling div that way I can fit a whole bunch. However, I can't even get the thumbnails to show up... aye carumba.
Thanks for the tips. I finally managed to get this working. It works fine, apart from on Safari, where you can see a 1-pixel wide strip (presumably the 'hidden' images) down the left hand side of the image display area. Do you know of a fix for this small problem?
Hello - me again!
What dictates the order in which the images are displayed? I presumed it was by filename but this doesn't appear to be true. I cannot work out how to display the images in my desired order. Can you help?
Barney,
I'm afraid I'm not going to be much help here because I can't test with Safari (as I don't use a Mac) and until you just told me otherwise, I thought the files were appearing by filename too. 
Oh bugger.
Hello again. I am trying to use this system on a page with a site menu, which uses an unordered list. Even if I give my menu a unique id (such as #mainNav), the ul and li parts are affected by the css code used for the auto-gallery. How can I get round this? I treid giving the auto-gallery 'ul' its own id but I am not good enough at php to make this work properly.
Help would be appreciated.
Hi
Thought you might like to see how I implemented this script in my site. I managed to find a way round all the problems I encountered along the way.
Thanks so much for the help! Your site has proven invaluable in its help and advice.
http://www.dancrispillustration.co.uk
I love this script, exactly what I was searching for! But the order of the images does seem randomized. Does anyone have an input on that? Even Barney's site looks like the order is randomized...
Where are the css and html codes for the auto gallery?
dfend,
That's it right there - the PHP code creates most of the HTML and CSS.
Hey,
First off, this looks great and I love the layout. I have a couple questions that hopefully you can answer (they are pretty simple but im a novice at this).
1.) How do I add more photos then just the 18? I did this in the script but they didnt load on to the page.
2.) Is there a way to make it so that the thumbnails on the right and left of the page rather then the top and bottom?
I think that is all for now. Thanks in advance.
hydrochlorothiazide mechanism of action hypertension <a href="https://lisinoprildrh.com/ ">hydrochlorothiazide and diabetes</a> will hydrochlorothiazide show on drug test
i love the concept of this, very handy for allowing a client to ftp photos and let them think they're actually doing something.
seriously though, very nice.
however, i'm thinking i'm missing something somewhere. I have gone through it a couple of times, and unfortunately i'm, so far, unable to have the larger photos show other than their ALT tag on rollover.
can't figure out (with my rudimentary phpSkillset) where i've gone wrong.
i know you can't see my 'code' once it loads, but for a glimpse that might assist you in saying "hey michael, you forgot to...", here's the link:
http://www.myburg.com/downTownPhotos/
if you're still reading the posts here, thanks in advance for your help!
michael