Dynamically replaced content scrolling horizontally

Question

So far I have a dynamic index page with a nav that replaces the content.

The content will be images that are clickable and scroll horizontally to the next image along.

On this page http://intelligen.info/test/index.html you can see the dynamic index page that replaces the content. I found the code from this blog http://css-tricks.com/dynamic-page-replacing-content/

The content is clickable images that scroll horizontally to the next image along. The images scroll fine on the index page but does not work on content when it is replaced. for example see this page http://intelligen.info/test/index.html#paul-smith.html However this link to the paul smith page doesn't load the content at all. You may have to click on 'work' > 'london fashion week' > 'paul smith' to view this page.

How do I get the images scrolling on the replaced content?

Answer 1

You're registering a hashchange

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

but you also used # on your images anchors

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

which upon a click will trigger the same event.

so you need to think about your page usability and UI (user interface).
It's not common that a user will click on an image to make a content-slider advance...

One solution would be to rethink about the concept, I would add two nice fancy arrows on both sides of the page - slider.

or you might want to event.preventDefault() on any click that is triggered on your images

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

hopefully preventing the hashchange event to trigger. Hope this helped to spot on the issue.

_{P.S: the menu on the left side is also unintuitive, it's not clear which submenu is opened and which was the parent caller...}