Flash images?

Amp34 · 2 Feb 2007 at 16:28

I want some photos on my website to become larger once clicked, without going to a new page. Such as the backround fading and the image being larger in the middle. I assume it may be flash but I dont know, anyone know of any websites or code that will do this for me?

I am also interested in finding a piece of gallery software like simple viewer but which increases the image size once you click on the big image (using the same process as above), as well as being integrated into an existing page design.

I am looking around but any directions would be appreciated.

Thanks

Amp34 · 2 Feb 2007 at 20:34

I found lightbox which is exactly what I wanted, but I am still looking for a gallery if people have any suggestions.

Also perhaps a stupid question but how do I force text away from the borders of a site automatically without having to p.leftmargin everything?

Amp34 · 3 Feb 2007 at 20:01

joeyjojo said:
Gallery is best done custom. It's very simple really - php reads a folder or database and prints links to lightbox. I have code as an example if you like.

Yes please.

Amp34 · 4 Feb 2007 at 01:10

So do I stick that in a seperate file and link to the file in the body or do I just insert that straight into the gallery page? :confused:

If so does the page have to be php as well?

Thanks

Amp34 · 4 Feb 2007 at 01:15

Thanks dude, I'll try it now and see what happens.

Amp34 · 5 Feb 2007 at 18:04

That code works great but I have just a couple of questions about modifying it.

1. How did you create spaces between the images? At the moment my images are right against each other.

2. I want all my thumbs to be square so added an extra width='100' to the height, the problem is they squash the images. Is there an easy way of stopping them getting squashed and just centring the image?

And another more general question, is there any way to change the border round the link images from the standard blue to a different colour?

Thanks

Amp34 · 6 Feb 2007 at 01:50

Ok I'm still having some issues with the borders.

Adding the css doesn't work the way it should, the boarders don't are at the edge of the padding and the dlue will not change no matter what I do. I also cant seem to get padding to work above and below images... :confused:

Code:

a.photo:link, a.photo:visited, a.photo:active, a.photo:hover{
padding: 20px;
border:1px #333333 solid;
}

										/*links*/
a:link {
	color:#333333;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color:#333333;
}
a:hover {
	text-decoration: underline;
	color: #333333;
}
a:active {
	text-decoration: none;
}

Code:

      <div id="writing">
	  <?php
$pics = glob('images/gallery/images/*.{jpg}', GLOB_BRACE);
$thumbs = glob('images/gallery/thumbs/*.{jpg}', GLOB_BRACE);

for ($i=0; $i < count($pics); $i++){
echo ("<a href=$pics[$i] rel=lightbox class='photo'><img src='$thumbs[$i]'></a>");
}
?>
      </div>

http://www.games-system.co.uk/photo.php

There is probably something really simple i have missed but I'm getting techy and am going to have to leave that bit for a while.

And for the squashing, yes the images are different shapes. What I would like is something to center a box on the image (cropping it into a square) for the thumbs.

Sorry to be such a bother.