#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. Для настройки вашего слайдера должен быть пользовательский html / css… можете ли вы включить это также? Может помочь.
Ответ №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;
}
Комментарии:
1. Изображения были оформлены, но они все еще собраны вместе.
2. Ты потрясающий! Я повсюду искал место для этого оформления!
Ответ №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 мог бы решить проблему с миниатюрой…