Галереи изображений с новой страницей на слайд

Question

В настоящее время у меня есть основной JQuery галерея:

<ul> 
    <li>IMAGE</li> 
    <li>IMAGE</li> 
</ul> 
// with NAV stuff 

I цикл через образа с анимацией, и все прекрасно работает.

Однако мой клиент «НУЖДАЕТСЯ» еще одна настройка, благодаря которой на слайде появится новая страница. GQ.com - хороший пример этого. Нажмите ссылку, чтобы проверить это.

Если вы заметите, что каждый раз, когда вы нажимаете «Предыдущая» или «Следующая», загружается новая страница, создавая больше просмотров страниц для сайта.

Мой вопрос: Возможно ли это с моей текущей настройкой (b/c не может измениться)? Или это возможно только через серверное программирование? Как они это делают?

Answer 1

Посмотрите, что на самом деле происходит там. URL-адрес для следующей кнопки выглядит так:

<a href="?slide=2" title="Next slide" onclick="s_objectID=&quot;http://www.gq.com/style/wear-it-now/201010/best-jean-jackets-denim?slide=2_1&quot;;return this.s_oc?this.s_oc(e):true">Next</a> 

Но когда вы нажимаете на нее, что вам нужно? Вы здесь:

http://www.gq.com/style/wear-it-now/201010/best-jean-jackets-denim#slide=2

Обратите внимание на разницу? Это хеш # вместо вопросительного знака ?. Они не перезагружают всю страницу, они асинхронно делают HTTP-запрос в Javascript и используют какую-либо форму hijax для изменения значения хэша браузера (то, что появляется после # ... единственной части, которую может изменять javascript), тем самым позволяют пользователю циклически перемещаться назад и вперед с помощью обычных элементов управления браузером. Способ сделать это - построить методы в вашем javascript, чтобы определить значение того, что после хеша, как при загрузке страницы, так и после изменения значения хеша страницы. Тогда вы можете заставить другую функцию javascript фактически контролировать ее, когда вы нажимаете кнопки «next» или «предыдущие», и возвращаете false, чтобы убить нормальное выполнение href anchor.

Причина, по которой это называется «хиджакс», заключается в том, что ваш сайт по-прежнему имеет совершенно правильные hrefs (например, вы можете перейти к этой ссылке выше, но замените # на ? и получите то же самое состояние приложения). Это позволяет поисковым системам сканировать ваш сайт и пользователей без javascript, чтобы эффективно использовать ваш сайт, а также предоставляя все AJAXery, которые люди ожидают в полнофункциональных браузерах. Трюк здесь состоит в том, чтобы убедиться, что то, что приходит после того, как # может быть передано через AJAX на ваш сервер, сообщите серверу, что это вызов AJAX, и обработайте возвращаемое значение, которое может понять ваш javascript. Самый простой способ - использовать дополнительный бит после # в качестве URL-адреса вашего запроса AJAX и позволить серверу правильно интерпретировать все.