HTML コード

スクロールの設定は、最小限のセットアップと同じです。 何も変更していません。ここでは、大きな画像表示に必要な要素に、唯一焦点を当てています。 まず、スクロール上の画像へのコンテナを追加します。 HTMLは、次のとおりです。:

<!-- 大きな画像のラッパー要素 -->
<div id="image_wrap">
  <!-- 最初の画像は、簡単な 1x1 ピクセルの透明 GIF -->
  <img src="/media/img/blank.gif" width="500" height="375" />
</div>

「ジャンプ」がページになく、すべてが安定するように、画像へ大きさに初期値を 設定するのは良いことです。

CSS コード

ラッパー要素へのスタイル設定は、何も追加していません:

/* 画像ラッパーのスタイル設定  */
#image_wrap {
    /* 大きさ */
    width:700px;
    padding:15px 0;
 
    /* 中央揃え */
    text-align:center;
 
    /* 少々の "skinning" */
    background-color:#efefef;
    border:2px solid #fff;
    outline:1px solid #ddd;
    -moz-ouline-radius:4px;
}

JavaScript設定

スクロール項目へ、click ハンドラを追加します。 アイデアとしては、サムネイル画像からより大きなバージョンをロードすることと、 画像のロード中に、ユーザが、何が起きているかが分るように、簡単な透明効果を 適用します。

$(".scrollable").scrollable();
 
$(".items img").click(function() {
	// 同じ thumb がクリックされたかを確認
	if ($(this).hasClass("active")) { return; }
 
	// サムネイルの URL（flickrを指定）に基づいて大きな画像のURLを計算する
	var url = $(this).attr("src").replace("_t", "");
 
	// 画像をラップする要素へのハンドルを取得して半透明にする
	var wrap = $("#image_wrap").fadeTo("medium", 0.5);
 
	// www.flickr.comから大きな画像を取得
	var img = new Image();
 

	// ロード後、この関数をコール
	img.onload = function() {
 
		// ラッパーを完全に見えるように
		wrap.fadeTo("fast", 1);
 
		// 画像を変更する
		wrap.find("img").attr("src", url);
 
	};
 
	// www.flickr.comから画像をロード中
	img.src = url;
 
	// アクティブ項目
	$(".items img").removeClass("active");
	$(this).addClass("active");
 
// ページのロード時、最初の画像に "click" をシミュレートする
}).filter(":first").click();

アプリケーション

サムネイル画像は、www.flickr.comサービスから直接取って来ています。 関連する大きな画像は、単に文字列 "_t" を除いた同じイメージのURLを 使用します。恐らく、flickrを使用していないと思いますが、別の種類の 解決策を作るのは非常に簡単です。多分、サムネイルの "alt" 属性に大 きな 画像のURLを指定することで、次のようにそれを取得することができます:

// 上記例の url 割当てをこの行に置換える
var url = $(this).attr("alt");

もっと構文的に正しいページを持ちたい場合、a タグでサムネイル画像を囲み、 href属性には大きな画像のURLを指定し、或いは title 属性に画像の説明を追加 したい場合があります。そのような場合、スクロール項目の ツールチップを追加する、興味深い機会があります。

AJAXにより、全てのサムネイル画像をHTMLページへロードするように、設定を変更するの非常に簡単です。 これは、いくつかの優れたユーザ・インタフェースで可能になります。