A vertical scrollable

  <div id="actions">
    <a class="prev">&laquo; Back</a>
    <a class="next">More pictures &raquo;</a>
  </div>
 
  <!-- root element for scrollable -->
  <div class="scrollable vertical">
 
    <!-- root element for the scrollable elements -->
    <div class="items">
 
      <!-- first element. contains three rows -->
      <div>
 
        <!-- first row -->
        <div class="item">
 
          <!-- image -->
          <img src="http://path/to/my/image.jpg" />
 
          <!-- title -->
          <h3>1. Barcelona Pavilion</h3>
 
          <!-- content -->
          <p>
            The Pavilion was not only a pioneer ...
          </p>
 
        </div>
 
        <!-- 2:nd and 3:rd rows -->
        <div class="item"> ... </div>
        <div class="item"> ... </div>
 
      </div>
 
      <!-- second element with another three rows (and so on) -->
      <div>
        ...
      </div>
 
    </div>
 
  </div>

  /* root element for scrollable */
  .scrollable {
 
  /* required settings */
  position:relative;
  overflow:hidden;
 
  /*
  vertical scrollables have typically larger height than width but
  not now
  */
  height: 665px;
  width: 700px;
  }
 
  /* root element for scrollable items */
  .scrollable .items {
  position:absolute;
 
  /* this time we have very large space for the height */
  height:20000em;
  }

$(function() {
    // initialize scrollable with mousewheel support
    $(".scrollable").scrollable({ vertical: true, mousewheel: true });
});