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.
posted by DyRE to Computers & Internet (14 answers total) 1 user marked this as a favorite
 
Best answer: You don't even need to use PHP, or anything fancy (although that's certainly an option). You can do this in plain old javascript. Here's one way: make the links point to, say display.html?photo464.jpg, in order to display photo464.jpg

Then, display.html would look something like this:

<html>
<head><title>PageTitle</title></head>
<body>
<script type="text/javascript">
document.write('<img src="'+document.location.search.substring(1)+'" />');
</script>
</body>
</html>
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


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)

<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 ?> > 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


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


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


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


Here is one simple way:






one
two


posted by SNACKeR at 5:09 AM on January 27, 2005


odd, it posted my HTML
posted by SNACKeR at 5:12 AM on January 27, 2005


<html>
<body>
<img id=img1 height=100>
<br>
<span onclick="document.getElementById('img1').src='cheese.jpg'">one</span>
<span onclick="document.getElementById('img1').src='fluffy.jpg'">two</span>
</body>
</html>
posted by SNACKeR at 5:12 AM on January 27, 2005


I've been using a little script i found on hotscripts. it puts thumbnails on the side - it has admin comments and uploading, and its pretty small... you might like it ...
self-link to a sample page and the script is here.
posted by 31d1 at 6:56 AM on January 27, 2005


Another good option is ImageGal, which uses JavaScript, CSS, and DHTML (but you don't need to know all of that). It's free. The script is ready to go out of the box... You just upload the photos, thumbnails, index.php, a stylesheet, and one html template. Everything other than the pictures is done, requiring only minor edits. If you know your way around CSS, it's very flexible too.

The demo site shows what it looks like with no tweaking. Here's a recent gallery of mine (obviously a self link) that I customized a bit.
posted by jewishbuddha at 8:16 AM on January 27, 2005


(I know some people here dislike it, but) Flash could do this really well.
posted by grumblebee at 8:43 AM on January 27, 2005


Response by poster: Thanks a bunch, everyone! I'm going to try out the different methods you've recommended and see which one I end up using for this. Hooray for AskMeFi.
posted by DyRE at 12:59 AM on January 29, 2005


« Older Blog software where I can edit the post dates.   |   CD Hidden Track Encoding Newer »
This thread is closed to new comments.


Tags

Share