Инструменты jQuery: элементы прокрутки / навигатора, вытекающие из контейнера

Question

Я использую прокручиваемый инструмент jQuery Tool с плагином Navigator.

Некоторые полезные ссылки:

• Документация по Scrollable
• Документация для плагина Scrollable Navigator
• Автономная демонстрация Navigator

И самое главное: демонстрация того, как яИспользую Scrollable / Navigator .

До сих пор хорошо работает.Но я бы хотел, чтобы он вел себя по-другому:

Я хочу, чтобы изображения (или, вообще говоря, элементы в <div class="items">) "вытекли" прямо из контейнера с прокруткой (<div class="slider"> в моемdemo) до правой границы окна браузера.
Люди с более высоким разрешением экрана, очевидно, увидят больше изображений / элементов, вытекающих из контейнера, чем люди с более низким разрешением.

В случае, если это звучит странно (чтоэто возможно), вот несколько картинок:

• первое изображение, нормальное
• первое изображение, какэто должно быть

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

• второе изображение, нормальное
• второе изображение, как должно быть

Хорошо, я думаю, что этооб этом.Спасибо за чтение этого!

Любая помощь будет высоко ценится!Заранее спасибо!

Answer 1

ОБНОВЛЕНО 3 - (протестировано в IE6, IE7, IE8, Chrome, Firefox)

ДЕМО:

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

CSS:

(Представляет, что нужно изменить / добавить)

*{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

Ну, в это трудно поверить, как и всем, но, похоже, это работает в Chrome, по крайней мере:

css:

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

И это все.Я собираюсь посмотреть, работает ли он сейчас и в других браузерах.

РЕДАКТИРОВАТЬ: Конечно, IE6 / 7 облажался, за исключением случаев, когда в URL-адресе есть #hash.Цифры.Добавьте приведенный ниже код, чтобы он работал везде, по центру и все.

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

Вот ссылка: http://nullenenenen.nl/12345_2.html

РЕДАКТИРОВАТЬ 2:

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

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

Я не могу редактировать онлайн-версию с того места, где я сейчас нахожусь, поэтому «редактировать 2» не было применено к12345_2.html еще.

Answer 3

Один вопрос, важно ли, чтобы элемент .slider центрировался на экране?

если нет, вы можете сделать что-то вроде этого:

#wrapper {
    margin: 100px 0 0 100px;
    width: auto; // or rather remove the width 
}
.slider {
    width: auto; // or 100%, or remove the width
}
a.next {
    left: 560; // remove the right: 10px;
}

Я думаю, что это касается обложек. Единственная проблема состоит в том, что вы определяете, сколько места осталось с левой стороны поля #wrapper.

Answer 4

Вот лучшее, что я мог придумать (с очень небольшим влиянием на код, который вы уже представили).

Изменения CSS

/* Keep original CSS, just add these to their groups */
html, body {
  overflow-x: hidden !important;
}

.slider {
  overflow: visible !important;
}

Изменение Javascript

// Add in the .Scrollable({ ... }) tag
onSeek: function(o,e){
  $('.items').children().css('visibility','');
  $('.items').children().filter(':lt('+e+')').css('visibility','hidden');
}

Конечно, это не мгновенно (как прокрутка под объектом или за пределами экрана), но оно достигает того, что вы пытаетесь сделать с минимальными усилиями.

РЕДАКТИРОВАТЬ

Добавлен перепуск-x для удаления горизонтальной полосы прокрутки внизу.Наблюдается для работы в:

• FF4 (бета)
• FF3 (v3.6.13)
• IE8 (v8.0.7600.16385)
• Хором (v8.0.552.224)

Answer 5

Хорошо, если вы хотите, чтобы цифры отображались справа, а не слева, и это единственное, что вы хотите показать на странице, ваша главная проблема в том, что у вас не может быть overflow: visible на справа, но не слева. Как насчет подделки так:

добавить HTML (добавить div перед ползунком):

<div id="wrapper">
    <div class="smokescreen"></div> <!-- added this -->
    <div class="slider">

добавить css:

.slider {
    overflow: visible;
}
#wrapper {
    position: relative;
}
.smokescreen {
    position: absolute; 
    top: 0px; 
    left: -2000px; 
    width: 2000px; 
    height: 400px; 
    background: black; 
    z-index: 2;
}

Вот ссылка: http://nullenenenen.nl/12345.html#

Теперь дополнительный div перемещается вместе с оберткой, скрывая все слева от нее. Конечно, вы можете изменить «2000px» по своему усмотрению.

Answer 6

Просто избавьтесь от свойства width в CSS класса slider и укажите вместо него margin-left, чтобы в нем оставалось свободное место слева от окна, как в вашей демонстрации.Но очевидно, что вам нужно настроить навигацию (якорь с классом next browse, чтобы он располагался абсолютно слева (не вправо, как в вашем CSS). А для навигации ниже ползунка вам просто нужно настроить его так же, как ползунокдобавив margin-left с тем же значением.