Just a quick one (as the bishop said...)

At the moment most of the pictures on my website pages are thumbnails - when you click on one you get the full-sized image. The trouble is, when the full-sized image is displayed the viewer has to click the browser's back button to return to the previous page. This isn't very tidy, and not user friendly either.

What I'd like to do is to have a standard page into which I can put a selected image, and maybe a bit of text, without having a separate page for every picture. The standard page would have the return button, background colour and other stuff built-in so they appear ever time.

It's a long time since I've played with anything apart from vanilla HTML, so what I need are some pointers to methods and technologies that I can look up, study and maybe apply. 'Style sheet' rings a bell, so it maybe something to do with those...

Can anyone offer some clues?

David

P.S. I'm happy to do some fancy coding, if required...

I'm assuming from the tone of your message that you want to do it yourself with code rather than steal an exiting gallery "Plugin".

I redid my website recently, and created a gallery that does similar to what you want: -

For Example This

There's 2 stages to doing it. Firstly you can't do it with static html pages, you need something like cgi using perl for axample, or (preferably) php. I taught myself php to redo my website.

Then there's 2 ways to make it work. The simpler way is to have your dynamic page (whether cgi, php or whatever) take a parameter of the "current" image. The code then generates an html page on the fly which displays your image, and button href links to the "previous" and "next" image in your gallery. When they click, the page is reloaded with the new image and new links.

The main problem with this is it loads your whole page every time. Not a problem if it's basic, but if you have headers/footers etc it can slow things down. A better way is to have your page generate in the same way, but also have some javascript attached to the buttons. the javascript will then "replace" the image and link text on the fly.

You will see the difference if you look at my gallery with javascript turned on and then turned off. It still works, it's just neater with it on.


[Edited on 1/11/07 by gingerprince]

[Edited on 1/11/07 by gingerprince]

That's nice, but not quite what I'm after!

The thumbnails are in the middle of text, rather than as a slideshow - I wouldn't want to go back and forth through the images.

I'd be happy if I could say the equivalent of 'use the standard picture frame, using picture xxx.jpg and this bit of plain text'. I'm not bothered whether it applies a style sheet, or runs a script, or both together.

I am looking for something I can code myself...

cheers,
David

So if you don't want to go through each of the pictures, then how do you want to see them all??

If you click a thumbnail on mine, then you get to the picture. From there you can click prev/next and look at them all without going back to the thumbnails. Unless you want all the full size images to show at once???

It also shows a caption for each picture if I've added one - there just aren't any for that particular album

[Edited on 1/11/07 by gingerprince]

Each page has some text, with thumbnails relevant to the current subject mixed in. If the reader want to see the picture in more detail then they can click on it to get a bigger view. The idea is that they would go back to the text once they've looked at the full-size piccy.

Here's an example page

You'll see that the full-size images leave the reader in limbo, with no obvious way back - and a picture on a bare page doesn't look very pretty anyway.

Ah I see

Should be fairly straightforward. Basically at the moment the code for your thumbnail links is: -

<A HREF="selector_rev1.jpg"><IMG SRC="selector_rev1_t.jpg"></A>

Instead you would code them somthing like this (assuming you would use PHP): -

<A HREF="showimage.php?image=selector_rev1.jpg"><IMG SRC="selector_rev1_t.jpg"></A>

What this does is point to a new page showimage.php with a parameter called "image". Your code would then display whatever wrapping you want, like title, a back button etc (basic html stuff) then an <IMG> tag using your "image" parameter, then anything else you want.

An over-simplified php file would contain something like: -

code:
 

<? 

$image=$_REQUEST['image']; 

include "header.html"; 

echo "<img src="$image">"; 

include "footer.html"; 

?> 

Oh, and to see if your hoster has php support, create a file on your server, e.g. test.php and put the following in it: -

code:
 

<?php 

phpinfo(); 

?> 

How about just using target="_BLANK" to show the images in a new window?

So where you currently have
<A HREF="my_big_pic.jpg"><IMG SRC="my_thumbnail.jpg"></A>
change it to
<A HREF="my_big_pic.jpg" target="_blank"><IMG SRC="my_thumbnail.jpg"></A>

Not the flashiest way of doing it, but it'll save you a lot of piddling about

Martyn - that would still leave my readers with a picture on a blank page!

gingerprince - I'll try the PHP thing - that's pretty much the sort of thing I'm after.

cheers,
David

I haven't actually read all the posts above.

However you might find the following free program useful. Loads of skins, easily customizable, and makes creating thumbnails quick and easy.

Link below

Jalbum