Switch between multiple images

[Pirate_King]

Hey there,

I'm working on putting together a webcomic.

File structure:

Root
top.html
bottom.html
index.php
comics.php
images
Series1
|2-AComputer.png
2-AComputer_LARGE.png
10-Glasses.png
10-Glasses_LARGE.png

I just want one comics.php page to navigate through all of the comics.

I basically want the comics.php page to look like this:

Links in red, text in black, images in blue.

A Computer
Glasses

Image

Click here for larger version of image.

I would like it so that any time A Computer or Glasses would be clicked, both the image and the link for 'click here' would change accordingly, but the links to different comics would still be retained.

Thanks very much in advance!

[Ashley_Sheridan]

This should help:

First, change the links so they point to "comics.php?comic=_2-AComputer" changing the last part as necessary for each comic. It should be the name of the main image but without the '.png' part.

The PHP code for the image should look something like this:

print "<img src=\"{$_GET['comic']}.png\"/>";

And the link below that to show the larger image:

print "<a href=\"{$_GET['comic']}_LARGE.png\" target=\"_blank\">view larger version of image</a>";

I added the target so it opens in a new window, and took out the click here bit, as that is very bad form to use in general, as the link ends up with no context.

[Pirate_King]

Dude you are sweet.

Thank-you so much. =)

You put it in very simple to understand terms, and made the code easy to replace with other links so I can use that for all different comics.

Is there something I can add in the image so that by default it doesn't have 'broken link' image, and instead display one that I can choose?

[Ashley_Sheridan]

Well, you could do this:

$comic = (isset($_GET['comic']))?$_GET['comic']:'defaultimage';
print "<img src=\"$comic.png\"/>"; 

Note i've changed the image line here to use a different variable. The first line will use 'defaultimage' (no extension as that is in the print statement) if no comic has been selected.

[Pirate_King]

Wow, once again, thank-you so much!

It was very easy to apply to my web-page and will definitely be a very useful tool!

[NogDog]

You might want to add a check to see if the file exists, and if not, use a default image. Also, to stop malicious users from trying to manipulate the URL to access other directories/files, I would use [man]basename[/man] to filter the input.

$comic = (isset($_GET['comic'])) ? basename(trim($_GET['comic'])) : 'default';
if(!file_exists($_SERVER['DOCUMENT_ROOT'] . '/comics/' . $comic . '.png')
{
   $comic = 'default';
}
echo "<img src='/comics/$comic.png' alt='' />";

[Ashley_Sheridan]

That's a good idea, I hadn't actually thought of that at the time. I tend to use reference-based IDs for similar sort of things, but I didn't want to make it too complicated.

[NogDog]

Yeah, usually I'd be passing a DB primary key integer, so would cast the GET value via b[/b] to ensure from that point on I was passing an integer around.

[Pirate_King]

Gee, thanks a lot for your help. =)

I tried NogDog's code and it said there was an error on the "{ " line.

[NogDog]

I left out the final ")" at the end of the if condition.