Как мне оформить миниатюры слайдера Nivo?

ProgramBox

Как мне оформить миниатюры слайдера Nivo?

Post author:admin
Запись опубликована:12 апреля, 2023
Post category:Вопросы по программированию

#javascript #jquery #css

#javascript #jquery — запрос #css #jquery

Вопрос:

ну, я пытался заставить Nivo Slider работать почти весь день. Я наконец-то разобрался, как отображать миниатюры, но теперь они сжимаются вместе. Я пытался добавить поля / отступы к изображениям на .nivo-controlNav img , но это только объединяет изображения вместе и показывает маркеры за миниатюрами.

введите описание изображения здесь

Вот ссылка на сайт.

http://dl.dropbox.com/u/31659128/pawforpaw/index.html

JS / options, которые я применил:

     $(window).load(function() {
    $('#slider').nivoSlider({
        effect: 'fade', // Specify sets like: 'fold,fade,sliceDown'
        slices: 15, // For slice animations
        boxCols: 8, // For box animations
        boxRows: 4, // For box animations
        animSpeed: 500, // Slide transition speed
        pauseTime: 3000, // How long each slide will show
        startSlide: 0, // Set starting Slide (0 index)
        directionNav: true, // Next amp; Prev navigation
        directionNavHide: false, // Only show on hover
        controlNav: true, // 1,2,3... navigation
        controlNavThumbs: true, // Use thumbnails for Control Nav
        controlNavThumbsFromRel: false, // Use image rel for thumbs
        controlNavThumbsSearch: '.jpg', // Replace this with...
        controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
        keyboardNav: true, // Use left amp; right arrows
        pauseOnHover: true, // Stop animation while hovering
        manualAdvance: false, // Force manual transitions
        captionOpacity: 0.8, // Universal caption opacity
        prevText: 'Prev', // Prev directionNav text
        nextText: 'Next', // Next directionNav text
        beforeChange: function(){}, // Triggers before a slide transition
        afterChange: function(){}, // Triggers after a slide transition
        slideshowEnd: function(){}, // Triggers after all slides have been shown
        lastSlide: function(){}, // Triggers when last slide is shown
        afterLoad: function(){} // Triggers when slider has loaded
    });
});

Кроме того, CSS для слайдера nivo.

     /*
 * jQuery Nivo Slider v2.6
 * http://nivo.dev7studios.com
 *
 * Copyright 2011, Gilbert Pellegrom
 * Free to use and abuse under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * March 2010
 */


/* The Nivo Slider styles */
.nivoSlider {
    position:relative;
}
.nivoSlider img {
    position:absolute;
    top:0px;
    left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    border:0;
    padding:0;
    margin:0;
    z-index:6;
    display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
    display:block;
    position:absolute;
    z-index:5;
    height:100%;
}
.nivo-box {
    display:block;
    position:absolute;
    z-index:5;
}
/* Caption styles */
.nivo-caption {
    position:absolute;
    left:0px;
    bottom:0px;
    background:#000;
    color:#fff;
    opacity:0.8; /* Overridden by captionOpacity setting */
    width:100%;
    z-index:8;
}
.nivo-caption p {
    padding:5px;
    margin:0;
}
.nivo-caption a {
    display:inline !important;
}
.nivo-html-caption {
    display:none;
}
/* Direction nav styles (e.g. Next amp; Prev) */
.nivo-directionNav a {
    position:absolute;
    top:45%;
    z-index:9;
    cursor:pointer;
}
.nivo-prevNav {
    left:0px;
}
.nivo-nextNav {
    right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
    position:relative;
    z-index:9;
    cursor:pointer;
}
.nivo-controlNav a.active {
    font-weight:bold;
}

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

Пожалуйста, помогите.

Ответ №1:

Не уверен, куда вы пытаетесь поместить эти миниатюры по отношению к слайдеру, но я выяснил некоторые из ваших проблем:

Приведите эти значения в действие:

 .nivo-controlNav {
width: 900px;
left: 40px;
}

Вокруг строки 35 вашего default.css удалите атрибуты height и width

 .nivo-controlNav a {
display: block;
width: 22px; //get rid of this
height: 22px; //get rid of this
background: url(bullets.png) no-repeat;
text-indent: -9999px;
border: 0;
margin-right: 3px;
float: left;
}

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

2. избавьтесь от ширины и высоты в 22 пикселя для controlNav a, и я установлю ширину .nivo-controlNav равной 900, чтобы соответствовать ширине вашего слайдера

3. ….. Не могу поверить, что я этого не видел. Вау. Спасибо. Я чувствую себя …. теперь слепым .. хаха, спасибо: D

Ответ №2:

Вот пример css, чтобы получить границы для всего активного большого пальца:

    .nivo-controlNav img {
        z-index: 11;
        height: 85px; 
        width: 165px; 
        display:inline;
        position:relative;
        margin-right:10px;
    }
     a.active img{
        -moz-box-shadow: 0 0 5px 5px #1a64ac;
        -webkit-box-shadow: 0 0 5px 5px#1a64ac;
        box-shadow: 0 0 5px 5px #1a64ac;
    }
.nivo-controlNav a.active {
    opacity: 1; 
    z-index: 10;
}
.nivo-controlNav a:hover {
background: none;
text-decoration: none; 
opacity: 0.9; 
}

Ответ №3:

Так это то, что вам нужно? или что-то еще?

 #slider .nivo-controlNav {
    position: absolute;
    bottom: 0;
    width: 960px;
}

.theme-default .nivo-controlNav a {
    display:block;
    width: 126px;
    height: 92px;
    background:url(bullets.png) no-repeat;
    text-indent:-9999px;
    border:0;
    margin-right:3px;
    float:left;
}

Ответ №4:

Решением вашей проблемы может быть простой формат DTD, у вас его нет в вашем HTML-теге, просто добавив любой формат DTD, возможно, переходный или строгий Doctype Doctype мог бы решить проблему с миниатюрой…