人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

JQueryの画像ビュワーによる表示方法について

今回、JQueryの参考書に記載されている画像ビュワーについて、表示方法に関する質問があります。
以下のURLアドレスのサンプルをご覧いただければと思います。
http://kotenbu.sakura.ne.jp/hatena/

サンプルを開きますとメイン画像とサムネイル画像が表示されていると思います。
指定した間隔で画像が切り替わるプログラムで、
またサムネイル画像をクリックするとそのサムネイル画像をメイン画像として表示、そして画像の切り替えをクリックしたサムネイルより開始する、というものです。

ここで質問なのですが、この画像ビュワーで、サムネイルをクリックしてメイン画像を変更した後は、そのクリックしたサムネイル画像とメイン画像のままで維持(常にその画像を表示している状態)させたいと思っております。

ご回答のコードをご教授いただければと思っております。
どうぞ、よろしくお願いいたします。

●質問者: nagato-yuki
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● a-kuma3
●100ポイント ベストアンサー

五ヶ所ほど、いじりました。
画像切替関数に、自動で切り替えるかどうかの指定をする第2引数を追加して、ロード時の呼び出しでは自動切り替えを、クリックしたときには自動切り替え無しを指定するようにしています。

行末に // ★ を入れているところが、いじったところです。

/**
 * image viewer
 * 
 * @copyright keisuke YAMAMOTO <keisukey@ranadesign.com>
 * @link http://kaelab.ranadesign.com/
 * @version 1.0
 * @date Jun 02, 2011
 */
(function($) {

 // 実行
 // ドキュメントのロード後、プラグインを実行する。
 $(function() {
 // オプションでspeedとwaitを指定可納
 // $(".mod-image").viewer({
 // speed: 300,
 // wait: 500
 // });
 $(".mod-image").viewer();
 });

 // viewerメソッドを定義
 $.fn.viewer = function(options) {
 var config = {
 speed: 1000, // ビジュアルを切り替えるのに要する時間
 wait: 2000 // 次の切り替わりまでの待ち時間
 };
 // メインビジュアルのli要素(画像の器)を変数に入れておく。
 var main = this.find(".main li");
 // サムネイルのli要素(画像の器)を変数に入れておく。
 var thumb = this.find(".thumb li");
 // インデックス番号を格納する変数を設定する。初期値は0。
 var i = 0;
 // タイマーIDを格納する変数を設定する。
 var timerId = 0;

 // 画像切替関数を定義。
 var changeImage = function(i, auto) { // ★
 thumb
 // 現在表示しているサムネイル指定枠をフェードアウトさせる。
 .find(".current").stop(true).fadeTo(config.speed, 0).end()
 // 次にターゲットにしようとしているサムネイル指定枠をフェードインさせる
 .eq(i).find(".current").stop(true).fadeTo(config.speed, 1);
 main
 // 指定インデックス以外の画像をフェードアウトさせる。
 .filter(function(index) { return index != i; }).fadeOut(config.speed).end()
 // 指定インデックスの画像をフェードインさせる。
 .eq(i).fadeIn(config.speed, function(){
 // インデックスが末尾まできている場合は、0に戻す。
 // それ以外は1つ進める。
 i = i === main.length - 1 ? 0 : i + 1;
 // 指定時間経過後に次の動作を行う。
 // タイマーをリセットする。
 clearTimeout(timerId);
 // タイマーをセットする。
 if (auto) { // ★
 timerId = setTimeout(function(){
 // 次のインデックスを画像切替関数に渡し実行する。
 changeImage(i, true); // ★
 }, config.wait);
 }
 });
 };

 // 初期設定にユーザ設定を上書き。
 $.extend(config, options);

 // サムネイル設定。
 thumb.each(function() {
 // ターゲット枠を作成する。
 // classは予約語。
 var $current = $("<div>", { "class": "current" });
 $(this).append($current);
 }).click(function() {
 // クリックイベントの設定。
 // タイマーをリセットし、クリックされたインデックスを画像切替関数に渡し実行する。
 clearTimeout(timerId);
 changeImage($(this).index(), false); // ★
 }).hover(function() {
 // ホバー設定
 // マウスオーバーしたら、".current"というクラス名をつけて、中の画像の透過度を変更する。
 $("img", this).css("opacity", 1);
 }, function() {
 // マウスアウトしたら、".current"というクラス名を外し、中の画像の透過度を変更する。
 $("img", thumb).css("opacity", 0.6);
 });

 // ループを開始する。
 changeImage(i, true); // ★
 
 // 自身(jQueryオブジェクト)返すことで、メソッドチェーンを可能にする。
 return this;
 };

})(jQuery);

nagato-yukiさんのコメント
ご回答ありがとうございました。 また、ソースコードのご提示もお礼申し上げます。 確認いたしましたところ、正常に動作しました。 補足説明も分かりやすくとても参考になる回答でした。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