how to display image files on a web page
January 26, 2005 10:01 PM Subscribe
Windows Explorer has an option to display all the image files in a folder in "filmstrip" mode, which looks like this. I want to create a similar method of display on a web page. I figure I'll have to (unfortunately) use frames to create the bottom gallery of thumbnails and have it scroll like that but I would rather not have to create a separate page for each full-size picture. I would rather the page displaying the picture be dynamic and just change the picture rather than refer the browser to a different file. I figure this could be done with some scripting language (PHP?) but I don't know much about that sort of thing. Can anyone help me out? [+]
I do plan on learning how to do this stuff on my own but for what this is going to be used for is something that's likely going to be up for public view before I get the chance to learn this on my own. Searching for scripts that do this just leads me to stuff like Gallery and other things that aren't really what I'm looking for.
I do plan on learning how to do this stuff on my own but for what this is going to be used for is something that's likely going to be up for public view before I get the chance to learn this on my own. Searching for scripts that do this just leads me to stuff like Gallery and other things that aren't really what I'm looking for.
Very easy to do in PHP, too. Try something like this: (there's probably a more elegant way, but I'm relatively new to PHP myself)
Then to link to the image, you just link to:
http://blahblah.com/blah/image.php?img=whatever.jpg (assuming you saved it as image.php, etc.)
posted by neckro23 at 10:17 PM on January 26, 2005
<html>
(html code blah blah, I'm sure you know what to do here)
<img src="<?php
// put whatever path the images are in here, trailing slash
$path = "http://blahblah.com/blah/"
import_request_variables("g", "v_");
echo $path . $v_img;
?> >
(blah blah more HTML here)
</html>
Then to link to the image, you just link to:
http://blahblah.com/blah/image.php?img=whatever.jpg (assuming you saved it as image.php, etc.)
posted by neckro23 at 10:17 PM on January 26, 2005
A quick typo correction in neckro's otherwise very helpful post: there should be a closing quotation mark after the end of the PHP code.
That is, instead of
posted by kickingtheground at 10:21 PM on January 26, 2005
That is, instead of
?> >
it should be ?>" >
posted by kickingtheground at 10:21 PM on January 26, 2005
D'oh! That's right.
Or you can just add the closing > as an echo statement: echo '">';
posted by neckro23 at 11:17 PM on January 26, 2005
Or you can just add the closing > as an echo statement: echo '">';
posted by neckro23 at 11:17 PM on January 26, 2005
folderblog (self-link) indexes the photos in a given folder and outputs them in a large-image-with-thumbs-below format. It doesn't support frames out of the box, but if you email me I'll help you work out a workaround. Might be too complicated for what you're looking for though.
Otherwise, what neckro said.
posted by rafter at 11:29 PM on January 26, 2005
Otherwise, what neckro said.
posted by rafter at 11:29 PM on January 26, 2005
It just occurred to me that you can do what you are looking for without frames, by the way, by using css overflow. It's essentially the same, but you only have to deal with one file -- in particular it would be a snap to do with a folderblog template (given that the thumbs are auto indexed and updated).
posted by rafter at 11:33 PM on January 26, 2005
posted by rafter at 11:33 PM on January 26, 2005
Alternatively, there's a PowerToy from Microsoft which does exactly what you're looking for. I don't have the link handy, but I'm sure that Google does.
posted by Jairus at 12:28 AM on January 27, 2005
posted by Jairus at 12:28 AM on January 27, 2005
Here is one simple way:
one
two
one
two
display.html?photo464.jpg
, in order to displayphoto464.jpg
Then, display.html would look something like this:
document.location.search.substring(1)
is how you can grab the query string (the part of the URL after the question mark) in javascript.posted by kickingtheground at 10:16 PM on January 26, 2005