jQuery Tools: Scrollable / Navigator items flowing out of the container

Question

I'm using jQuery Tool's Scrollable with the Navigator plugin.

Some useful links:

• Documentation for Scrollable
• Documentation for Scrollable's Navigator plugin
• Standalone demo of Navigator

And most importantly: a demo of how I'm using Scrollable/Navigator.

Works well so far. But I'd like for it to behave differently:

I want the images (or rather, generally speaking, elements in <div class="items">) to "flow" right out of the Scrollable container (<div class="slider"> in my demo) until the right border of the browser window.
People with higher screen resolutions would obviously see more pictures/items flowing out of the container than people with lower resolutions.

In case this sounds confusing (which it probably does), here's some pictures:

• first image, normal
• first image, how it should be

...then when you click on the right arrow to scroll to the next picture:

• second image, normal
• second image, how it should be

Okay, I guess that's about it. Thanks for reading this far!

Any help would be highly appreciated! Thanks in advance!

Answer 1

UPDATED 3 - ( Tested in IE6, IE7, IE8, Chrome, Firefox )

DEMO:

http://so.devilmaycode.it/jquery-tools-scrollable-navigator-items-flowing-out-of-the-container/

CSS:

( Representing the things to change / add )

*{margin:0;padding:0}
body,html{overflow:hidden}
#wrapper {
    height: 500px;
    width: 100%;
    overflow: hidden
}
.slider {
    margin: 50px auto;
    width: 3000px;
    overflow: hidden
}
.slider .items {
    top: 0;
    left: 0;
    width: 3000px;
    height: 400px;
    position: absolute;
    z-index: 1
}
a.browse{z-index:2}
a.prev{left:10px}
a.next{background-position:0 -30px;left:460px}
#navi{margin:10px 0 0 50px}

Answer 2

Well, I find this as hard to believe as anyone, but this seems to work in Chrome at least:

css:

body, html {
    overflow: hidden;
}
.slider {
    width: 6000px;
}
.next {
    left: 560px;
}

And that's it. I'm going to see if it works in other browsers as well now.

EDIT: Of course, IE6/7 screw it up, except when there's a #hash in the url. Figures. Add the code below to make it work everywhere, centered and all.

div#wrapper {
    position: absolute;
    left: 50%;
    margin-left: -300px;
}

Here's a link: http://nullenenenen.nl/12345_2.html

EDIT 2:

To make sure you can enjoy your content as long as possible when risizing your browser, add this as well:

div#wrapper {
    top: 10%;
    margin-top: 0;
    overflow-y: auto;
}

I can't edit the online version from where I am now, so "edit 2" has not been applied to 12345_2.html yet.