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?

Joobs · 3 Feb 2007 at 18:11

put left padding on the div containing the text?

joeyjojo · 3 Feb 2007 at 18:15

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.

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.

joeyjojo · 4 Feb 2007 at 00:45

Will dig it out now. It's on a backup somewhere... :/

Aha

Code:

<?php
$pics = glob('images/locations/*.{jpg}', GLOB_BRACE);
$thumbs = glob('images/locations/thumbs/*.{jpg}', GLOB_BRACE);

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

Is the way I have used it here. I made a seperate thumbs folder containing the images at 100px high with the same filename. Or you can resize them on-the-fly fairly easily.

joeyjojo · 4 Feb 2007 at 01:07

Bump in case you don't notice the edit

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

joeyjojo · 4 Feb 2007 at 01:12

Stick it straight in. Extension must be .php yes.

If you don't have seperate thumbs:

Code:

<?php
$pics = glob('myimagesfolder/*.{jpg}', GLOB_BRACE);

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

Gives 100px high thumbs.

Must link to lightbox js as in their instructions.

Ie.

Code:

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

Goes in <head>...</head>

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

joeyjojo · 5 Feb 2007 at 19:06

For the spacing and border, use css. For example:

Code:

img a {
border:2px white solid;
padding:10px;
}

Gives a white border of 2 pixels and 10 pixels of padding on each side. If you have other images which are links (like navigation buttons etc.) it will do those too, in which case you will have to give your thumbs a class eg.

Code:

echo ("<a href=$pics[$i] rel=lightbox class='thumb'...

For the squashing (assuming they are not all the same ratio of width:height) you can calculate the optimum ratio fairly easily. I will have to ask blighter for the script used in the ocuk collage, that has all the tools for me to write something simple.

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.

joeyjojo · 6 Feb 2007 at 07:27

Whoops, bad advice me (I'm out of practice). What that's doing is adding a border/padding to the link (a). It needs to be a img {...} in the css, not img a { }

Or if you prefer classes, a .photo { }