Nivo Slide usando DIV en lugar de IMG

Question

He encontrado que Nivo Slider es la mejor solución para mi sitio. Sin embargo, quiero que haga DIV en diapositivas, y no IMG como lo hace de forma predeterminada. He intentado cambiar todo IMG a DIV en el archivo JS, pero por supuesto sin suerte ...

¿Alguien me puede ayudar?

/* 
* 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's 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); 

Muchas gracias de antemano! :-))

Answer 1

Editar: El efecto de sector no se puede aplicar a ningún elemento que no sea una imagen, ya que el script genera divisiones (divs) con la imagen como imagen de fondo. La imagen de fondo se coloca de acuerdo con la posición del corte y luego el corte (div) se mueve hacia arriba, hacia abajo o lo que sea. Nuevamente, no se puede hacer con ningún elemento que no sea img, ya que no puede establecer el contenido de un div en un fondo de otro div. (Bueno, supongo que se podría hacer con css 3 y html 5, pero estoy de acuerdo :-))

Hay algunas cosas que puede hacer. Sumérgete en javascript y cambia nivo de acuerdo a tus deseos o escribe tu propio plugin. Vea un tutorial here. Como esto podría ser bastante trabajo y probablemente no desee reinventar la rueda, le sugiero que use un complemento que tenga un mejor soporte para la personalización. Para obtener una comprensión de un nivel de complementos de posible personalización, siempre debe echar un vistazo a los valores predeterminados. Generalmente, cuanto más "predeterminados" (== opciones disponibles), mejor. Hay miles de entradas de blog sobre los complementos del control deslizante de contenido de jquery (sí, busca un control deslizante de contenido, no un control deslizante de imagen ;-)). Así que probar suerte en Google o echa un vistazo a los siguientes:

• bxSlider es bastante agradable (y se parece a la que originalmente quería
• El coda slider
• Uno de los 30 best la .... . entradas del blog.

espero que esto ayude.

Answer 2

Ta ke un vistazo a Rhinoslider.

Es capaz de hacer transiciones similares a nivoslider con elementos html.