Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Mar 2010
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Dynamically updated table of photos

    I'm posting this in the HTML/CSS forum because I'm really not sure what other coding language might be involved in my solution. Once I figure that out, feel free to move the topic to the appropriate forum.

    I'm building an e-commerce website and I want to have a "wall" of photos showing customers with their product. I will crop every photo to one of three sizes: square, tall rectangle or long rectangle. The photos will then be Tetrised together in a table as shown in the example pic here:



    I would like to code this so that I can use a back end tool to simply upload a photo (I will make sure it is one of the three correct sizes) and the table will dynamically update, placing the new photo (#1 in the example pic) in the top left position and rearranging the other photos appropriately, moving them to the right or down to fit so that there are no gaps. The width of the table will be fixed but the height will obviously continue growing as more photos are added.

    Thanks for your time!
    Last edited by JTrainGBR83; 11-11-2011 at 05:06 PM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello JTrainGBR83,
    A normal floated layout won't work with your odd sized thumbnails. I think JQuery would be a nice solution, have a look at this - http://galleria.aino.se/themes/folio/

    Resize the brower window while looking at that demo.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    Mar 2010
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Hello JTrainGBR83,
    A normal floated layout won't work with your odd sized thumbnails. I think JQuery would be a nice solution, have a look at this - http://galleria.aino.se/themes/folio/

    Resize the brower window while looking at that demo.
    That's a neat demo. I really am not looking for the table to change based on the browser window, though. The width of the table will be fixed. The only time the table will change is when I add another photo. At that point the HTML will update and stay fixed until another photo is added.

    Just to clarify, the bottom of my example is cropped off. Pic 8 is actually the same size as 4 and 5, and 12-15 are the same 1, 2, 6, 7, etc.

  • #4
    New to the CF scene
    Join Date
    Mar 2010
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by JTrainGBR83 View Post

    Just to clarify, the bottom of my example is cropped off. Pic 8 is actually the same size as 4 and 5, and 12-15 are the same 1, 2, 6, 7, etc.
    I went ahead and changed the pic to avoid confusion. A long rectangle is twice the width of the square plus 10px to account for padding, and the tall rectangle is twice the height of the square plus 10px padding. So they should all fit nicely together in a table.

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by JTrainGBR83 View Post
    That's a neat demo. I really am not looking for the table to change based on the browser window, though. The width of the table will be fixed. The only time the table will change is when I add another photo. At that point the HTML will update and stay fixed until another photo is added.
    It won't matter that your width won't change, that JQuery will still arrange the incoming photos for you where floats would not.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    JTrainGBR83 (11-11-2011)

  • #6
    New to the CF scene
    Join Date
    Mar 2010
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    It won't matter that your width won't change, that JQuery will still arrange the incoming photos for you where floats would not.
    I'm not familiar at all with jQuery. I'm up for whatever solution will help me, though. I just want to make sure I'm clear (I may have been a little ambiguous with the use of "dynamically") that the actual HTML will be fixed. I just need it adjusted when I upload a new photo, but at all other times the table will not move or change based on the visitor.

    Using the example pic, if I uploaded a new "tall rectangle"-sized photo, the HTML would adjust to put that photo in the top left, placing 1-5 one "unit" to the right, moving 6-7 to where 8 currently is, placing 9, 10, 12-14 one unit right and moving 11 and 15 down to the next line. At this point, the table will be set and will not change at all until another photo is uploaded.

    If jQuery will work for this, and it's something that can be tackled by a novice, I'm ready to try.


  •  

    Posting Permissions

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