vertically scrollable image gallery

Question

I was going through this tutorial about designing a vertically scrollable image gallery.

http://flowplayer.org/tools/demos/scrollable/vertical.html

Now can anyone explain me how to change these setting such that i can have more than 3 rows in a single page. Or can anyone show me a tutorial where such a vertical image gallery as been made.

Thanks in advance for help.

Answer 1

changing the height of the container did the trick.

carzy demo

.vertical {  

    /* required settings */
    position:relative;
    overflow:hidden;    

    /* vertical scrollers have typically larger height than width */    
    height: 886px;  /* original height:665px; */
    width: 700px;
    border-top:1px solid #ddd;    
}

Answer 2

Hey it is not a dark art, they are using fixed height:665px and overflow:hidden for the parent container. It allows all of contents that are NOT fitting into it to be hidden. Just Increase height of the parent container to accommodate more contents (in this case they are images).

//vertical is the class of parent container in the example you provided.
.vertical {
    border-top:1px solid #DDDDDD;
    height:665px; // just increase it for showing more images.
    overflow:hidden; //causing images to hide.
    position:relative;
    width:700px;
 } 

Working Example showing just two images

Working Example showing four images

Working Example showing fiveimages

Answer 3

For the Example on the Page itself: just put 4 Divs instead of 3 in the Wrapper and increase the height of ".vertical" accordingly. Its not a Setup Issue of the Plugin but how you make the Markup.