Nivo Slide с использованием DIVs вместо IMG
Я нашел Nivo Slider лучшим решением для моего сайта. Тем не менее, я хочу, чтобы он делал DIVs для слайдов, а не IMG, как это делает по умолчанию. Я попытался изменить все IMG на DIV в JS файле, но, конечно, без везения...
Может ли кто-нибудь мне помочь?
/*
* jQuery Nivo Slider v2.0
* http://nivo.dev7studios.com
*
* Copyright 2010, Gilbert Pellegrom
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* May 2010 - Pick random effect from specified set of effects by toronegro
* May 2010 - controlNavThumbsFromRel option added by nerd-sh
* May 2010 - Do not start nivoRun timer if there is only 1 slide by msielski
* April 2010 - controlNavThumbs option added by Jamie Thompson (http://jamiethompson.co.uk)
* March 2010 - manualAdvance option added by HelloPablo (http://hellopablo.co.uk)
*/
(function($) {
$.fn.nivoSlider = function(options) {
//Defaults are below
var settings = $.extend({}, $.fn.nivoSlider.defaults, options);
return this.each(function() {
//Useful variables. Play carefully.
var vars = {
currentSlide: 0,
currentImage: '',
totalSlides: 0,
randAnim: '',
running: false,
paused: false,
stop:false
};
//Get this slider
var slider = $(this);
slider.data('nivo:vars', vars);
slider.css('position','relative');
slider.addClass('nivoSlider');
//Find our slider children
var kids = slider.children();
kids.each(function() {
var child = $(this);
var link = '';
if(!child.is('img')){
if(child.is('a')){
child.addClass('nivo-imageLink');
link = child;
}
child = child.find('img:first');
}
//Get img width & height
var childWidth = child.width();
if(childWidth == 0) childWidth = child.attr('width');
var childHeight = child.height();
if(childHeight == 0) childHeight = child.attr('height');
//Resize the slider
if(childWidth > slider.width()){
slider.width(childWidth);
}
if(childHeight > slider.height()){
slider.height(childHeight);
}
if(link != ''){
link.css('display','none');
}
child.css('display','none');
vars.totalSlides++;
});
//Set startSlide
if(settings.startSlide > 0){
if(settings.startSlide >= vars.totalSlides) settings.startSlide = vars.totalSlides - 1;
vars.currentSlide = settings.startSlide;
}
//Get initial image
if($(kids[vars.currentSlide]).is('img')){
vars.currentImage = $(kids[vars.currentSlide]);
} else {
vars.currentImage = $(kids[vars.currentSlide]).find('img:first');
}
//Show initial link
if($(kids[vars.currentSlide]).is('a')){
$(kids[vars.currentSlide]).css('display','block');
}
//Set first background
slider.css('background','url('+ vars.currentImage.attr('src') +') no-repeat');
//Add initial slices
for(var i = 0; i < settings.slices; i++){
var sliceWidth = Math.round(slider.width()/settings.slices);
if(i == settings.slices-1){
slider.append(
$('<div class="nivo-slice"></div>').css({ left:(sliceWidth*i)+'px', width:(slider.width()-(sliceWidth*i))+'px' })
);
} else {
slider.append(
$('<div class="nivo-slice"></div>').css({ left:(sliceWidth*i)+'px', width:sliceWidth+'px' })
);
}
}
//Create caption
slider.append(
$('<div class="nivo-caption"><p></p></div>').css({ display:'none', opacity:settings.captionOpacity })
);
//Process initial caption
if(vars.currentImage.attr('title') != ''){
$('.nivo-caption p', slider).html(vars.currentImage.attr('title'));
$('.nivo-caption', slider).fadeIn(settings.animSpeed);
}
//In the words of Super Mario "let a go!"
var timer = 0;
if(!settings.manualAdvance && kids.length > 1){
timer = setInterval(function(){ nivoRun(slider, kids, settings, false); }, settings.pauseTime);
}
//Add Direction nav
if(settings.directionNav){
slider.append('<div class="nivo-directionNav"><a class="nivo-prevNav">Prev</a><a class="nivo-nextNav">Next</a></div>');
//Hide Direction nav
if(settings.directionNavHide){
$('.nivo-directionNav', slider).hide();
slider.hover(function(){
$('.nivo-directionNav', slider).show();
}, function(){
$('.nivo-directionNav', slider).hide();
});
}
$('a.nivo-prevNav', slider).live('click', function(){
if(vars.running) return false;
clearInterval(timer);
timer = '';
vars.currentSlide-=2;
nivoRun(slider, kids, settings, 'prev');
});
$('a.nivo-nextNav', slider).live('click', function(){
if(vars.running) return false;
clearInterval(timer);
timer = '';
nivoRun(slider, kids, settings, 'next');
});
}
//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 +'</a>');
}
}
//Set initial active link
$('.nivo-controlNav a:eq('+ vars.currentSlide +')', slider).addClass('active');
$('.nivo-controlNav a', slider).live('click', function(){
if(vars.running) return false;
if($(this).hasClass('active')) return false;
clearInterval(timer);
timer = '';
slider.css('background','url('+ vars.currentImage.attr('src') +') no-repeat');
vars.currentSlide = $(this).attr('rel') - 1;
nivoRun(slider, kids, settings, 'control');
});
}
//Keyboard Navigation
if(settings.keyboardNav){
$(window).keypress(function(event){
//Left
if(event.keyCode == '37'){
if(vars.running) return false;
clearInterval(timer);
timer = '';
vars.currentSlide-=2;
nivoRun(slider, kids, settings, 'prev');
}
//Right
if(event.keyCode == '39'){
if(vars.running) return false;
clearInterval(timer);
timer = '';
nivoRun(slider, kids, settings, 'next');
}
});
}
//For pauseOnHover setting
if(settings.pauseOnHover){
slider.hover(function(){
vars.paused = true;
clearInterval(timer);
timer = '';
}, function(){
vars.paused = false;
//Restart the timer
if(timer == '' && !settings.manualAdvance){
timer = setInterval(function(){ nivoRun(slider, kids, settings, false); }, settings.pauseTime);
}
});
}
//Event when Animation finishes
slider.bind('nivo:animFinished', function(){
vars.running = false;
//Hide child links
$(kids).each(function(){
if($(this).is('a')){
$(this).css('display','none');
}
});
//Show current link
if($(kids[vars.currentSlide]).is('a')){
$(kids[vars.currentSlide]).css('display','block');
}
//Restart the timer
if(timer == '' && !vars.paused && !settings.manualAdvance){
timer = setInterval(function(){ nivoRun(slider, kids, settings, false); }, settings.pauseTime);
}
//Trigger the afterChange callback
settings.afterChange.call(this);
});
});
function nivoRun(slider, kids, settings, nudge){
//Get our vars
var vars = slider.data('nivo:vars');
if((!vars || vars.stop) && !nudge) return false;
//Trigger the beforeChange callback
settings.beforeChange.call(this);
//Set current background before change
if(!nudge){
slider.css('background','url('+ vars.currentImage.attr('src') +') no-repeat');
} else {
if(nudge == 'prev'){
slider.css('background','url('+ vars.currentImage.attr('src') +') no-repeat');
}
if(nudge == 'next'){
slider.css('background','url('+ vars.currentImage.attr('src') +') no-repeat');
}
}
vars.currentSlide++;
if(vars.currentSlide == vars.totalSlides){
vars.currentSlide = 0;
//Trigger the slideshowEnd callback
settings.slideshowEnd.call(this);
}
if(vars.currentSlide < 0) vars.currentSlide = (vars.totalSlides - 1);
//Set vars.currentImage
if($(kids[vars.currentSlide]).is('img')){
vars.currentImage = $(kids[vars.currentSlide]);
} else {
vars.currentImage = $(kids[vars.currentSlide]).find('img:first');
}
//Set acitve links
if(settings.controlNav){
$('.nivo-controlNav a', slider).removeClass('active');
$('.nivo-controlNav a:eq('+ vars.currentSlide +')', slider).addClass('active');
}
//Process caption
if(vars.currentImage.attr('title') != ''){
if($('.nivo-caption', slider).css('display') == 'block'){
$('.nivo-caption p', slider).fadeOut(settings.animSpeed, function(){
$(this).html(vars.currentImage.attr('title'));
$(this).fadeIn(settings.animSpeed);
});
} else {
$('.nivo-caption p', slider).html(vars.currentImage.attr('title'));
}
$('.nivo-caption', slider).fadeIn(settings.animSpeed);
} else {
$('.nivo-caption', slider).fadeOut(settings.animSpeed);
}
//Set new slice backgrounds
var i = 0;
$('.nivo-slice', slider).each(function(){
var sliceWidth = Math.round(slider.width()/settings.slices);
$(this).css({ height:'0px', opacity:'0',
background: 'url('+ vars.currentImage.attr('src') +') no-repeat -'+ ((sliceWidth + (i * sliceWidth)) - sliceWidth) +'px 0%' });
i++;
});
if(settings.effect == 'random'){
var anims = new Array("sliceDownRight","sliceDownLeft","sliceUpRight","sliceUpLeft","sliceUpDown","sliceUpDownLeft","fold","fade");
vars.randAnim = anims[Math.floor(Math.random()*(anims.length + 1))];
if(vars.randAnim == undefined) vars.randAnim = 'fade';
}
//Run random effect from specified set (eg: effect:'fold,fade')
if(settings.effect.indexOf(',') != -1){
var anims = settings.effect.split(',');
vars.randAnim = $.trim(anims[Math.floor(Math.random()*anims.length)]);
}
//Run effects
vars.running = true;
if(settings.effect == 'sliceDown' || settings.effect == 'sliceDownRight' || vars.randAnim == 'sliceDownRight' ||
settings.effect == 'sliceDownLeft' || vars.randAnim == 'sliceDownLeft'){
var timeBuff = 0;
var i = 0;
var slices = $('.nivo-slice', slider);
if(settings.effect == 'sliceDownLeft' || vars.randAnim == 'sliceDownLeft') slices = $('.nivo-slice', slider).reverse();
slices.each(function(){
var slice = $(this);
slice.css('top','0px');
if(i == settings.slices-1){
setTimeout(function(){
slice.animate({ height:'100%', opacity:'1.0' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); });
}, (100 + timeBuff));
} else {
setTimeout(function(){
slice.animate({ height:'100%', opacity:'1.0' }, settings.animSpeed);
}, (100 + timeBuff));
}
timeBuff += 50;
i++;
});
}
else if(settings.effect == 'sliceUp' || settings.effect == 'sliceUpRight' || vars.randAnim == 'sliceUpRight' ||
settings.effect == 'sliceUpLeft' || vars.randAnim == 'sliceUpLeft'){
var timeBuff = 0;
var i = 0;
var slices = $('.nivo-slice', slider);
if(settings.effect == 'sliceUpLeft' || vars.randAnim == 'sliceUpLeft') slices = $('.nivo-slice', slider).reverse();
slices.each(function(){
var slice = $(this);
slice.css('bottom','0px');
if(i == settings.slices-1){
setTimeout(function(){
slice.animate({ height:'100%', opacity:'1.0' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); });
}, (100 + timeBuff));
} else {
setTimeout(function(){
slice.animate({ height:'100%', opacity:'1.0' }, settings.animSpeed);
}, (100 + timeBuff));
}
timeBuff += 50;
i++;
});
}
else if(settings.effect == 'sliceUpDown' || settings.effect == 'sliceUpDownRight' || vars.randAnim == 'sliceUpDown' ||
settings.effect == 'sliceUpDownLeft' || vars.randAnim == 'sliceUpDownLeft'){
var timeBuff = 0;
var i = 0;
var v = 0;
var slices = $('.nivo-slice', slider);
if(settings.effect == 'sliceUpDownLeft' || vars.randAnim == 'sliceUpDownLeft') slices = $('.nivo-slice', slider).reverse();
slices.each(function(){
var slice = $(this);
if(i == 0){
slice.css('top','0px');
i++;
} else {
slice.css('bottom','0px');
i = 0;
}
if(v == settings.slices-1){
setTimeout(function(){
slice.animate({ height:'100%', opacity:'1.0' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); });
}, (100 + timeBuff));
} else {
setTimeout(function(){
slice.animate({ height:'100%', opacity:'1.0' }, settings.animSpeed);
}, (100 + timeBuff));
}
timeBuff += 50;
v++;
});
}
else if(settings.effect == 'fold' || vars.randAnim == 'fold'){
var timeBuff = 0;
var i = 0;
$('.nivo-slice', slider).each(function(){
var slice = $(this);
var origWidth = slice.width();
slice.css({ top:'0px', height:'100%', width:'0px' });
if(i == settings.slices-1){
setTimeout(function(){
slice.animate({ width:origWidth, opacity:'1.0' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); });
}, (100 + timeBuff));
} else {
setTimeout(function(){
slice.animate({ width:origWidth, opacity:'1.0' }, settings.animSpeed);
}, (100 + timeBuff));
}
timeBuff += 50;
i++;
});
}
else if(settings.effect == 'fade' || vars.randAnim == 'fade'){
var i = 0;
$('.nivo-slice', slider).each(function(){
$(this).css('height','100%');
if(i == settings.slices-1){
$(this).animate({ opacity:'1.0' }, (settings.animSpeed*2), '', function(){ slider.trigger('nivo:animFinished'); });
} else {
$(this).animate({ opacity:'1.0' }, (settings.animSpeed*2));
}
i++;
});
}
}
};
//Default settings
$.fn.nivoSlider.defaults = {
effect:'random',
slices:15,
animSpeed:500,
pauseTime:3000,
startSlide:0,
directionNav:true,
directionNavHide:true,
controlNav:true,
controlNavThumbs:false,
controlNavThumbsFromRel:false,
controlNavThumbsSearch:'.jpg',
controlNavThumbsReplace:'_thumb.jpg',
keyboardNav:true,
pauseOnHover:true,
manualAdvance:false,
captionOpacity:0.8,
beforeChange: function(){},
afterChange: function(){},
slideshowEnd: function(){}
};
$.fn.reverse = [].reverse;
})(jQuery);
Спасибо вам заблаговременно!: -))
Ответы
Ответ 1
Изменить: эффект среза нельзя применить к какому-либо элементу, отличному от изображения, так как script создает срезы (div) с изображением в качестве фонового изображения. Фоновое изображение позиционируется в соответствии с положением среза, а затем срез (div) перемещается сверху вниз, снизу вверх или что угодно. Опять же, не может быть сделано ни с каким другим элементом, кроме img, так как вы не можете установить контур div на фоне другого div. (Ну, я думаю, это можно сделать с помощью css 3 и html 5 - но waaait для этого: -))
Есть несколько вещей, которые вы можете сделать. Погрузитесь в javascript и измените nivo в соответствии с вашими пожеланиями или напишите свой собственный плагин. См. Учебник . Поскольку это может быть довольно много работы, и вы, вероятно, не хотите изобретать колесо, я предлагаю вам использовать плагин, который имеет лучшую поддержку для настройки. Чтобы понять уровень возможной настройки плагинов, вы всегда должны смотреть на значения по умолчанию. Как правило, чем больше "значений по умолчанию" (== доступные опции), тем лучше. Есть тысячи blogposts о плагинах слайдера содержимого jquery (да, вы просматриваете слайдер контента, а не слайдер изображения;-)). Поэтому попробуйте свою удачу в Google или проверьте следующее:
Надеюсь, что это поможет.
Ответ 2
Посмотрите Rhinoslider.
Он способен выполнять переходы, похожие на nivoslider с элементами html.
