www.webdeveloper.com
Results 1 to 5 of 5

Thread: Building vertical scrolling portfolio

  1. #1
    Join Date
    Jan 2013
    Posts
    3

    Building vertical scrolling portfolio

    I am trying to build an image portfolio that scrolls vertically, with 5 images in each row. As of now, each image has a width of 188px, with a 15px gap between each image. Totals to 1000px, the width of the container. So far this is working, but I have to make it so that each image will align itself to the image above it. It is very hard to explain, so here is a picture: http://i45.tinypic.com/1eq6o2.png

    Here's the code as of now:
    HTML Code:
    <div class="photos">
    	<img src="pics/pic1.jpg" />
    	<img src="pics/pic4.jpg" />
    	<img src="pics/pic2.jpg" />
    	<img src="pics/pic4.jpg" />
    	<img src="pics/pic3.jpg" />
    	<img src="pics/pic2.jpg" />
    	<img src="pics/pic3.jpg" />
    	<img src="pics/pic4.jpg" />
    	<img src="pics/pic1.jpg" />
    	<img src="pics/pic2.jpg" />
    </div>
    CSS:
    Code:
    .photos img:nth-child(5n) {  
    	margin:0 0px 15px 0;
    	padding:0;
    }
    
    .photos img {
    	margin:0 15px 15px 0;
    	padding:0;
    	width:188px;
    	float:left;
    }
    If you could help me out, I would really appreciate it. Thanks!

  2. #2
    Join Date
    Dec 2012
    Posts
    159
    Try doing it using floated columns.

    Code:
    <div class="photos">
            <div class="col">
    	       <img src="pics/pic1.jpg" />
                   <img src="pics/pic2.jpg" />
            </div>
            <div class="col">
    	       <img src="pics/pic4.jpg" />
                   <img src="pics/pic3.jpg" />
            </div>
            <div class="col">
    	       <img src="pics/pic2.jpg" />
                   <img src="pics/pic4.jpg" />
            </div>
            <div class="col">
    	       <img src="pics/pic4.jpg" />
                   <img src="pics/pic1.jpg" />
            </div>
            <div class="col">
    	       <img src="pics/pic3.jpg" />
                   <img src="pics/pic2.jpg" />
            </div>
    </div>
    Code:
    .photos .col {
    	margin:0 15px 0px 0;
    	padding:0;
    	width:188px;
    	float:left;
    }
    .photos .col img {
    	margin: 0 0 15px 0;
    }
    .photos .col:nth-child(5) {
    	margin:0;
    }

  3. #3
    Join Date
    Jan 2013
    Posts
    3
    Thanks for that suggestion, it works well. Now I'm trying to go about making a system in php to automatically add the photos, which would include adding the height of all of the photos in the column to find the shortest one, so that an image will be added to that column.

    Any help with this would be appreciated too, but I might be able to do it by myself.

  4. #4
    Join Date
    Jan 2013
    Posts
    3
    Thanks for that suggestion, it works well. Now I'm trying to go about making a system in php to automatically add the photos, which would include adding the height of all of the photos in the column to find the shortest one, so that an image will be added to that column.

    Any help with this would be appreciated too, but I might be able to do it by myself.

  5. #5
    Join Date
    Nov 2012
    Posts
    2
    one page portfolios are great for a few reasons:

    The user can focus on the work and not the site interface. in other words, if i'm looking at a one page portfolio, i just need to click and hold the scrollbar, then move down at my leisure. there's no learning curve because the interface being handled belongs to the native browser and not the site.
    very quickly, the user can understand what style(s) the artist specializes in
    typically, one page folios are easier to manage and maintain than multipage folios. this encourages the artist to keep the folio current.
    it reminds the designer that the portfolio is about showing off their work, not showing off the portfolio itself. the work isn't hiding behind a (typically crappy) site interface.

    i also think there's a misconception about the "above the fold" concept. in particular, i think too many people equate "above the fold" with images to "above the fold" with text. the time it takes to absorb a screenful of images is significantly less than a screenful of text.

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