Results 1 to 10 of 10

Thread: Photo wall

  1. #1
    Join Date
    Jun 2007
    Posts
    72
    Thanks
    3
    Thanked 3 Times in 3 Posts

    Default Photo wall

    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.

  2. #2
    Join Date
    Jan 2007
    Posts
    629
    Thanks
    10
    Thanked 28 Times in 28 Posts

    Default

    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.
    Last edited by Jas; 04-05-2008 at 07:10 PM.
    --Jas
    function GreatMinds(){ return "Think Like Jas"; }
    I'm gone for a while, but in the meantime: Try using my FTP script | Fight Bot Form Submissions

  3. The Following User Says Thank You to Jas For This Useful Post:

    Cube (05-05-2008)

  4. #3
    Join Date
    Jan 2007
    Posts
    629
    Thanks
    10
    Thanked 28 Times in 28 Posts

    Default

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

    PHP Code:
    <?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$icount($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.
    Last edited by Jas; 04-05-2008 at 07:19 PM.
    --Jas
    function GreatMinds(){ return "Think Like Jas"; }
    I'm gone for a while, but in the meantime: Try using my FTP script | Fight Bot Form Submissions

  5. The Following User Says Thank You to Jas For This Useful Post:

    calumogg (04-05-2008)

  6. #4
    Join Date
    Jun 2007
    Posts
    72
    Thanks
    3
    Thanked 3 Times in 3 Posts

    Default

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

  7. #5
    Join Date
    Jun 2007
    Posts
    72
    Thanks
    3
    Thanked 3 Times in 3 Posts

    Default

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

    PHP Code:
    <?
    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?

  8. #6
    Join Date
    Jan 2007
    Posts
    629
    Thanks
    10
    Thanked 28 Times in 28 Posts

    Default

    Try
    PHP Code:
    <?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.
    Last edited by Jas; 04-05-2008 at 08:20 PM.
    --Jas
    function GreatMinds(){ return "Think Like Jas"; }
    I'm gone for a while, but in the meantime: Try using my FTP script | Fight Bot Form Submissions

  9. #7
    Join Date
    Jun 2007
    Posts
    72
    Thanks
    3
    Thanked 3 Times in 3 Posts

    Default

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

  10. #8
    Join Date
    Jan 2007
    Posts
    629
    Thanks
    10
    Thanked 28 Times in 28 Posts

    Default

    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.
    --Jas
    function GreatMinds(){ return "Think Like Jas"; }
    I'm gone for a while, but in the meantime: Try using my FTP script | Fight Bot Form Submissions

  11. #9
    Join Date
    Jun 2007
    Posts
    72
    Thanks
    3
    Thanked 3 Times in 3 Posts

    Default

    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.
    Last edited by calumogg; 04-05-2008 at 09:33 PM. Reason: Spelling was terrible!

  12. #10
    Join Date
    Jan 2007
    Posts
    629
    Thanks
    10
    Thanked 28 Times in 28 Posts

    Default

    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
    Last edited by Jas; 04-06-2008 at 03:17 AM.
    --Jas
    function GreatMinds(){ return "Think Like Jas"; }
    I'm gone for a while, but in the meantime: Try using my FTP script | Fight Bot Form Submissions

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •