Динамически заменяемая прокрутка контента по горизонтали

Question

Пока у меня есть динамическая индексная страница с навигацией, которая заменяет контент.

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

На этой странице http://intelligen.info/test/index.html вы можете увидеть страницу динамического индекса, которая заменяет контент. Я нашел код из этого блога http://css-tricks.com/dynamic-page-replacing-content/

Контент представляет собой кликабельные изображения, которые прокручиваются горизонтально к следующему изображению. Изображения хорошо прокручиваются на странице указателя, но не работают с контентом при его замене. например, посмотрите эту страницу http://intelligen.info/test/index.html Однако эта ссылка на страницу Пола Смита не загружает контент вообще. Возможно, вам придется нажать "Работа"> "Неделя моды в Лондоне"> "Пол Смит", чтобы просмотреть эту страницу.

Как получить прокрутку изображений на замененном контенте?

Answer 1

Вы регистрируете hashchange

$(window).bind('hashchange', function(){

но вы также использовали # на ваших изображениях якоря

<div id="image-1">
    <a href="#image-2"><img></a> <!-- HERE'S THE ISSUE -->
</div>

который при клике вызовет то же событие.

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

Одним из решений было бы переосмыслить концепцию, я бы добавил две красивые причудливые стрелки на обеих сторонах страницы - слайдер.

или вы можете захотеть event.preventDefault() на любой клик, который вызывается на ваших изображениях

$("#main-content").on("click", "a[href^='image-']", function( event ){
   event.preventDefault();
});

надеюсь, что предотвращение hashchange событие для запуска. Надеюсь, что это помогло выявить проблему.

_{PS: меню на левой стороне тоже не интуитивно понятно, не понятно, какое подменю открыто, а какое было родительским вызывающим...}