Nivo Slide con DIV anziché IMG

Question

Ho trovato Nivo Slider come la migliore soluzione per il mio sito. Tuttavia, voglio che faccia DIV alle diapositive, e non a IMG come fa di default. Ho provato a cambiare tutti IMG a DIV nel file JS, ma naturalmente senza fortuna ...

Qualcuno può aiutarmi ??

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

Grazie mille in anticipo! :-))

Answer 1

Modifica: l'effetto porzione non può essere applicato a nessun elemento tranne un'immagine, poiché lo script genera sezioni (div) con l'immagine come immagine di sfondo. L'immagine di sfondo viene posizionata in base alla posizione della sezione e quindi la sezione (div) viene spostata in alto, in basso o in qualsiasi modo. Di nuovo, non può essere fatto con un elemento diverso da img, dal momento che non è possibile impostare il contet di un div su uno sfondo di un altro div. (Beh, immagino che potrebbe essere fatto con css 3 e html 5 - ma waaait per questo :-))

Ci sono alcune cose che puoi fare. Immergiti in javascript e cambia nivo secondo i tuoi desideri o scrivi il tuo plugin. Vedere uno tutorial here. Dato che questo potrebbe essere un bel po 'di lavoro e probabilmente non vuoi reinventare la ruota, ti suggerisco di usare un plugin che ha un supporto migliore per la personalizzazione. Per comprendere il livello di personalizzazione dei plug-in, devi sempre dare un'occhiata alle impostazioni predefinite. In generale, più "valori predefiniti" (== opzioni disponibili), meglio è. Esistono migliaia di post sui blog relativi ai plug-in del dispositivo di scorrimento del contenuto jQuery, (sì, si cerca un dispositivo di scorrimento del contenuto, non un cursore di immagine ;-)). Quindi, tentare la fortuna su Google o controllare il seguente:

• bxSlider è molto bello (e sembra quella che in origine voleva
• Il coda slider
• Uno di quelli del 30 best .... . blogposts.

Spero che questo aiuti.

Answer 2

Ta dai un'occhiata a Rhinoslider.

È in grado di fare transizioni simili a nivoslider con elementi html.