м, используяjQuery.ScrollTo скрипт для возможности вертикальной прокрутки к выбранному изображению (если класс контейнера "презентация» ISN»t) или к следующему изображению и отобразите его в середине экрана.

Примечание: я создал два состояния. Когда пользователь нажимает на любую картинку, ям добавивпрезентация» класс кcontainer div от всех картинок. Поэтому я буду знать, нужно ли мне отображать выбранное изображение или следующее.

Этот режим остановится, когда пользователь прокрутит страницу. Чтобы сделать это, ям, используя$(window).scroll событие.

Вот моя проблема: после события клика на картинке, иногда, мой класс "презентация» удаляется моим$(window).scroll событие, но я нене знаю, как это исправить.

Вот демо:http://jsfiddle.net/qnQSP/8/

Что я'Я делаю: Как вы можете видеть, я хотел бы создать два состояния: "режим презентации " и "нет режима презентации ", Я'm активировать режим презентации, когда мы нажимаем на элемент, добавляя глобальный класс в мой контейнер "#galleries».

С этим классомна"Я могу определить, нужно ли отображать текущее изображение или перейти к следующему.

Чтобы довольно режим презентации, я написал "$ (Окна) .scroll» функция. Эта функция выходит из режима презентации, когда мы прокручиваем страницу.

Однако, когда я использовал функцию .scrollTo в режиме презентации, я всегда выходил из этого режима из-за "$ (Окна) .scroll» функция. Итак, у меня была глобальная переменнаяpresentation_mode_stop_scrolling» чтобы остановить это.

Иногда$ (Окна) .scroll» функция вызывается один раз сразу после моей функции scrollTo, может 'не могу решить это.

Вот мой код:

HTML:

<img src="http://www.sb-designs.co.uk/ckfinder/userfiles/images/free%20web%20hosting.jpg">


<img src="http://www.mastercreations.net/wp-content/uploads/2012/10/5.jpg">


<img src="http://www.sb-designs.co.uk/ckfinder/userfiles/images/free%20web%20hosting.jpg">


<img src="http://www.webdesign4essex.co.uk/images/essex_website_design.jpg">


<img src="http://www.mastercreations.net/wp-content/uploads/2012/10/5.jpg">

Jquery

$(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'));} });
         }
    });