превью в nivo slider

[cyklop77]

если кто-нибудь пользовался nivo slider, то помогите пожалуйста разобраться каким образом делается превью. под превью я понимаю замену дефолтных точек на определенные картинки(точки видны например здесь, под самим слайдером, 3 штуки).

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

у меня не получилось

Edited February 16, 2012 by cyklop77

[DrStrangeLove]

Что именно ты хочешь?? чтобы у тебя было как здесь??

[cyklop77]

Что именно ты хочешь?? чтобы у тебя было как здесь??

нет. примерно как здесь http://www.eldorado.ru/

причем цифры картинками.

Edited February 17, 2012 by cyklop77

[buddah]

Тебе нужно изменить внешний вид картинок или генерировать мини-превью фотографий? Если первое, то если заглянуть в код демо, то видно, что в блоке nivo-controlNav есть ссылки a, которым прописана картинка bullets.png. Меняешь на свою и вуаля.

Если второе - нужно допиливать слайдер кодом.

[cyklop77]

buddah, а можно немного подробнее (для тупых). я просмотрел функцией поиска все файлы демо и фразу nivo-controlNav нашел только в файле jquery.nivo.slider

вот кусок кода

        //Add Control nav
        if(settings.controlNav){
            var nivoControl = $('<div class="nivo-controlNav"></div>');
            slider.append(nivoControl);
            for(var i = 0; i < kids.length; i++){
                if(settings.controlNavThumbs){
                    var child = kids.eq(i);
                    if(!child.is('img')){
                        child = child.find('img:first');
                    }
                    if (settings.controlNavThumbsFromRel) {
                        nivoControl.append('<a class="nivo-control" rel="'+ i +'"><img src="'+ child.attr('rel') + '" alt="" /></a>');
                    } else {
                        nivoControl.append('<a class="nivo-control" rel="'+ i +'"><img src="'+ child.attr('src').replace(settings.controlNavThumbsSearch, settings.controlNavThumbsReplace) +'" alt="" /></a>');
                    }
                } else {
                    nivoControl.append('<a class="nivo-control" rel="'+ i +'">'+ (i + 1) +'</a>');
                }

            }

про bullets.png здесь нет упоминания.

[buddah]

Скачал этот jQuery плаг посмотреть. Все гениальное - простое)

Открываешь папку

nivo-slider2.7.1 -> themes -> default

и там видишь файл bullets.png

Это спрайт с двумя состояниями кнопки - активным и обычным. Самый простой путь - нарисовать свой, идентичный по размерам, назвать так же и заменить один файл другим. Если нужно больше кастомизации (размер другой например) - правишь файл default.css. А именно этот код:

.theme-default .nivo-controlNav {
	position:absolute;
	left:50%;
	bottom:-42px;
    margin-left:-40px; /* Tweak this to center bullets */
}
.theme-default .nivo-controlNav a {
	display:block;
	width:22px;
	height:22px;
	background:url(bullets.png) no-repeat;
	text-indent:-9999px;
	border:0;
	margin-right:3px;
	float:left;
}
.theme-default .nivo-controlNav a.active {
	background-position:0 -22px;
}

.theme-default .nivo-directionNav a {
	display:block;
	width:30px;
	height:30px;
	background:url(arrows.png) no-repeat;
	text-indent:-9999px;
	border:0;
}
.theme-default a.nivo-nextNav {
	background-position:-30px 0;
	right:15px;
}
.theme-default a.nivo-prevNav {
	left:15px;
}

То есть просто подгоняешь под себя.

[cyklop77]

спасибо, хорошая идея. но мне бы надо примерно как здесь, то есть чтобы все картинки были разные. но класс у всех "превьюшек" один и тот же - nivo-control.

больше всего меня удручает то, что существует способ от разработчиков. ведь есть же атрибуты rel=" " и они как то используются...

[buddah]

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

Превьюшки - это уменьшенная копия текущей фотографии и чтобы генерировать их - нужно допиливать слайдер.

Вот о чем я говорю: http://galleria.io/themes/classic/

[cyklop77]

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

примерно такое же хотел бы сотворить с nivo slider-ом. то есть каждая кнопочка это НЕ уменьшенное изображение слайда.

путанница в теме получилась из-за неправильно употребенного мной термина "превью".

Edited February 17, 2012 by cyklop77

[mishka]

Думаю это несложно:

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

Это строка 175 в неупакованном коде. Для примера смотри как там rel добавлен.

Посмотрел код и вот что нашел:

controlNavThumbs: false -- это по дефолту.

Вызываем ф-цию с параметром

controlNavThumbs: true и смотрим результат. Это годится для превьюшек.