PHP:
-----------------
------------------

Нужна помощь со слайдером

Тема в разделе "Другие языки программирования", создана пользователем Beliar, 11 июн 2014.

  1. Beliar

    Beliar Новичек

    132
    0
    Всем привет, нужна помощь со слайдером (Nivo Slider)

    Суть в том что слайдер у меня работает как ротатор контента, то есть последние 6 новостей попадают в слайдер, с картинкой, заголовком новости и обрезанным текстом, скрин ниже.

    При смене слайдов используется не стандартный переход от одного изображения к другому, из за чего картинка в слайдере режется на не сколько картинок, ну для красивого эффекта короче, из за этого все картинки для слайдера а так же для новостей необходимо обрезать в редакторе под размеры слайдера, а это очень неудобно. хотелось бы сделать следующее: Убрать все красивости смены слайдов, оставить тупо сдвиг вправо, и задать размеры изображения что бы они просто ужимались и более менее корректно отображались в слайдере.

    Код самого слайдера:

    /*
    * jQuery Nivo Slider v2.5.2
    * http://nivo.dev7studios.com
    *
    * Copyright 2011, Gilbert Pellegrom
    * Free to use and abuse under the MIT license.
    * http://www.opensource.org/licenses/mit-license.php
    *
    * March 2010
    */

    (function($) {

    var NivoSlider = function(element, options){
    //Defaults are below
    var settings = $.extend({}, $.fn.nivoSlider.defaults, options);

    //Useful variables. Play carefully.
    var vars = {
    currentSlide: 0,
    currentImage: '',
    totalSlides: 0,
    randAnim: '',
    running: false,
    paused: false,
    stop: false
    };

    //Get this slider
    var slider = $(element);
    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');

    //Create caption
    slider.append(
    $('
    ').css({ display:'none', opacity:settings.captionOpacity })
    );

    // Process caption function
    var processCaption = function(settings){
    var nivoCaption = $('.nivo-caption', slider);
    if(vars.currentImage.attr('title') != '' && vars.currentImage.attr('title') != undefined){
    var title = vars.currentImage.attr('title');
    if(title.substr(0,1) == '#') title = $(title).html();

    if(nivoCaption.css('display') == 'block'){
    nivoCaption.children('.nivo-caption-inner').fadeOut(settings.animSpeed, function(){
    $(this).html(title);
    $(this).fadeIn(settings.animSpeed);
    });
    } else {
    nivoCaption.children('.nivo-caption-inner').html(title);
    }
    nivoCaption.fadeIn(settings.animSpeed);
    } else {
    nivoCaption.fadeOut(settings.animSpeed);
    }
    }

    //Process initial caption
    processCaption(settings);

    //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(''+ settings.prevText +''+ settings.nextText +'
    ');

    //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 = $('
    ');
    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('[​IMG]');
    } else {
    nivoControl.append('[​IMG]');
    }
    } else {
    nivoControl.append(''+ (i + 1) +'');
    }

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

    // Add slices for slice animations
    var createSlices = function(slider, settings, vars){
    for(var i = 0; i < settings.slices; i++){
    var sliceWidth = Math.round(slider.width()/settings.slices);
    if(i == settings.slices-1){
    slider.append(
    $('
    ').css({
    left:(sliceWidth*i)+'px', width:(slider.width()-(sliceWidth*i))+'px',
    height:'0px',
    opacity:'0',
    background: 'url("'+ vars.currentImage.attr('src') +'") no-repeat -'+ ((sliceWidth + (i * sliceWidth)) - sliceWidth) +'px 0%'
    })
    );
    } else {
    slider.append(
    $('
    ').css({
    left:(sliceWidth*i)+'px', width:sliceWidth+'px',
    height:'0px',
    opacity:'0',
    background: 'url("'+ vars.currentImage.attr('src') +'") no-repeat -'+ ((sliceWidth + (i * sliceWidth)) - sliceWidth) +'px 0%'
    })
    );
    }
    }
    }

    // Add boxes for box animations
    var createBoxes = function(slider, settings, vars){
    var boxWidth = Math.round(slider.width()/settings.boxCols);
    var boxHeight = Math.round(slider.height()/settings.boxRows);

    for(var rows = 0; rows < settings.boxRows; rows++){
    for(var cols = 0; cols < settings.boxCols; cols++){
    if(cols == settings.boxCols-1){
    slider.append(
    $('
    ').css({
    opacity:0,
    left:(boxWidth*cols)+'px',
    top:(boxHeight*rows)+'px',
    width:(slider.width()-(boxWidth*cols))+'px',
    height:boxHeight+'px',
    background: 'url("'+ vars.currentImage.attr('src') +'") no-repeat -'+ ((boxWidth + (cols * boxWidth)) - boxWidth) +'px -'+ ((boxHeight + (rows * boxHeight)) - boxHeight) +'px'
    })
    );
    } else {
    slider.append(
    $('
    ').css({
    opacity:0,
    left:(boxWidth*cols)+'px',
    top:(boxHeight*rows)+'px',
    width:boxWidth+'px',
    height:boxHeight+'px',
    background: 'url("'+ vars.currentImage.attr('src') +'") no-repeat -'+ ((boxWidth + (cols * boxWidth)) - boxWidth) +'px -'+ ((boxHeight + (rows * boxHeight)) - boxHeight) +'px'
    })
    );
    }
    }
    }
    }

    // Private run method
    var nivoRun = function(slider, kids, settings, nudge){
    //Get our vars
    var vars = slider.data('nivo:vars');

    //Trigger the lastSlide callback
    if(vars && (vars.currentSlide == vars.totalSlides - 1)){
    settings.lastSlide.call(this);
    }

    // Stop
    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++;
    //Trigger the slideshowEnd callback
    if(vars.currentSlide == vars.totalSlides){
    vars.currentSlide = 0;
    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 active links
    if(settings.controlNav){
    $('.nivo-controlNav a', slider).removeClass('active');
    $('.nivo-controlNav a:eq('+ vars.currentSlide +')', slider).addClass('active');
    }

    //Process caption
    processCaption(settings);

    // Remove any slices from last transition
    $('.nivo-slice', slider).remove();

    // Remove any boxes from last transition
    $('.nivo-box', slider).remove();

    if(settings.effect == 'random'){
    var anims = new Array('sliceDownRight','sliceDownLeft','sliceUpRight','sliceUpLeft','sliceUpDown','sliceUpDownLeft','fold','fade',
    'boxRandom','boxRain','boxRainReverse','boxRainGrow','boxRainGrowReverse');
    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 = anims[Math.floor(Math.random()*(anims.length))];
    if(vars.randAnim == undefined) vars.randAnim = 'fade';
    }

    //Run effects
    vars.running = true;
    if(settings.effect == 'sliceDown' || settings.effect == 'sliceDownRight' || vars.randAnim == 'sliceDownRight' ||
    settings.effect == 'sliceDownLeft' || vars.randAnim == 'sliceDownLeft'){
    createSlices(slider, settings, vars);
    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'){
    createSlices(slider, settings, vars);
    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'){
    createSlices(slider, settings, vars);
    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'){
    createSlices(slider, settings, vars);
    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:eek:rigWidth, opacity:'1.0' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); });
    }, (100 + timeBuff));
    } else {
    setTimeout(function(){
    slice.animate({ width:eek:rigWidth, opacity:'1.0' }, settings.animSpeed);
    }, (100 + timeBuff));
    }
    timeBuff += 50;
    i++;
    });
    }
    else if(settings.effect == 'fade' || vars.randAnim == 'fade'){
    createSlices(slider, settings, vars);

    var firstSlice = $('.nivo-slice:first', slider);
    firstSlice.css({
    'height': '100%',
    'width': slider.width() + 'px'
    });

    firstSlice.animate({ opacity:'1.0' }, (settings.animSpeed*2), '', function(){ slider.trigger('nivo:animFinished'); });
    }
    else if(settings.effect == 'slideInRight' || vars.randAnim == 'slideInRight'){
    createSlices(slider, settings, vars);

    var firstSlice = $('.nivo-slice:first', slider);
    firstSlice.css({
    'height': '100%',
    'width': '0px',
    'opacity': '1'
    });

    firstSlice.animate({ width: slider.width() + 'px' }, (settings.animSpeed*2), '', function(){ slider.trigger('nivo:animFinished'); });
    }
    else if(settings.effect == 'slideInLeft' || vars.randAnim == 'slideInLeft'){
    createSlices(slider, settings, vars);

    var firstSlice = $('.nivo-slice:first', slider);
    firstSlice.css({
    'height': '100%',
    'width': '0px',
    'opacity': '1',
    'left': '',
    'right': '0px'
    });

    firstSlice.animate({ width: slider.width() + 'px' }, (settings.animSpeed*2), '', function(){
    // Reset positioning
    firstSlice.css({
    'left': '0px',
    'right': ''
    });
    slider.trigger('nivo:animFinished');
    });
    }
    else if(settings.effect == 'boxRandom' || vars.randAnim == 'boxRandom'){
    createBoxes(slider, settings, vars);

    var totalBoxes = settings.boxCols * settings.boxRows;
    var i = 0;
    var timeBuff = 0;

    var boxes = shuffle($('.nivo-box', slider));
    boxes.each(function(){
    var box = $(this);
    if(i == totalBoxes-1){
    setTimeout(function(){
    box.animate({ opacity:'1' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); });
    }, (100 + timeBuff));
    } else {
    setTimeout(function(){
    box.animate({ opacity:'1' }, settings.animSpeed);
    }, (100 + timeBuff));
    }
    timeBuff += 20;
    i++;
    });
    }
    else if(settings.effect == 'boxRain' || vars.randAnim == 'boxRain' || settings.effect == 'boxRainReverse' || vars.randAnim == 'boxRainReverse' ||
    settings.effect == 'boxRainGrow' || vars.randAnim == 'boxRainGrow' || settings.effect == 'boxRainGrowReverse' || vars.randAnim == 'boxRainGrowReverse'){
    createBoxes(slider, settings, vars);

    var totalBoxes = settings.boxCols * settings.boxRows;
    var i = 0;
    var timeBuff = 0;

    // Split boxes into 2D array
    var rowIndex = 0;
    var colIndex = 0;
    var box2Darr = new Array();
    box2Darr[rowIndex] = new Array();
    var boxes = $('.nivo-box', slider);
    if(settings.effect == 'boxRainReverse' || vars.randAnim == 'boxRainReverse' ||
    settings.effect == 'boxRainGrowReverse' || vars.randAnim == 'boxRainGrowReverse'){
    boxes = $('.nivo-box', slider)._reverse();
    }
    boxes.each(function(){
    box2Darr[rowIndex][colIndex] = $(this);
    colIndex++;
    if(colIndex == settings.boxCols){
    rowIndex++;
    colIndex = 0;
    box2Darr[rowIndex] = new Array();
    }
    });

    // Run animation
    for(var cols = 0; cols < (settings.boxCols * 2); cols++){
    var prevCol = cols;
    for(var rows = 0; rows < settings.boxRows; rows++){
    if(prevCol >= 0 && prevCol < settings.boxCols){
    /* Due to some weird JS bug with loop vars
    being used in setTimeout, this is wrapped
    with an anonymous function call */
    (function(row, col, time, i, totalBoxes) {
    var box = $(box2Darr[row][col]);
    var w = box.width();
    var h = box.height();
    if(settings.effect == 'boxRainGrow' || vars.randAnim == 'boxRainGrow' ||
    settings.effect == 'boxRainGrowReverse' || vars.randAnim == 'boxRainGrowReverse'){
    box.width(0).height(0);
    }
    if(i == totalBoxes-1){
    setTimeout(function(){
    box.animate({ opacity:'1', width:w, height:h }, settings.animSpeed/1.3, '', function(){ slider.trigger('nivo:animFinished'); });
    }, (100 + time));
    } else {
    setTimeout(function(){
    box.animate({ opacity:'1', width:w, height:h }, settings.animSpeed/1.3);
    }, (100 + time));
    }
    })(rows, prevCol, timeBuff, i, totalBoxes);
    i++;
    }
    prevCol--;
    }
    timeBuff += 100;
    }
    }
    }

    // Shuffle an array
    var shuffle = function(arr){
    for(var j, x, i = arr.length; i; j = parseInt(Math.random() * i), x = arr[--i], arr = arr[j], arr[j] = x);
    return arr;
    }

    // For debugging
    var trace = function(msg){
    if (this.console && typeof console.log != "undefined")
    console.log(msg);
    }

    // Start / Stop
    this.stop = function(){
    if(!$(element).data('nivo:vars').stop){
    $(element).data('nivo:vars').stop = true;
    trace('Stop Slider');
    }
    }

    this.start = function(){
    if($(element).data('nivo:vars').stop){
    $(element).data('nivo:vars').stop = false;
    trace('Start Slider');
    }
    }

    //Trigger the afterLoad callback
    settings.afterLoad.call(this);

    return this;
    };

    $.fn.nivoSlider = function(options) {

    return this.each(function(key, value){
    var element = $(this);
    // Return early if this element already has a plugin instance
    if (element.data('nivoslider')) return element.data('nivoslider');
    // Pass options to plugin constructor
    var nivoslider = new NivoSlider(this, options);
    // Store plugin object in this element's data
    element.data('nivoslider', nivoslider);
    });

    };

    //Default settings
    $.fn.nivoSlider.defaults = {
    effect: 'sliceDownLeft',
    slices: 15,
    boxCols: 8,
    boxRows: 4,
    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,
    prevText: 'Prev',
    nextText: 'Next',
    beforeChange: function(){},
    afterChange: function(){},
    slideshowEnd: function(){},
    lastSlide: function(){},
    afterLoad: function(){}
    };

    $.fn._reverse = [].reverse;

    })(jQuery);


    Собственно код как именно выводиться картинка в слайдер:

    [​IMG]

    При этом параметры width и height не работают.
     

Поделиться этой страницей