JQuery - Как загрузить внешнее содержимое в один div, переключить div с эффектом скольжения и автоматически прокрутить вниз, чтобы увидеть расширенный div

Question

На моей HTML-странице есть:

4 изображения сидят в ряд и 1 див сидит сразу под - рухнул.

В зависимости от того, какое изображение нажимает пользователь, я хотел бы загрузить соответствующее внешнее содержимое страницы в этот DIV (используя ajaxpage.js?).

Когда содержимое загружается в DIV, DIV должен открываться с помощью скользящего действия. (используя jquery.togglr.js?)

Я также хотел бы, чтобы браузер автоматически прокрутил вниз до расширенного DIV, в противном случае пользователь может не увидеть, что дополнительный контент был открыт. Прокрутка должна иметь эффект ослабления. (используя jquery.scrollTo.js?)

Наконец, если пользователь нажимает на то же изображение, которое открывало DIV, он должен переключать DIV на закрытие. Если пользователь нажимает на другое изображение с уже открытым DIV, просто загрузите новый контент, не закрывая и не открывая DIV.

Сложность состоит в том, как правильно интегрировать все различные плагины jquery для получения желаемого поведения?

Спасибо.

Answer 1

Ну, для начала вам понадобится обработчик события щелчка на ваших 4 изображениях:

$('img.fourImageCssClass').click(function(){
    // do something on click.  $(this) is an object that represents your clicked image
    var imgSrc = $(this).attr('src');
});

Далее вам нужно получить ссылку на ваш <div> в функции обработчика кликов:

var yourDiv = $('#div-id');

Затем вы можете использовать метод $. Ajax () , чтобы захватить контент и загрузить его в ваш div. Как только это будет сделано, функции slideUp / slideDown позаботятся об открытии / закрытии div.

Наконец, для плавной прокрутки вы можете просто анимировать свойство scrollTop окна. Чтобы узнать, куда прокручиваться, вы можете получить смещение () или postion () вашего деления.