SCROLLABLE - jQuery TOOLS
縦スクロール
ここでは、縦スクロールの設定を示しています。最小限の設定に比較すると マイナーな変更をしていますので、これを続ける前に、最初のデモを学習するようお勧めします。 このスクロールは、合計で4つの要素を持っており、各要素は同時に表示する3つの行からなっています。 要素は、次によりスクロールすることができます:
- "他の写真" のリンクをクリックする。
- 上または下矢印キーを押す。
- マウスホイールを使用する。
1. バルセロナ・パビリオン
The German Pavilion in Barcelona, designed by Ludwig Mies van der Rohe and built for the International Exposition in 1929.The Pavilion was not only a pioneer for construction forms with a fresh, disciplined understanding of space, but also for modeling new opportunities for an exciting association of free art and architecture.
2. バルセロナ・パビリオン
The German Pavilion in Barcelona, designed by Ludwig Mies van der Rohe and built for the International Exposition in 1929.The Pavilion was not only a pioneer for construction forms with a fresh, disciplined understanding of space, but also for modeling new opportunities for an exciting association of free art and architecture.
3. バルセロナ・パビリオン
The German Pavilion in Barcelona, designed by Ludwig Mies van der Rohe and built for the International Exposition in 1929.The Pavilion was not only a pioneer for construction forms with a fresh, disciplined understanding of space, but also for modeling new opportunities for an exciting association of free art and architecture.
4. バルセロナ・パビリオン
The German Pavilion in Barcelona, designed by Ludwig Mies van der Rohe and built for the International Exposition in 1929.The Pavilion was not only a pioneer for construction forms with a fresh, disciplined understanding of space, but also for modeling new opportunities for an exciting association of free art and architecture.
5. バルセロナ・パビリオン
The German Pavilion in Barcelona, designed by Ludwig Mies van der Rohe and built for the International Exposition in 1929.The Pavilion was not only a pioneer for construction forms with a fresh, disciplined understanding of space, but also for modeling new opportunities for an exciting association of free art and architecture.
6. バルセロナ・パビリオン
The German Pavilion in Barcelona, designed by Ludwig Mies van der Rohe and built for the International Exposition in 1929.The Pavilion was not only a pioneer for construction forms with a fresh, disciplined understanding of space, but also for modeling new opportunities for an exciting association of free art and architecture.
7. バルセロナ・パビリオン
The German Pavilion in Barcelona, designed by Ludwig Mies van der Rohe and built for the International Exposition in 1929.The Pavilion was not only a pioneer for construction forms with a fresh, disciplined understanding of space, but also for modeling new opportunities for an exciting association of free art and architecture.
8. バルセロナ・パビリオン
The German Pavilion in Barcelona, designed by Ludwig Mies van der Rohe and built for the International Exposition in 1929.The Pavilion was not only a pioneer for construction forms with a fresh, disciplined understanding of space, but also for modeling new opportunities for an exciting association of free art and architecture.
9. バルセロナ・パビリオン
The German Pavilion in Barcelona, designed by Ludwig Mies van der Rohe and built for the International Exposition in 1929.The Pavilion was not only a pioneer for construction forms with a fresh, disciplined understanding of space, but also for modeling new opportunities for an exciting association of free art and architecture.
10. バルセロナ・パビリオン
The German Pavilion in Barcelona, designed by Ludwig Mies van der Rohe and built for the International Exposition in 1929.The Pavilion was not only a pioneer for construction forms with a fresh, disciplined understanding of space, but also for modeling new opportunities for an exciting association of free art and architecture.
11. バルセロナ・パビリオン
The German Pavilion in Barcelona, designed by Ludwig Mies van der Rohe and built for the International Exposition in 1929.The Pavilion was not only a pioneer for construction forms with a fresh, disciplined understanding of space, but also for modeling new opportunities for an exciting association of free art and architecture.
12. バルセロナ・パビリオン
The German Pavilion in Barcelona, designed by Ludwig Mies van der Rohe and built for the International Exposition in 1929.The Pavilion was not only a pioneer for construction forms with a fresh, disciplined understanding of space, but also for modeling new opportunities for an exciting association of free art and architecture.
HTML コード
HTML構造は、単に1つだけの画像の場合よりは複雑なだけで、"最小セットアップ"に記載されているものと同じです。 また、ナビゲーションボタンは、ラッピング DIV 内に配置されています。d
<div id="actions">
<a class="prev">« Back</a>
<a class="next">More pictures »</a>
</div>
<!-- スクロールのルート要素 -->
<div class="scrollable vertical">
<!-- scrollable 要素のルート要素 -->
<div class="items">
<!-- 1番目の要素。コンテンツは3つの行 -->
<div>
<!-- 1番目の行 -->
<div class="item">
<!-- 画像 -->
<img src="http://path/to/my/image.jpg" />
<!-- タイトル -->
<h3>1. Barcelona Pavilion</h3>
<!-- コンテンツ -->
<p>
The Pavilion was not only a pioneer ...
</p>
</div>
<!-- 2番目 と 3番目の行 -->
<div class="item"> ... </div>
<div class="item"> ... </div>
</div>
<!-- 別な3つの行を持った2番目の要素 (など) -->
<div>
...
</div>
</div>
</div>
CSS コード
上記の設定に、次の following CSSファイル を使用しています。縦スクロールに必要な、CSSファイルの重要な部分は、次の通りです:
/* スクロールのルート要素 */
.scrollable {
/* 必須な設定 */
position:relative;
overflow:hidden;
/*
縦スクロールは、一般的に幅よりも高さの方が大きいが、
今回は異る
*/
height: 665px;
width: 700px;
}
/* scrollable 要素のルート要素 */
.scrollable .items {
position:absolute;
/* 今回は、高さに非常に大きなスペースを指定する */
height:20000em;
}
注: 横スクロールでは、 float: left プロパティを使用して項目を 横に並べます。縦スクロールでは、この必要がありません。
JavaScript コード
scrollable は、幅と高さを調べることによって、縦または横かどうかを推測するのが得意です。 高さが幅よりも大きい場合、スクロールは縦になります。これは、自動決定をオーバーライドする vertical プロパティにより、手動でも設定することができます。
マウスホイールによるスクロールを可能にするため、mousewheel コンフィギュレーション を使用します。 ウスホイールツール ツールがページに含まれ ていることを確かめる必要があります。
$(function() {
// initialize scrollable with mousewheel support
$(".scrollable").scrollable({ vertical: true, mousewheel: true });
});
注: このマウスホイールツールは、標準のjQueryツールのディストリビューションには 含まれていません。このツールを含むcustom combinationをダウンロードする必要があります。