David Jenkins
|
| posted on 1/11/07 at 03:09 PM |
|
|
Website question
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...
|
|
|
|
|
gingerprince
|
| posted on 1/11/07 at 03:37 PM |
|
|
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]
|
|
|
David Jenkins
|
| posted on 1/11/07 at 03:51 PM |
|
|
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
|
|
|
gingerprince
|
| posted on 1/11/07 at 03:56 PM |
|
|
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]
|
|
|
David Jenkins
|
| posted on 1/11/07 at 04:01 PM |
|
|
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.
|
|
|
gingerprince
|
| posted on 1/11/07 at 04:16 PM |
|
|
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";
?>
So imagine you create a basic static html page as you want it, including an image. You'd put everything before your <img> tag in
header.html, and everything after it in footer.html.
The above example is over-simplified, you'd want to put some checks in. For example as it stands there'd be nothing to stop someone using
your page to do something like: -
<a href="http://yoursite/showimage.php?image=http://www.dodgy.com/mywife.jpg">click here</a>
So for example you'd process the $image variable to make sure it only worked for your local images.
If you don't have php on your server you could do similar with Perl CGI script, but your link would be more like: -
<A HREF="/cgi-bin/showimage.cgi?image=selector_rev1.jpg"><IMG SRC="selector_rev1_t.jpg"></A>
[Edited on 1/11/07 by gingerprince]
|
|
|
gingerprince
|
| posted on 1/11/07 at 04:18 PM |
|
|
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();
?>
Point your browser to it, and if it serves up lots of info you're cooking on gas. If not, go read about Perl 
|
|
|
martyn_16v
|
| posted on 1/11/07 at 04:26 PM |
|
|
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 
|
|
|
David Jenkins
|
| posted on 1/11/07 at 04:33 PM |
|
|
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
|
|
|
lotustwincam
|
| posted on 1/11/07 at 08:00 PM |
|
|
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
|
|
|
