|
|
Posted by Jonathan N. Little on 04/24/07 20:13
Jim S wrote:
> On Tue, 24 Apr 2007 13:14:51 -0400, Jonathan N. Little wrote:
> Thanks, but you have lost me already.
> I didn't know whether that is one page to create *links* from thumbnails in
> a folder called thumbs to a folder called photos OR to 'create' thumbnails
> from photos.
> You can tell from my site that html and a little css is my limit so far.
> Thanks for trying.
Well you *would* have to do a little research on PHP but it is not too
difficult.
For example a simple deployment would be to create a folder for each
photo category
/boats
/trees
/widets
Then in each category folder create two subfolders "thumbs" & "photos"
For each image in the category create two images with the *same name*,
the full size which you put in the respective "photos" folder and one
reduced in the "thumbs". I would make the thumbnails all the same width,
in my example 50px work will, change the style to adjust.
Then in each category folder create an "index.php" from the cut and
paste code below.
#### START of index.php ####
<?php
$thumbfolder="./thumbs"; //just example change as reqd
$imagefolder="./photos"; //just example change as reqd
$thumbs='<div id="thumbIndex">Image Index<ul>';
$me=htmlentities($_SERVER['PHP_SELF']); // prevent XSS insertion
if ($handle = opendir($thumbfolder)) {
while (false !== ($file = readdir($handle))) {
if ($file != "." && $file != "..") {
$thumbs .= "<li><a href=\"$me?big=$file\"><img
src=\"$thumbfolder/$file\" alt=\"$file\"></a></li>\n";
}
}
closedir($handle);
$thumbs .= "</ul>\n</div>\n";
$big="<p>[No Picture selected]</p>";
if(isset($_GET['big'])){
$biggy=$_GET['big'];
$big="<div><img src=\"$imagefolder/$biggy\" alt=\"$biggy\"></div>";
}
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en-us">
<title>Auto Thumbnailer</title>
<style type="text/css">
BODY {
margin: 1em 1em 1em 7em; padding: 0;
color: #000; background-color: #def;
}
#thumbIndex {
position: absolute;
width: 6em; height: 100%; overflow: auto;
left: 0; top: 0;
color: #fff; background-color: #008;
text-align: center;
}
#thumbIndex UL { list-style: none; margin: 0; padding: 0; }
#thumbIndex LI { margin: 0; padding: 0; }
/* adjust for printing */
@media print{
BODY { margin: 1em; }
#thumbIndex {display: none;}
}
</style>
</head>
<body>
<!-- basically this is just plain html except for 2 PHP inserts -->
<?php
//inserts the thumb index
echo $thumbs;
?>
<h1>My Images</h1>
<?php
//inserts the big photo
echo $big;
?>
<!-- link back to home -->
<p>Go back to <a href="/">Home</a>.</p>
</body>
</html>
#### END START of index.php ####
So the url to see your "boat" photos would be
"http://www.example.com/boats"
or widgets would be
"http://www.example.com/widgets"
to add an image to the category just add the thumbnail and image to the
respective folders and the index.php will automatically add to the index
with no html editing required. The only time you would need to edit a
page is your home page when you add a category.
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
[Back to original message]
|