Слайдер ниво превью

Question

Я использую слайдер nivo, и я пытаюсь сделать миниатюры, но я не могу заставить его работать.

Вот что у меня есть:

Демоверсия Nino Slider

Вот учебник о том, как , но я не могу заставить его работать.

Сайт Nive Slider

Надеюсь, кто-нибудь увидит, что я делаю неправильно

Answer 1

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

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

В 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 была возможность разместить эскизы в другом месте.

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

Answer 2

Я обнаружил, что тема 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;
}

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

Answer 3

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

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

.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 */
});

Answer 4

На сайте 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, что является ключом к его работе.

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