Разработка полноразмерного слайдера изображений jQuery

Question

Недавно я пытался завершить создание полноразмерного слайдера jQuery, который в основном отображал бы очень большое изображение (2000x350), которое позволяло бы изображению охватывать даже довольно большие разрешения монитора.

Однако, в отличие от некоторых подобных ползунков, таких как Parallax и этого примера jQuery Cycle , я хотел бы использовать все изображение вместо меньшего изображения с фоновым цветом. Проблема, с которой я сталкиваюсь, заключается в том, как ползунок отображается в меньших разрешениях (1024x768), поскольку он отображает все изображение с полосами прокрутки, когда то, что я пытаюсь сделать, это просто показать «центр» изображения, игнорируя области, которые не отображаются на странице.

Я прилагаю jsfiddle с образцом изображения (2000x350), и мне интересно, как я мог бы отображать только область в пределах "960", если страницу просматривали в 1024x768, и отображать большие части изображения (по центру), если разрешение было больше.

Любые предложения - будь то чистый CSS или использование Javascript / JQuery, с благодарностью.

Резюме: я пытаюсь создать полноразмерный jQuery-слайдер изображений, который будет отображать только «центр» изображения и игнорировать любое переполнение в зависимости от размера окна пользователя.

РЕДАКТИРОВАТЬ: Этот пример - это то, что я ищу.

Answer 1

Если ваш HTML выглядит следующим образом:

<div id='wrapper'>
    <img src="http://i.imgur.com/s0Gvf.png" />
</div>

Тогда вы можете центрировать изображение по вертикали и горизонтали внутри элемента #wrapper, используя следующий CSS:

html, body { 
    height:100%; 
}
#wrapper {
    position:relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
#wrapper img {   
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-1000px;
    margin-top:-175px;
}

Это установит#wrapper для ширины и высоты окна браузера.overflow:hidden; сделает что-то слишком большое внутри него скрытым.#wrapper img устанавливает изображение для выравнивания по вертикали и горизонтали с родительским контейнером.

Это делается путем установки его top и left позиций на 50%, а затем смещения этих позиций на половину ширины изображенийи высота.Итак, margin-left - это - (image_width/2) px и т. Д.

---

Редактировать:

Что касается галереи / слайдера, пожалуйста, проверьте обновленную версию вашего jsFiddle: http://jsfiddle.net/vMqxa/2/

Чтобы увидеть конечный результат, посетите эту страницу: http://jsfiddle.net/vMqxa/2/show/light/

Что именно здесь происходит ...

Для начала есть #wrapper_wrapper (плохое имя, я знаю ..) который является дивиденцией ширины и высоты на 100%, поэтому он заполнит весь экран.

В пределах этого #wrapper, который будет содержать все изображения.Это то, что будет прокручиваться влево и вправо для отображения правильного изображения, поэтому оно должно быть таким же широким, как и все изображения внутри него.Это означает, что если у нас есть 4 изображения, то ширина #wrapper будет равна 4 * ширины экрана.Это рассчитывается в javascript с использованием:

$("#wrapper").width(window.innerWidth * $(".image_wrapper").length);

Далее идет .image_wrapper, который является div, используемый для хранения каждого изображения.Ширина этого устанавливается на window.innerWidth с использованием JavaScript.Он также имеет overflow:hidden, поэтому все, что внутри него слишком большое, отображаться не будет.

Наконец, у нас есть изображения .image_wrapper img, которые позиционируются с использованием absolute позиционирования.Они установлены на left:50%; top:50%;, а затем, используя javascript, мы вычисляем смещение, необходимое для их идеального центрирования.Это делается с помощью:

$(".image_wrapper img").each(function(){

    $(this).css({
        marginLeft: "-" + $(this).width()/2 + "px",
        marginTop: "-" + $(this).height()/2 + "px" 
    });

});

Все это объединено в функцию, которая вызывается при загрузке страницы, а также при изменении размера окна.

Для прокрутки влево и вправо мы используем:

$("#next").click(function(){
    var currentMargin = parseInt($(".image_wrapper").eq(0).css("marginLeft").replace("px","")),
        newMargin = currentMargin - window.innerWidth;

    $(".image_wrapper").eq(0).animate({
        marginLeft: newMargin + "px"
    });

});

$("#prev").click(function(){
    var currentMargin = parseInt($(".image_wrapper").eq(0).css("marginLeft").replace("px","")),
        newMargin = currentMargin + window.innerWidth;

    $(".image_wrapper").eq(0).animate({
        marginLeft: newMargin + "px"
    });

});

Примечание: это не остановит прокрутку, если нет ничего влево или вправо.

Снова,посмотрите полный код на jsFiddle: http://jsfiddle.net/vMqxa/2/

Answer 2

Я не смог заставить ваш jsFiddle что-либо отобразить, поэтому просто вставил сюда пример кода.По сути, это div с параметром / height и изображением, отображаемым внутри него, где изображение центрировано, а переполнение изображения скрыто (поскольку изображение больше, чем div).

var width = ( $("#theimg").width() - $(".box").width() ) / 2;
var height = ( $("#theimg").height() - $(".box").height() ) / 2;

$("#theimg").css( "top", "-" + height + "px" );
$("#theimg").css( "left", "-" + width + "px" );


.box { position: relative; overflow: hidden; width:500px; height: 200px; }
#theimg { position: absolute; top: 0px; left: 0px; }

<body>
  <div class="box">
    <img id="theimg" src="cliffs.jpg" />
  </div>
</body>

Youможет сделать элемент .box размером экрана, если вы не хотите это исправлять.Расчет и центрирование должны работать одинаково