Image place holder with HTML or PHP

**PCRIDE** · 06-28-2004, 01:38 PM

How can I load a photo into html or php dynamcially,

into a place holder wher the images can be changed

Ican do it with PHP and use a radomizer code

But what I am going at, I want a user to click on a thunbnail and have it load BIG into a place holder using html

**3PRIMATES** · 06-29-2004, 11:37 AM

Hi, there are a few ways of doing this, but the simplest I know of is:

PHP Code:


<html>

<head>

<title>Title here!</title>

</head>

<body>

<table>

<tr>

<td>

<?php



$image_url = $_GET['image_url'];



if(isset($image_url) && $image_url != '')

{

echo '<img src="'.urldecode($image_url).'" border="0">';

}

else

{

echo '<img src="placeholder_image.jpg" border="0">';

}

?>

</td>

</tr>

</table>

<a href="<?php echo $_SERVER['PHP_SELF'] ;?>?image_url=<?php echo urlencode('the/location/of/your/image/image.jpg') ;?>">show image</a>



<?php

/*  or if you are going to run through a loop and get the images locations from a db



$sql = mysql_query("SELECT image_url FROM yourTable") or die(mysql_error());



while($row = mysql_fetch_array($sql))

{

echo ('<a href="'.$_SERVER['PHP_SELF'].'?image_url='.urlencode($row['image_url']).'">show image</a><br>');

}





*/

?>

</body>

</html>

3P

**PCRIDE** · 06-29-2004, 02:32 PM

so I have to use a data base, I thought it would be easier than that, isn't there somethinkg that adobe uses, like a slide show template

**3PRIMATES** · 06-29-2004, 04:42 PM

Hi,
I thought you just wanted to have an image open in a specified area when you clicked on a thumbnail?

It all depends on how advanced you want to go.
If you just want to have a link to a larger image that will open in the area you specify, then you can use the code I posted, well, you would add your thumbnail image in the href where is says show image, but you know that.

If you want to go more advanced, you can have php read your images directory, loop through the directory and split out all the image names and echo a link for each image in the directory.

Then you have the upper level,which would be to use GD.

Using PHP's GD library, you could you could resize the images in a directory to your thumbnail size on the fly. You would then create a link like I showed you above and show the larger image.

You dont need a database, I just included that code in case you did.

Heres the way I would do it.

I would have an image upload area, that would upload an image to a directory, if the upload was a success, I would then insert that image name and info into a database. that way I could add other data about the image and output it as needed, i.e., captions, a story, etc.

I would then use GD and php, query the database, get all the image names and output a thumbnail for each, using something like the code I showed you to create a link from the thumbnail image...

Hope it helps.
3P

**xrobbyx** · 06-29-2004, 05:07 PM

while the solution above sounds like the most flexible, you could probably get by with just a bit of dhtml image swapping, assuming your image bank wasn't dynamic. If it is, you'd need some php to determine what images were available and to make thumbnails if you or your content management system couldn't do that for you.

check out this gallery I did for a client a while back, if it's close to what you need, it's all client side, feel free to take the code and do whatever you want with it. The only REALLY annoying limitation is that all your images need to be the same dimensions.

http://www.cranberrycreekguesthouse....o_gallery.html

if this wasn't what you were talking about, sorry, please ignore me!

**jamescover** · 06-30-2004, 03:51 AM

How can I load a photo into html or php dynamcially

into a place holder wher the images can be changed

Ican do it with PHP and use a radomizer code

But what I am going at, I want a user to click on a thunbnail and have it load BIG into a place holder using html

Sorry, I'm not quite following your explanation. Maybe, you could elaborate. I'm currently working on a script that does something like I think you are talking about. I still have to adapt it to suit an unlimited number of images though.

Below is a test page:

http://www.ekigroup.com/javascript/loadBar/final.html

The image is loaded dynamically, without being embedded in the page, by creating an image object, so that it loads into the browser cache:

var clipboard = new Image()
clipboard.src="Clipboard.jpg";

The above will load an image without embedding it via the HTML <img> tag.

You can load multiple images by creating an image array, like:

myImgs = new Array()
myImgs[0]="image1.gif";
myImgs[1]="image2.gif";
myImgs[2]="image3.gif";
myImgs[3]="image4.gif";
myImgs[4]="image5.gif";
myImgs[5]="image6.gif";

etc.

-james

Thread: Image place holder with HTML or PHP

Thread Tools

Display

Image place holder with HTML or PHP

Posting Permissions