Центрирование изображения на слайдере Nivo с использованием темы по умолчанию?

Question

Для тех, кто использует Nivo Slider, есть ли простой способ (или нет) центрировать изображение на слайдере? Я знаю, что Nivo Slider был разработан для отображения изображений, которые идеально "вписываются" в рамку (в отличие от способа, которым я его использую), но по техническим причинам я бы лучше попытался центрировать изображения, а не делать все мои изображения идеально. соответствовать ширине и высоте коробки Nivo. В настоящее время мой слайд Nivo выглядит так:

http://dl.dropbox.com/u/12453703/nivo.png

Извините, я не предоставил никаких примеров кода того, как я пробовал это. Мои знания CSS не слишком велики, и большинство моих попыток исправить проблему были либо связаны с поиском решений в Интернете (и попыткой применить указанное решение), либо с попыткой использовать случайные однострочные строки в моей таблице стилей в попытке исправить эта проблема.

Если вы хотите узнать, какие CSS-файлы я использую, я использую тему по умолчанию, которую можно скачать здесь: http://cloud.github.com/downloads/gilbitron/Nivo-Slider/nivo-slider2.7.1.zip

Спасибо, я ценю это.

Answer 1

Положение изображения загружается в файл JavaScript. Отредактируйте "jquery.nivo.slider.js" (пожалуйста, убедитесь, что используете этот файл вместо "jquery.nivo.slider.pack.js" в заголовке.)

Перейти к строке 85:

//Set first background
        slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat');

Найдите приведенную выше строку. Измените это на:

//Set first background
        slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat center');

Теперь вы можете видеть, что ваше первое изображение находится в центре. Просто поиграйте с этим файлом, и вы определенно сделаете все изображения по центру.

РЕДАКТИРОВАТЬ: Найти эту функцию: // Добавить фрагменты для анимации фрагментов. Строка 253. Отредактируйте остальную часть этого. Строка 262

background: 'url("'+ vars.currentImage.attr('src') +'") no-repeat -'+ ((sliceWidth + (i * sliceWidth)) - sliceWidth) +'px 0%'

При изменении от 0% до 50% изображение становится центром по вертикали. Все ближе...

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

Отредактируйте вышеупомянутую строку еще раз и замените нижнюю строку.

background: 'url("'+ vars.currentImage.attr('src') +'") no-repeat 50%'

Это определенно работает..

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

Забудьте обо всех вышеперечисленных изменениях. Просто замените свой файл jquery.nivo.slider.js на этот.

Answer 2

Если вам нужно сделать фон по горизонтали и вы хотите, чтобы все переходы работали хорошо, вы можете сделать следующее:

1. Вам нужно знать фактическую ширину текущего изображения

2. Вам необходимо рассчитать смещение, из которого должны быть добавлены срезы (или блоки) для этого изображения:

   var mySliceOffset = (vars.currentImage.attr('width') - $('body').width()) / 2;

(в этом примере ширина контейнера слайдера установлена ​​на 100%)

1. Затем отредактируйте свойства фона:

   background: 'url("'+ vars.currentImage.attr('src') +'") no-repeat -'+ ((mySliceOffset+sliceWidth + (i * sliceWidth)) - sliceWidth) +'px 0%'

Answer 3

Попробуйте с этим CSS.

.nivoSlider img {
    background-position:center center;
}

Answer 4

Создайте div-обертку и поместите в него нивослайдер.

Html:

<div id="wrap">
    <div id="slider" class="nivoSlider">
        <img src="images/slide.jpg" alt="" />
    </div>
</div>

Css:

#wrap { 
    position: relative;
    height: 500px; 
    width: 500px; 
}
#slider { 
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -125px; // Half the height
    margin-left: -125px; // Half the width
    height: 250px;
    width: 250px;
}

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

редактировать demo.html и добавьте дополнительную обертку следующим образом:

