www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 18

Thread: Image Gallery

  1. #1
    Join Date
    Apr 2003
    Location
    Rosemount, MN
    Posts
    2,287

    Image Gallery

    My neighbor is a Photographer, mostly weddings, but he also does graduation/senior, family portraits, and young children. What he wants is a photo gallery, one where he can upload the images to the server using CPannels FTP, into a certain folder. This folder will contain all of his clients photos that he had taken of them.

    He will give the client an id/password that they willl use to login to their temporary account, in this account, they can view their pictures.


    The second part, which isn't as urgent as the first part, is where the client will then be able to buy photos online. Each photo will have its own ID number, and when the choose that picture to be bought, they will be taken to a screen asking: size of photo(drop down menu), number/amount of that photo, then if they want more than one size, there would be another form asking the same thing. When the submit, it will save that information, and they can continue browsing. When they are finished browsing they will select the check out button, which will give them their total, and they can pay either: visa, mastercard, or paypal. After that, they sign out, and they are done.



    That is basically where Im headding, but first I would like to have a gallery for each client that he gets, so they can at least look at their images online.

    Part One is in this color
    Part Two is in this color
    My settings

    Browser :: FireFox 1.5
    Resolution :: 1152x864
    Connection :: Cable Modem 2Mbs

  2. #2
    Join Date
    Apr 2003
    Location
    Rosemount, MN
    Posts
    2,287
    Can someone help me, Or get me going?
    My settings

    Browser :: FireFox 1.5
    Resolution :: 1152x864
    Connection :: Cable Modem 2Mbs

  3. #3
    Join Date
    Mar 2005
    Location
    CA
    Posts
    323
    Take a look through the forums to find:
    Image Gallery
    Login System
    Shopping Cart

    and you'll find the components you need to put this thing together. Your image gallery will take the user name from the login, open up the proper folder and display the thumbnails from the folder. The shopping cart is fairly self eplanatory.
    -Anthony

  4. #4
    Join Date
    Jan 2005
    Location
    Alicante (Spain)
    Posts
    7,739
    I'd start with the site and leave a blank <div> where the gallery will go. Do the html and css layout first. Once you have done that post a link and it will be easy to see exactly what you want. Obviously the gallery will be small versions of the original photos plus thumbs. You need to think at what point will this be done. Will it be automatic etc. All the pictures should have a standard size and aspect ratio. Login system is pretty simple to. Nogdog has an outline of one on his site.

  5. #5
    Join Date
    Apr 2003
    Location
    Rosemount, MN
    Posts
    2,287
    OK, I have the site ready for the proofing page: http://www.d-top.org/mbm/proofing/index.php
    My settings

    Browser :: FireFox 1.5
    Resolution :: 1152x864
    Connection :: Cable Modem 2Mbs

  6. #6
    Join Date
    Jan 2005
    Location
    Alicante (Spain)
    Posts
    7,739
    width: 469px;
    How big are the photos going to be? Also you haven't said how the thumbs and images will be resized. When will this happen?

  7. #7
    Join Date
    Apr 2003
    Location
    Rosemount, MN
    Posts
    2,287
    OH, ok.

    There will be 2 types of images, tall ones, and long ones.
    - The portraites will be 100px wide, height?
    - The landscapes will be 100px wide, height?

    I think it would be nice if the php automatically resized the files for thumbs, so he wont have to.

    Also, there won't be a password, and Username, but it will be a "session ID#" only
    My settings

    Browser :: FireFox 1.5
    Resolution :: 1152x864
    Connection :: Cable Modem 2Mbs

  8. #8
    Join Date
    Jan 2005
    Location
    Alicante (Spain)
    Posts
    7,739
    Read this for an example of how to do the css of the gallery. Images could be resized runtime but this isn't very nice. A better way might be to have an admin script through which the images are uploaded and resized.

  9. #9
    Join Date
    Apr 2003
    Location
    Rosemount, MN
    Posts
    2,287
    Quote Originally Posted by bokeh
    [URL=http://bonrouge.com/br-fluid.php?page=gallery]A better way might be to have an admin script through which the images are uploaded and resized.
    That is what I was saying/trying to say

    The admin (my neighbor) has an admin accout, where he gets into it, and uploads his clients files, and the php script resizes them.
    My settings

    Browser :: FireFox 1.5
    Resolution :: 1152x864
    Connection :: Cable Modem 2Mbs

  10. #10
    Join Date
    Jan 2005
    Location
    Alicante (Spain)
    Posts
    7,739

  11. #11
    Join Date
    Apr 2003
    Location
    Rosemount, MN
    Posts
    2,287
    2 questions about that thread

    1. How do I place it together?
    2. will It output the file name under the image? such as 001, 002, 003, and so on...

    The file name in reality is 001.jpg, but I want it to output 001
    My settings

    Browser :: FireFox 1.5
    Resolution :: 1152x864
    Connection :: Cable Modem 2Mbs

  12. #12
    Join Date
    Jan 2005
    Location
    Alicante (Spain)
    Posts
    7,739
    Well the upload script would just confirm the files are uploaded. Maybe it could contain a DB entry about who is allowed to view which image etc. Then when a client visits you query the DB and display the relevant images. How you choose to display the info is entirely up to you. Here is a really basic version of what you are trying to create. In this case the thumbs are made dynamically on the fly from the full size images (which themselves aren't very big).
    Last edited by bokeh; 01-12-2006 at 04:19 PM.

  13. #13
    Join Date
    Apr 2003
    Location
    Rosemount, MN
    Posts
    2,287
    35 KB - 50 KB is how big the full size image will probably will be, and that is basically how I would like the files to end up looking, but more structured, where it is in a table, where all the images are horizantally aligned, and all the text is horizontally aligned, buy yeah that is how I would like it to look.
    My settings

    Browser :: FireFox 1.5
    Resolution :: 1152x864
    Connection :: Cable Modem 2Mbs

  14. #14
    Join Date
    Jan 2005
    Location
    Alicante (Spain)
    Posts
    7,739
    Here's the complete script that page is using:
    PHP Code:
    <?php
    if(isset($_GET['src'])){

    // The file
    $filename $_GET['src'];

    // Set a maximum height and width
    $width 70;
    $height 70;

    // Content type
    header('Content-type: image/jpeg');

    // Get new dimensions
    list($width_orig$height_orig) = getimagesize($filename);

    if (
    $width && ($width_orig $height_orig)) {
       
    $width = ($height $height_orig) * $width_orig;
    } else {
       
    $height = ($width $width_orig) * $height_orig;
    }

    // Resample
    $image_p imagecreatetruecolor($width$height);
    $image imagecreatefromjpeg($filename);
    imagecopyresampled($image_p$image0000$width$height$width_orig$height_orig);

    // Output
    imagejpeg($image_pnull100);

    }else{

    echo <<<END
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
         <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
         <meta name="resource-type" content="document" />
         <meta name="description" content="Thumbnails." />
         <meta name="keywords" content="Thumbnails" />
         <meta name="distribution" content="global" />
        
    <style type="text/css">
    ul#gallery {
    margin:0 auto;
    padding:0;
    list-style-type:none;
    width:80%;
    }
    ul#gallery li {
    float: left;
    margin:20px;
    height:100px;
    }
    ul#gallery li img {
    border: 0px;}
    ul#gallery li p {
    text-align: center;
    margin:5px 0;
    }
    ul#gallery li p a {
    text-decoration: none;
    color: #000;
    }
    </style>

      <title>Thumbnails</title>
    </head>

    <body>

    <ul id="gallery">

    END;

    $dir opendir($_SERVER['DOCUMENT_ROOT'] . dirname($_SERVER['PHP_SELF']));

    while (
    false !== ($file readdir($dir))) {
        if (
    eregi('.jpg{1}$'$file)){
            
    $width 70;
            
    $height 70;
            list(
    $width_orig$height_orig) = getimagesize($file);
                if (
    $width && ($width_orig $height_orig)) {
                   
    $width = ($height $height_orig) * $width_orig;
                } else {
                   
    $height = ($width $width_orig) * $height_orig;
                }
            print (
    '<li><a href="' $file '"><img src="thumbnail.php?src=' $file '" width="' round($width) . '" height="' round($height) . '" alt="" /></a><p><a href="' $file '">' str_replace('.jpg'''$file) . '</a></p></li>'"\n");
           }
       }
    closedir($dir);

    echo <<<END
    </ul>

    </body>
    </html>
    END;

    }
    ?>

  15. #15
    Join Date
    Apr 2003
    Location
    Rosemount, MN
    Posts
    2,287
    OK, I am guessing that, that script only takes the images, and resizes them to a smaller size image, am I correct? I added that to my page, and nothing happens, so that is how i came to this conclusion
    My settings

    Browser :: FireFox 1.5
    Resolution :: 1152x864
    Connection :: Cable Modem 2Mbs

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles