displaying pictures on a site

wagnj1 · Feb 21, 2005

hello
I'm in the process of building my website. I'm using apache/php and would like to find a good way of displaying pictures, as in a photo album, not just graphics on the site. right now I just have a link on my main page to another page on my site that lists all of the pictures as hyperlinks, which you can then click on to bring up the picture. what I want is something more fancy that will bring up the pictures in a really cool way...does anyone know of a cool method of doing this? I could use frames I guess, have a left frame displaying the available pictures ot view and when you click on them they display in the right frame, but haha thats still not cool enough. what would be cool is if I had like a blank polaroid on the main part of the page and you could just click on the test for a picture and it would get displayed in the polaroid...how would I do something like that?

Bastien · Feb 21, 2005

This is not really a php question. But you could use an IFrame to 'show' the empty 'polaroid' (that part is all graphics) and then fill the clicked image to the blank area in the 'polariod'

Which method are you using to retrieve the image(s)? Are you roundtripping it to the server each time the thumbnail image is clicked? Or sending down all the images in a page (then you could use layers to 'store' the image and hide n show theimage

Bastien

I wish my computer would do what I want it to do,
instead of what I tell it to do...

wagnj1 · Feb 21, 2005

thanks for the reply...and yah I know its not really a PHP question but I figured since I'm using PHP there might be a better solution to my problem using it.

I'll be roundtripping to the server upon each click on a picture link.

regarding using layers to store the pictures on the page...that will make the page take longer to load initially, correct? but it should take less time to display a picture that is already loaded onto the page? I guess I could resize the photos to fit inside the picture part of the polaroid and then have them just display that way...but will I have problems with getting the pictures to display in the correct spots using different browsers?

i3iz · Feb 22, 2005

I keep the image locations in a database to be easily organized. In this page, i call it index.php and i have a slide frame that goes around the images. It adds a cool touch. I know there is a better way to do this, and that is with thumb nails, instead of resizing the image, but i am still learning $_file()

The CSS ought to give you what you need, as well as the php for drawing from a database.

<html>
<head>
<title> Gallery</title>
<style type="text/css">
body {background: #fff; margin: 1em; background-image:url(../images/ssbg_2.gif)}
div#footer {clear: both; padding-top: 3em;
font: 85% Verdana, sans-serif;}
div.pic {float: left; height: 130px; width: 130px;
padding: 15px; margin: 5px 3px;
background: url(/images/frame-ls.gif) center no-repeat;}
div.pt {background-image: url(frame-pt.gif);}
div.pic img {border: 1px solid; border-color: #444 #AAA #AAA #444;}
div.ls img {height: 96px; width: 128px; margin: 16px 0 0;}
div.pt img {height: 128px; width: 96px; margin: 0 16px;}
div.pt ul {display: block;}
div.pic ul {margin: 0; padding: 0;}
li.price, li.catno {display: none;}
li.title {list-style: none; text-align: center; color: #333333;
font: bold 9px Verdana, sans-serif; margin: 2px 15px;}
.style1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
</style>
</head>
<body>
<span class="title style1">Warning! This page contains large files and may take a while to load on a dial up connection.<br>
Click an image to view a larger version.</span><br>
<?php
$result = mysql_query('SELECT * FROM gallery ORDER BY id DESC LIMIT 12');

?>
<?
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
?>
<div class="pic <? echo $row['orientation'] ?>"><a href="<? echo $row['img_location'] ?>" class="tn"><img src="<? echo $row['img_location'] ?>"></a><ul>
<li class="title"><? echo $row['name'] ?></li>
</ul></div>
<? } ?>
</body>
</html>

--i3iz
Technical Newbie

Olavxxx · Feb 23, 2005

Hi!
Remember one thing about images in database:
it's not recommended using filenames like 000001.jpg
They will not be very well indexed by google!

I made this mistake!! I should rather have stripped away any chars other than a-z, 0-9 and then append a unique_id, if the filename is_file().

eg.:
foobar.jpg is uploaded
when trying to upload foo bar?```.jpg, it first removes strange symbols, so it becomes:
foobar.jpg

but, foobar.jpg is already there, so it runs a loop, while is_file($file)
and appends an id to the $file..

eg.: foobar01.jpg

I know this is not exactly what you asked for, but I think it's important to mention! (naming conventions).

as google will only index the filenames, on imagesearches! The ALT in the <img> does not help! (been there, done that).

as for the image-browsing, look at this:

http://amalie/byarkivet_/ekstern/waldemar_jorgensen/waldemar_hovedside.html

it's very hard to mantain that site, since it's a gallery site and static!

with php, it's much easier though, if you have mysql backend.

Olav Alexander Mjelde

http://www.volvo-power.net

Admin & Webmaster

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

displaying pictures on a site

wagnj1

Programmer

Bastien

Programmer

wagnj1

Programmer

i3iz

Technical User

Olavxxx

Programmer

Similar threads

Part and Inventory Search

Sponsor