Nivo Slide с использованием DIV вместо IMG

Question

Я считаю Nivo Slider лучшим решением для моего сайта. Тем не менее, я хочу, чтобы DIV делались на слайды, а не на 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'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);

Большое спасибо заранее! : -))

Answer 1

Редактировать: Эффект среза не может быть применен ни к какому элементу, кроме изображения, так как скрипт генерирует срезы (деления) с изображением в качестве background-image. Фоновое изображение располагается в соответствии с положением среза, а затем срез (div) перемещается сверху вниз, снизу вверх или как угодно. Опять же, это невозможно сделать ни с каким другим элементом, кроме img, так как вы не можете установить контекст элемента div на фоне другого элемента div. (Ну, я думаю, это можно сделать с помощью CSS 3 и HTML 5 - но waaait для этого: -))

Есть несколько вещей, которые вы можете сделать. Погрузитесь в javascript и измените nivo в соответствии с вашими пожеланиями или напишите свой собственный плагин. Смотрите учебник здесь . Поскольку это может быть довольно много работы, и вы, вероятно, не хотите изобретать велосипед, я предлагаю вам использовать плагин, который имеет лучшую поддержку для настройки. Чтобы понять уровень возможной настройки плагинов, вы всегда должны взглянуть на настройки по умолчанию. Как правило, чем больше «значений по умолчанию» (== доступных параметров), тем лучше. Существуют тысячи блогов о плагинах jQuery для слайдера контента (да, вы ищете слайдер контента, а не слайдер изображений ;-)). Так что испытайте удачу в Google или проверьте следующее:

• bxSlider довольно приятно (и выглядит как тот, который вы изначально в розыске.
• Ползунок .
• Один из тех, 30 лучших ... *. · блоги, · 1018 *

Надеюсь, это поможет.

Answer 2

Взгляните на Ринослайдер .

Он может делать переходы, похожие на nivoslider, с элементами html.