5000px + Широкая горизонтальная прокрутка?

Question

Я строй этого сайта и у меня есть в основном два вопроса об этой странице: http://sites.publishyours.com.br/silviamecozzi/pt/obra/deserto_das_palmas.php

по ссылке вы увидите некоторые «будет» изображения с различными размерами и это легенда. Некоторые из этих изображений будут такими же широкими, как 1700px +, и здесь возникает первая проблема и вопрос.

Проверка html и css вы увидите div с идентификатором «галереи», в котором хранятся все изображения. Это абсолютное положение, и я устанавливаю его ширину в 4800 пикселей (недостаточно для того, чтобы удерживать все изображения, которые все плавают влево. Если вы измените эту ширину на 5000 пикселей, будет достаточно, чтобы держать все изображения, и все будет хорошо как это должно быть, но ...

Вопрос 01: Зачем мне устанавливать ширину галереи div #? У меня будут другие разделы, похожие на разные изображения/размеры, и я не могу просмотреть, насколько это широко должен быть. Я просто хочу, чтобы он был настолько широким, насколько это необходимо, и если мне нужно будет добавить больше изображений позже, я хочу, чтобы он нажимал на него по мере необходимости.

Вопрос 02: Первое, что я установил левая позиция «галереи» div до -150px. Ну, как только у меня есть пихта я решил установить тег 'html' {overflow-x: hidden; }. И используйте горизонтальную прокрутку, которая будет такой же широкой, как веб-сайт (+ - 920px), прямо под изображениями, и я хочу, чтобы изображения прокручивались (с помощью прокрутки jQuery) из «скрытого права», например {left: 0px; } к «скрытому левому», как {left: -3980px; } браузера и наоборот, так как пользователь использует прокрутку ... Этот свиток должен будет рассчитать ширину div #gallery и всех ... Может ли кто-нибудь указать мне на плагин jQuery, который поможет мне сделать это? ? Я думаю о jscrollpane (http://jscrollpane.kelvinluck.com), но я действительно не знаю, будет ли это делать.

Спасибо за помощь!

Answer 1

Вопрос 1: для предотвращения обертывания вы можете использовать pre или nowrap. Вам не нужно устанавливать ширину галереи, если ваша структура html и css верны.

Вопрос 2. Вы можете использовать свойство scrollLeft в jQuery для отображения элементов. Вам не нужен плагин.

http://jsfiddle.net/3Tsfv/1

Затем используйте свойство scrollLeft для анимации следующего элемента в поле зрения. Этот пример не обрабатывает граничные случаи, поэтому он будет ломаться, если вы будете нажимать влево/вправо слишком много раз. Вам должно быть легко изменить его для ваших нужд.

CSS

body { white-space:nowrap; overflow: hidden; padding: 10px; } 
img { margin: 5px; border: 1px solid black; } 
img.active { border-color: orange; } 
div{ position: fixed; }​ 

HTML

<div><button id="left"><-</button><button id="right">-></button></div><br /><br /> 
<img class="active" src="http://placehold.it/500x100/" /><img src="http://placehold.it/750x100/" /><img class="active" src="http://placehold.it/300x100/" /><img class="active" src="http://placehold.it/1000x100/" /> 

JQuery

$('#left').click(function() { 
    var $prev = $('.active').prev(); 
    $('.active').removeClass('active'); 
    $prev.addClass('active'); 
    $('body').animate({ scrollLeft: $prev.offset().left }, 'slow'); 
}); 

$('#right').click(function() { 
    var $next = $('.active').next(); 
    $('.active').removeClass('active'); 
    $next.addClass('active'); 
    $('body').animate({ scrollLeft: $next.offset().left }, 'slow'); 
}); 
​