<div class="slider-wrapper theme-default">
    <div class="ribbon"></div>
        <div id="slider-wrap"> <!-- Extra wrapper -->
            <div id="slider" class="nivoSlider">
                <img src="images/toystory.jpg" alt="" />
                <a href="http://dev7studios.com"><img src="images/up.jpg" alt="" title="This is an example of a caption" /></a>
                <img src="images/walle.jpg" alt="" data-transition="slideInLeft" />
                <img src="images/nemo.jpg" alt="" title="#htmlcaption" />
            </div>
            <div id="htmlcaption" class="nivo-html-caption">
                <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
            </div>
        </div>
</div>

Добавьте это внутри style.css в демонстрационных файлах:

#slider-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -123px; /* 246/2 */
    margin-left: -309px;/ /* 618/2 */
}

.slider-wrapper {
    position: relative;
    height: 500px;
    width: 1000px;
    background: red;
}

Найдите эту строку и прокомментируйте правило поля:

.theme-default #slider {
    /* margin:100px auto 0 auto; */
    width:618px; /* Make sure your images are the same size */
    height:246px; /* Make sure your images are the same size */
}

Загрузите измененный пример и изучите код http://www.mediafire.com/?9f7z9ku4n1ikiba

Answer 5

Для меня самое простое решение потребовало 3 вещи:

1. Предполагая, что в узких окнах просмотра ваши изображения должны занимать всю ширину области просмотра, укажите максимальную ширину для ваших изображений (в пикселях) в той точке, в которой вы хотите, чтобы они перестали расти при расширении области просмотра, и просто начните центрирование внутри самого окна просмотра.
2. Убедитесь, что ширина ВСЕХ ваших изображений больше или равна максимальной ширине, выбранной вами на первом шаге. (Если у вас худое изображение, вы все равно можете заставить его работать. Читайте дальше.)
3. Поместите ползунок Nivo в обертку и отцентрируйте его.

Для шага 1 я использовал 1220px. Это было просто потому, что мои изображения начали обрезаться внизу, когда они были шире, чем 1220 пикселей. Выберите то, что вы хотите. Чем больше число, тем шире область просмотра до начала центрирования. Однако недостатком является то, что все ваши изображения должны быть по крайней мере такими же широкими, как вы выбираете.

Для шага 2 просто следуйте правилу. Если у вас есть изображение, которое недостаточно широко, но вы все еще хотите использовать его, вы можете сделать это, просто отредактировав изображение следующим образом:

Предположим, у вас есть изображение 800x600, а на шаге 1 вы выбрали 1220. Это изображение не будет работать, потому что оно слишком маленькое. Однако, если вы создаете новое изображение с приемлемой шириной (например, 1220x600), вы можете заполнить все изображение тем цветом фона, который используется за слайдером. Затем возьмите изображение 800x600 и вставьте его прямо в центр вашего нового изображения 1220x600. Это новое изображение 1220x600 должно центрироваться правильно.

Для шага 3:

CSS

Добавьте следующее к nivo-slider.css

.slider-wrapper
{
 position:relative;
 max-width: 1220px;   -   Change this width to whatever you want
 margin-left:auto;
 margin-right:auto;
}

Необязательно: Вам следует отредактировать настройку "max-width" в свойстве ".nivo-Slider img", чтобы ваши изображения загружались немного приятнее: если вы этого не сделаете, то произойдет, что первое изображение (если больше максимальной ширины) будет мигать в полном размере, а затем быстро настроиться. Чтобы применить редактирование, просто измените свойство max-width со значения "none" на значение максимальной ширины, указанное в оболочке ползунка. Смотрите пример ниже.

.nivoSlider img {
 position:absolute;
 max-width: 1220px;
 left:0px;
 top:0px;

HTML

Поместите свой слайдер в новую оболочку слайдера.

<div class="slider-wrapper">
<div id="slider" class="nivoSlider">
*slider stuff*
</div>
</div>

Наслаждайтесь симметрией!