Горизонтальная прокрутка с ява-скрипт 4

Закончила свой сайт с горизонтальной прокруткой колесиком мыши и перетаскиванием – можете посмотреть и поскроллить здесь: http://awebdesign.ru

Сайт собран на основе урока Горизонтальная прокрутка с ява-скрипт 3, но так как использованы вместо текста картинки, к тому же эти изображения динамически меняют размер в зависимости от размеров окна браузера, то решила написать маленький тьютор по этому поводу.

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

CSS

Стили для списка и его пунктов:

.in {
width: 7400px;
list-style: none;
padding: 0;
margin: 0;
}

.in li {
float: left;
margin: 0;
padding: 0;
}

Ширина списка класса in (7400px) – это ширина вашей горизонтальной страницы. К сожалению я не нашла способа динамически менять эту ширину в зависимости от суммы ширин всех изображений, возможно, вы найдете его сами. В противном случае нужно вручную настроить эту ширину в зависимости от количества изображений. Если, как в моем случае, изображения меняют свой размер динамически, то и ширина этого списка будет меняться, поэтому желательно тестировать страницу с максимальными размерами изображений, иначе последние в списке картинки «прыгнут» вниз. Если высота монитора не позволяет провести такой тест, оставляйте в ширине «запас».

jQuery

Для начала нужно подгрузить на страницу библиотеку jQuery и скрипт прокрутки:
(Ниже вы можете скачать исходные файлы вместе с ява-скриптами)
Скрипт, который нужно поставить в <header>:

<script charset="utf-8">
$(document).ready(function () {
$('#timeline').mousedown(function (event) {
$(this)
.data('down', true)
.data('x', event.clientX)
.data('scrollLeft', this.scrollLeft);
return false;
}).mouseup(function (event) {
$(this).data('down', false);
}).mousemove(function (event) {
if ($(this).data('down') == true) {
this.scrollLeft = $(this).data('scrollLeft') + $(this).data('x') - event.clientX;
}

}).mousewheel(function (event, delta) {
this.scrollLeft -= (delta * 100);
}).css({
'overflow' : 'hidden',
'cursor' : '-moz-grab'
});
});

$(window).mouseout(function (event) {
if ($('#timeline').data('down')) {
try {
if (event.originalTarget.nodeName == 'BODY' || event.originalTarget.nodeName == 'HTML') {
$('#timeline').data('down', false);
}

} catch (e) {}
}
});

</script>

Timeline – это div, который содиржит список класса in. Именно этот див и прокручивается ява-скриптом.

HTML

Вкратце разметка выглядит таким образом:

<div>
<ul>
<li>
<img src="http://awebdesign.ru/img/grad.jpg" class="source-image" alt="" />
</li>
<li>
<a href="#">
<img src="http://awebdesign.ru/img/origami_fish.jpg" class="source-image" alt="" />
</a>
</li>
<li>
<img src="http://awebdesign.ru/img/grad_mezhdu.jpg" class="source-image" alt="" />
</li>
<li>
<a href="#" >
<img src="http://awebdesign.ru/img/origami_lily.jpg" class="source-image" alt="" />
</a>
</li>
</ul>
</div>

О том, как менять размеры изображения в зависимости от размеров окна браузера можете прочитать здесь:
Как динамически менять размер картинки с jQuery / jQuery dynamic resizing image

Скачать исходные файлы: http://awebdesign.ru/tutors/source_files.zip