jQuery Vertical Scrollable has 4 elements in total and each element has 3 rows that are shown at a time. You can scroll these elements by:
- Clicking on the "more pictures" link.
- Using the up and down arrow keys.
- Using your mousewheel.
HTML
<!-- HTML structures -->
<div id="actions">
<a class="prev"><b>« Back</b></a>
<a class="next"><b>More pictures »</b></a>
</div>
<!-- root element for scrollable -->
<div class="scrollable vertical">
<!-- root element for the items -->
<div class="items">
<div>
<div class="item">
<img src="images/pic-01.jpg" />
<h3>1. Lorem Ipsum</h3>
<b>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some.</b>
<p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets.</p>
<p><a href="#">Read more</a> <a href="#">Show in map</a></p>
</div>
<div class="item">
<img src="images/pic-02.jpg" />
<h3>2. Lorem Ipsum</h3>
<b>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some.</b>
<p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets.</p>
<p><a href="#">Read more</a> <a href="#">Show in map</a>
</p>
</div>
<div class="item">
<img src="images/pic-03.jpg" />
<h3>3. Lorem Ipsum</h3>
<b>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some.</b>
<p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets .</p>
<p>
<a href="#">Read more</a> <a href="#">Show in map</a>
</p>
</div>
</div>
<!-- next page -->
<div>
<div class="item">
<img src="images/pic-04.jpg" />
<h3>4. Lorem Ipsum</h3>
<b>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some.</b>
<p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets .</p>
<p>
<a href="#">Read more</a> <a href="#">Show in map</a>
</p>
</div>
<div class="item">
<img src="images/pic-05.jpg" />
<h3>5. Lorem Ipsum</h3>
<b>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some.</b>
<p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets .</p>
<p><a href="#">Read more</a> <a href="#">Show in map</a></p>
</div>
<div class="item">
<img src="images/pic-06.jpg" />
<h3>6. Lorem Ipsum</h3>
<b>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some.</b>
<p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets .</p>
<p><a href="#">Read more</a> <a href="#">Show in map</a>
</p>
</div>
</div>
<!-- next page -->
<div>
<div class="item">
<img src="images/pic-07.jpg" />
<h3>7. Lorem Ipsum</h3>
<b>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some.</b>
<p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets.</p>
<p><a href="#">Read more</a> <a href="#">Show in map</a>
</p>
</div>
<div class="item">
<img src="images/pic-08.jpg" />
<h3>8. Lorem Ipsum</h3>
<b>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some.</b>
<p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets .</p>
<p><a href="#">Read more</a> <a href="#">Show in map</a>
</p>
</div>
<div class="item">
<img src="images/pic-09.jpg" />
<h3>9. Lorem Ipsum</h3>
<b>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some.</b>
<p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets .</p>
<p><a href="#">Read more</a> <a href="#">Show in map</a></p>
</div>
</div>
<!-- next page -->
<div>
<div class="item">
<img src="images/pic-10.jpg" />
<h3>10. Lorem Ipsum</h3>
<b>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some.</b>
<p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets .</p>
<p><a href="#">Read more</a> <a href="#">Show in map</a></p>
</div>
<div class="item">
<img src="images/pic-11.jpg" />
<h3>11. Lorem Ipsum</h3>
<b>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some.</b>
<p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets .</p>
<p><a href="#">Read more</a> <a href="#">Show in map</a></p>
</div>
<div class="item">
<img src="images/pic-12.jpg" />
<h3>12. Lorem Ipsum</h3>
<b>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some.</b>
<p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets.</p>
<p><a href="#">Read more</a> <a href="#">Show in map</a>
</p>
</div>
</div>
</div>
</div>
CSS
/* root element for scrollable */
.vertical {
/* required settings */
position:relative;
overflow:hidden;
/* vertical scrollers have typically larger height than width */
height: 665px;
width: 700px;
border-top:1px solid #ddd;
}
/* root element for scrollable items */
.items {
position:absolute;
/* this time we have very large space for height */
height:20000em;
margin: 0px;
}
/* single scrollable item */
.item {
border-bottom:1px solid #ddd;
margin:10px 0;
padding:15px;
font-size:12px;
height:120px;
}
/* elements inside single item */
.item img {
float:left;
margin-right:20px;
height:117px;
width:169px;
}
.item h3 {
margin:0 0 5px 0;
font-size:16px;
color:#456;
font-weight:normal;
}
/* the action buttons above the scrollable */
#actions {
width:700px;
margin:30px 0 10px 0;
}
#actions a {
font-size:11px;
cursor:pointer;
color:#666;
}
#actions a:hover {
text-decoration:underline;
color:#000;
}
.disabled {
visibility:hidden;
}
.next {
float:right;
}
JavaScript
$(function() {
$(".scrollable").scrollable({ vertical: true, mousewheel: true });
});
jquery.tools.min.js
Click to Download
Example
Click to DEMO
0 comments:
Post a Comment