Слайдеры Nivo

Я обнаружил, что тема default.css конфликтует со стилем img (как указано в их руководстве). Вам нужно закомментировать стили css в default.css для следующих классов:

.theme-default .nivoSlider img
.theme-default .nivoSlider a
.theme-default .nivo-controlNav
.theme-default .nivo-controlNav a
.theme-default .nivo-controlNav a.active

И, как указано в их руководстве, вам необходимо добавить этот стиль:

#slider .nivo-controlNav {
    position:absolute;
    bottom:-70px; /* Put the nav below the slider */
}
#slider .nivo-controlNav img {
    display:inline; /* Unhide the thumbnails */
    position:relative;
    margin-right:10px;
}

У меня тоже были проблемы с этим, надеюсь, это поможет кому-то.

У меня было много проблем с поиском, где мои миниатюры. Я наконец нашел их, позиционируя их как «абсолютные», и они, наконец, появились в середине слайд-шоу :)

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

В jquery.nivo.slider.js добавьте это в начало файла:

var thumbnails = $("#thumbnails"); // this is where your thumbnails will be

Затем найдите это:

//Add Control nav
if(settings.controlNav){
    var nivoControl = $('<div class="nivo-controlNav"></div>');
    slider.append(nivoControl);

И заменить на

//Add Control nav
if(settings.controlNav){
    var nivoControl = $('<div class="nivo-controlNav"></div>');
    thumbnails.append(nivoControl);

Найдите это:

$('.nivo-controlNav a', slider).live('click', function(){

Заменить:

$('.nivo-controlNav a', thumbnails).live('click', function(){

Затем поместите куда-нибудь на свою страницу, и все готово :)

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

Надеюсь, это помогло ;)

На сайте Nivo есть новая демонстрация, показывающая, как работают эскизы: http://nivo.dev7studios.com/demos/

Соответствующий пример имеет следующий стиль CSS:

#slider3 {
    margin-bottom:110px;
}
#slider3 .nivo-controlNav {
    position:absolute;
    left:185px;
    bottom:-70px;
}
#slider3 .nivo-controlNav a {
    display:inline;
}
#slider3 .nivo-controlNav img {
    display:inline;
    position:relative;
    margin-right:10px;
    -moz-box-shadow:0px 0px 5px #333;
    -webkit-box-shadow:0px 0px 5px #333;
    box-shadow:0px 0px 5px #333;
}
#slider3 .nivo-controlNav a.active img {
    border:1px solid #000;
}

Обратите внимание, как теги a и img в классе .nivo-controlNav используют display: inline, что является ключом к его работе.

Другие свойства предназначены для позиционирования панели навигации и добавления теней.

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

Добавьте этот стиль CSS в качестве загружаемого последним (включите его в ССЫЛКУ под другими основными листами Nivo CSS)

.nivo-controlNav a {
display:inline; /* Display the thumbnail link element */
}

#slider .nivo-controlNav img {
display:inline; /* Un-hide the thumbnail image element */
position:relative;
margin: 10px 10px 0 0; /* Provide some white space around the thumbs */
}

#slider .nivo-controlNav {
position: absolute;
top: 600px; /* 600px is the height of our images in the slider */
}

И не забудьте установить эти параметры при вызове Nivo:

$('#slider').nivoSlider({
controlNav:true, /* Display the control navigation */
controlNavThumbs:true, /* Display thumbnails */
controlNavThumbsFromRel:true, /* Source thumbnails from rel attribute */
});