Photo wall

[calumogg]

Hi all, I really need some help on this one, it might be javascript based though, if it is I apologies in advance.
I am trying to build a page that will load all photos from a database and display them (that bit I can do) but I need the photos to be displayed like the example page here: http://babiedanni.piczo.com/?g=7859668&cr=3

If anyone knows how this is done or can point me in the right direction it would be greatly appreciated.

[Jas]

You can use PHP and CSS to create this effect. The easiest way that I can think of is something like:

Edit: See the next post

Something like that, perhaps? I don't know if that code actually works, but it's an example anyway.
($image_width and $image_height are guesses as to how big the average image is. They need not, and should not, be exact for the effect. You may also want to use rand() for the z-index rather then $i+1, but for the sake of simplicity, that's what I used.)

You can also use the rand() function to change the size of the pics. If you do that, I recomend setting the img tag to 100% width and height, and then put the randomly generated width and hieght in the div, but that's just me.

[Jas]

Okay, finally got to a computer with PHP on it. This code works pretty close to the page you linked to:

<?php

echo '<p>Script by Jason Mace</p><div style="position:relative;">';

$images = array('1.jpg','2.jpg','3.jpg','4.jpg'); 

$image_width = 152; 
$image_height = 142; 
$number_in_row = 6; 

$y = -$image_height; 
$x = 0;

for($i=0; $i< count($images); $i++){ 
    $z_index = rand(1,100); 

    if(is_int($i/$number_in_row)){ 
        $y += $image_height; 
        $x = 0; 
    }else{ 
        $x = $x + $image_width; 
    } 

    $width = rand(150,190);
    $height = rand(140,170);


    echo '<div style="position:absolute;left:'.$x.'px;top:'.$y.'px;z-index:'.$z_index.';width:'.$width.'px;height:'.$height.'px;"><image src="'.$images[$i].'" style="width:100%;height:100%;" /></div>'; 
}

echo '</div>';

?>

If you use this script, leave my name at the top. Otherwise, use it only as an example.

[calumogg]

Thanks very much for your help, it is much appreciated.

[calumogg]

Just one more question, what would need to be changed to get the images from a MySQL query I have got this far:

<?
echo '<div style="position:relative;">';

$query  = "SELECT * FROM pictures WHERE category='l' ORDER BY filename DESC";
$result = mysql_query($query) or die('Error, query failed');
$count=mysql_num_rows($result);

$number_in_row = 6; 

while ($row = mysql_fetch_assoc($result)) {
$filename = $row['filename'];

list($image_width, $image_height) = getimagesize("../pictures/thumbs/$filename");

$y = -$image_height; 
$x = 0;

for($i=0; $i<$count; $i++){ 
    $z_index = rand(1,100); 

    if(is_int($i/$number_in_row)){ 
        $y += $image_height; 
        $x = 0; 
    }else{ 
        $x = $x + $image_width; 
    } 

    $width = $image_width;
    $height = $image_height;
    

    echo '<a href="' . $row['large'] . '"  id="mb' . $count . '" class="mb" title="' . $row['filename'] . '">';
    echo '<div style="position:absolute;left:'.$x.'px;top:'.$y.'px;z-index:'.$z_index.';width:'.$width.'px;height:'.$height.'px;">';
    echo "<image src='" . $row['thumb'] . "' style='width:100%;height:100%;' /></a></div>";
    echo '<div class="multiBoxDesc mb' . $count . '">';
    echo '</div>';

}}

echo '<p>Script by Jason Mace</p></div>'; 


?>

But it is displaying all the pictures more than once?

[Jas]

Try

<?php

echo '<p>Script by Jason Mace</p><div style="position:relative;">';

$query  = "SELECT * FROM pictures WHERE category='l' ORDER BY filename DESC";
$result = mysql_query($query) or die('Error, query failed');
$count=mysql_num_rows($result);

$number_in_row = 6; 

$y = -$image_height; 
$x = 0;
$i = 0;

while ($row = mysql_fetch_assoc($result)) {
    list($image_width, $image_height) = getimagesize("../pictures/thumbs/$filename"); 

    $filename = $row['filename'];

    $z_index = rand(1,100); 

    if(is_int($i/$number_in_row) and $i != 0){ 
        $y += $image_height; 
        $x = 0; 
    }else{ 
        $x = $x + $image_width; 
    } 

    $width = $image_width;
    $height = $image_height;
    

    echo '<a href="' . $row['large'] . '"  id="mb' . $count . '" class="mb" title="' . $row['filename'] . '">';
    echo '<div style="position:absolute;left:'.$x.'px;top:'.$y.'px;z-index:'.$z_index.';width:'.$width.'px;height:'.$height.'px;">';
    echo "<image src='" . $row['thumb'] . "' style='width:100%;height:100%;' /></a></div>";
    echo '<div class="multiBoxDesc mb' . $count . '">';
    echo '</div>';
    $i++;
}

echo '</div>'; 


?>

Keep my name at the TOP of the script, as it won't show up on the bottom. If you want it at the bottom, then you will have to tweak it so that it shows up.

[calumogg]

Thanks very much, and this time I'll leave your name at the top!

[Jas]

lol. It would be appreciated.
(Don't mean to sound rude about it, but the script overlays any content underneath at the moment-- so if it's on the bottom, it may as well not be there. If you want it someplace else, you can, but you would have to make it show up.)

And be sure you get the last edit of my previous post. I made some changes to make it work better. I don't know if you got it after the edit or not.

[calumogg]

I didnt realise that it wouldn't show up at the bottom, sorry.

Is there anyway to stop it overlaying everything? Because I am using it on this page: Here
and as you can see it is not staying inside the table, also the images are connected to a lightbox scrip but the lightbox is loading behind the pictures.

[Jas]

The lightbox issue is no doubt because the z-index ranges from 1-100 in the php script. You'll need to lower that and/or change the z-index in the lightbox script. (I've search through your JS files, and I can't find the z-index setting. Maybe you'll have better luck?)

As for the rest-- Yikes! That's weird.

I think there is something wrong with your PHP script. Post the php source or PM it to me and I'll see what I can do. The problem, as far as I can see it, is that the place where the images are starting from is incorrect (the first image is showing up 200px left rather then 0; the top/y position looks correct, though).

EDIT: and thanks for putting my name there. It doesn't have to be that conspicuous, though. Thank you