Nivo Slide using DIVs instead of IMG

Question

Hello jQuery heros! :-)

I've found Nivo Slider to be the best solution for my site. However, I want it to make DIVs to slides, and not IMGs like it does by default. I've tried to change all IMG to DIV in the JS-file, but ofcourse without any luck...

Can anyone help me??

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

Thank you very much in advance! :-))

Answer 1

Edit: The slice effect can't be applied to any element other than an image, since the script generates slices (divs) with the image as background-image. The background-image is positioned according to the position of the slice and then the slice (div) is moved top down, bottom up or whatever. Again, can't be done with any element other than img, since you can't set the contet of a div to a background of another div. (Well I guess it could be done with css 3 and html 5 - but waaait for it :-))

There are a few things you can do. Dive into javascript and change nivo according to your wishes or write your own plugin. See a tutorial here. Since this could be quite a lot of work and you probably don't want to reinvent the wheel, I suggest you use a plugin which has a better support for customization. To get a grasp of a plugins level of possible customization, you should always take a look at the defaults. Generally - the more 'defaults' (== available options) - the better. There are thousands of blogposts about jquery content slider plugins, (yes, you search a content slider, not an image slider ;-)). So try your luck on google or check out the following:

• This one is quite nice (and looks like the one you originally wanted.
• The coda slider.
• One of those the 30 best ... blogposts.

Hope this helps.