スクリプトを使用しjQuery.ScrollToて、選択した画像 (コンテナー クラス「プレゼンテーション」がここにない場合) または次の画像に垂直にスクロールして画面の中央に表示できるようにしています。
注: 2 つの状態を作成しました。ユーザーが任意の画像をクリックすると、すべての画像に「プレゼンテーション」クラスが追加されcontainer divます。したがって、選択した画像を表示する必要があるか、次の画像を表示する必要があるかがわかります。
ユーザーがページ内をスクロールすると、このモードは停止します。$(window).scrollそのために、イベントを利用しています。
ここに私の問題があります: 画像のクリックイベントの後、クラスの「プレゼンテーション」が$(window).scrollイベントによって削除されることがありますが、修正方法がわかりません。
これがデモです：http://jsfiddle.net/qnQSP/8/
やっていること: ご覧のとおり、「プレゼンテーション モード」と「非プレゼンテーション モード」の 2 つの状態を作成したいと思います。コンテナ「#galleries」にグローバルクラスを追加して、アイテムをクリックするとプレゼンテーションモードがアクティブになります。
このクラスを「オン」にすると、現在の画像を表示する必要があるか、次の画像にスクロールする必要があるかを判断できます。
プレゼンテーション モードを終了するために、"$(window).scroll" 関数を作成しました。この関数は、ページ内をスクロールしているときにプレゼンテーション モードを終了します。
ただし、プレゼンテーション モードで .scrollTo 関数を使用していたときは、「$(window).scroll」関数が原因で、常にこのモードを終了していました。そのため、グローバル変数「presentation_mode_stop_scrolling」を使用して停止しました。
scrollTo 関数の直後に「$(window).scroll」関数が呼び出され、解決できないことがあります。
これが私のコードです：
HTML:
<div id="galleries">
<div id="pictures-content" class="1"><img src="http://www.sb-designs.co.uk/ckfinder/userfiles/images/free%20web%20hosting.jpg"></div>
<div id="pictures-content" class="2"><img src="http://www.mastercreations.net/wp-content/uploads/2012/10/5.jpg"></div>
<div id="pictures-content" class="3"><img src="http://www.sb-designs.co.uk/ckfinder/userfiles/images/free%20web%20hosting.jpg"></div>
<div id="pictures-content" class="4"><img src="http://www.webdesign4essex.co.uk/images/essex_website_design.jpg"></div>
<div id="pictures-content" class="5"><img src="http://www.mastercreations.net/wp-content/uploads/2012/10/5.jpg"></div>
Jクエリ
$(window).scroll(function () {
if(presentation_mode_stop_scrolling=="off")
{
$("#galleries").removeClass("picture_presentation");
}
});
var picture_to_center_class = "";
var picture_to_center="";
$("#galleries #pictures-content").unbind("click");
$("#galleries #pictures-content").bind("click", function(event) {
// Check if we are in the presentation mode
var class_galleries = $("#galleries").attr('class');
if(class_galleries == "picture_presentation")
{
console.log("Presenation mode");
var new_picture = parseInt(picture_to_center_class)+1;
// Stopping the scroll event to cancelled the presentation mode
presentation_mode_stop_scrolling="on";
//scrolling to the next one
var picture_to_center = $("#galleries ."+new_picture);
$("body").scrollTo(picture_to_center, 800, {onAfter:function(){ presentation_mode_stop_scrolling="off"; console.log("galleries class: "+$("#galleries").attr('class'));} });
}
else
{
console.log("Not presenation mode");
// We are adding the presentation mode to the DOM
$("#galleries").addClass("picture_presentation");
// Get the binding element class number
picture_to_center_class = $(this).attr('class');
console.log("picture_to_center: "+picture_to_center_class);
picture_to_center = $("#galleries ."+picture_to_center_class);
// Stoping the (windows).scroll to removed the galleries class
presentation_mode_stop_scrolling="on";
$("body").scrollTo(picture_to_center, 800, {onAfter:function(){ presentation_mode_stop_scrolling="off"; console.log("galleries class: "+$("#galleries").attr('class'));} });
}
});