通过一个数组来填充nivoSlider的变量，每个幻灯片都有自己的设置

提问者：小点点

通过一个数组来填充nivoSlider的变量，每个幻灯片都有自己的设置

这是我第三次尝试用查询返回的数据对nivoSlider设置的填充提出不同的问题。感谢所有试图回答我前面问题的人。在这里，我试图提供一个更好的解释，说明我正在努力做什么。

这就是我正在努力做的。我在表中有两个记录，它们包含图像名称、效果、切片、boxCols、boxRows、animSpeed和pausetime。

运行脚本，该脚本返回数据，并使用nivoslider为每个记录显示图像。每张幻灯片有不同的显示要求，例如：

幻灯片No1:
效果-SliceUp
切片-30
框列-16
框列-8
动画速度-8000
暂停时间-12000

幻灯片No2:

效果-框形图
切片-10
框形图-12
框形图-8
动画速度-8000
暂停时间-6000

nivoSlider脚本如下所示：

$(window).load(function() {
  $('#slider').nivoSlider({
    effect: '<?php echo $row['Effect'];?>',
    slices:  '<?php echo $rowe['Slices'];?>',
    boxCols:'<?php echo $row['Cols'];?>',
    boxRows:  '<?php echo $row['Rows'];?>',
    animSpeed:'<?php echo $row['AnimSpeed'];?>',
    pauseTime: '<?php echo $row['TimeLapse'];?>',
    startSlide: 0,
    directionNav: false,
    controlNav: false,
    controlNavThumbs: false,
    pauseOnHover: false,
    manualAdvance: false,
    randomStart: false,
    beforeChange: function(){},
    afterChange: function(){},
    slideshowEnd: function(){},
    lastSlide: function(){},
    afterLoad: function(){}
  });
});

我有一个PHP循环来显示每个图像一个接着一个。

<div class="slider-wrapper theme-default">
  <div id="slider" class="nivoSlider">
   <?php while($row_Signage = mysqli_fetch_assoc($result)) {?>
    <script type="text/javascript">
    $(window).load(function() {
      $('#slider').nivoSlider({
        effect: '<?php echo $row['Effect'];?>',
        slices:  '<?php echo $row['Slices'];?>',
        boxCols:'<?php echo $row['Cols'];?>',
        boxRows:  '<?php echo $row['Rows'];?>',
        animSpeed:'<?php echo $row['AnimSpeed'];?>',
        pauseTime: '<?php echo $row['TimeLapse'];?>',
        startSlide: 0,
        directionNav: false,
        controlNav: false,
        controlNavThumbs: false,
        pauseOnHover: false,
        manualAdvance: false,
        randomStart: false,
        beforeChange: function(){},
        afterChange: function(){},
        slideshowEnd: function(){},
        lastSlide: function(){},
        afterLoad: function(){}
      });
    });
    </script>
    <?php
      echo '<img src="/'.$ImagePath .''.$row['PromotionImage'].'"/> ';
    ?>
    <?php } ?>
  </div>
</div>

对于while循环中的nivoSlider脚本，我希望代码获得第一条记录，并使用nivoSlider脚本中的变量显示它。它确实显示了图像，但也显示了一个空白页，错误为：example.com/apps/signage/exbhx/ds2/undefined。有人建议我需要将一部分代码移到while循环之外，因此我尝试了以下操作：

<?php while($row = mysqli_fetch_assoc($result)) {
  $effect = $row['Effect'];
  $slices = $row['Slices'];
  $boxCols = $row['Cols'];
  $boxRows = $row['Rows'];
  $animSpeed = $row['AnimSpeed'];
  $pauseTime = $row['TimeLapse'];
?>

<script type="text/javascript">
$(window).load(function() {
  $('#slider').nivoSlider({
    effect: '<?php echo $effect;?>',
    slices:  '<?php echo $slices;?>',
    boxCols:'<?php echo $boxCols;?>',
    boxRows:  '<?php echo $boxRows;?>',
    animSpeed:'<?php echo $animSpeed ;?>',
    pauseTime: '<?php echo $pauseTime;?>',
    startSlide: 0,
    directionNav: false,
    controlNav: false,
    controlNavThumbs: false,
    pauseOnHover: false,
    manualAdvance: false,
    randomStart: false,
    beforeChange: function(){},
    afterChange: function(){},
    slideshowEnd: function(){},
    lastSlide: function(){},
    afterLoad: function(){}
  });
});
</script>
<?php
  echo '<img src="/'.$ImagePath .''.$row['PromotionImage'].'"/> ';
?>
<?php } ?>

上述结果如下：

<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect: 'sliceUp',
slices:  '30',
boxCols:'16',
boxRows:  '8',
animSpeed:'8000',
pauseTime: '12000',
startSlide: 0,
directionNav: false,
controlNav: false,
controlNavThumbs: false,
pauseOnHover: false,
manualAdvance: false,
randomStart: false,
beforeChange: function(){},
afterChange: function(){},
slideshowEnd: function(){},
lastSlide: function(){},
afterLoad: function(){}
});
});
</script>
<img src="/apps/signage/promotion_images/EXBHX/boards/DS2/monday_portrait.png"/>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect: 'boxRain',
slices:  '10',
boxCols:'12',
boxRows:  '8',
animSpeed:'8000',
pauseTime: '6000',
startSlide: 0,
directionNav: false,
controlNav: false,
controlNavThumbs: false,
pauseOnHover: false,
manualAdvance: false,
randomStart: false,
beforeChange: function(){},
afterChange: function(){},
slideshowEnd: function(){},
lastSlide: function(){},
afterLoad: function(){}
});
});
</script>
<img src="/apps/signage/promotion_images/EXBHX/boards/DS2/tuesday_portrait.png"/>

这不起作用，它显示相同的内容：error：example.com/apps/signage/exbhx/ds2/undefined这不会停止脚本的运行，但它会在显示循环开始时显示一个空白页。

我可以用不同的方式编写更多的代码，但没有任何工作。

我输得一塌糊涂，谁能帮帮我？

非常感谢您的时间。

库中的代码

Line 90 to line 111

    //Create caption
    slider.append($('<div class="nivo-caption"></div>'));

    // 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'){
                setTimeout(function(){
                    nivoCaption.html(title);
                }, settings.animSpeed);
            } else {
                nivoCaption.html(title);
                nivoCaption.stop().fadeIn(settings.animSpeed);
            }
        } else {
            nivoCaption.stop().fadeOut(settings.animSpeed);
        }
    }


Line 210 to line 240

    // Add slices for slice animations
    var createSlices = function(slider, settings, vars) {
        if($(vars.currentImage).parent().is('a')) $(vars.currentImage).parent().css('display','block');
        $('img[src="'+ vars.currentImage.attr('src') +'"]', slider).not('.nivo-main-image,.nivo-control img').width(slider.width()).css('visibility', 'hidden').show();
        var sliceHeight = ($('img[src="'+ vars.currentImage.attr('src') +'"]', slider).not('.nivo-main-image,.nivo-control img').parent().is('a')) ? $('img[src="'+ vars.currentImage.attr('src') +'"]', slider).not('.nivo-main-image,.nivo-control img').parent().height() : $('img[src="'+ vars.currentImage.attr('src') +'"]', slider).not('.nivo-main-image,.nivo-control img').height();

        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" name="'+i+'"><img src="'+ vars.currentImage.attr('src') +'" style="position:absolute; width:'+ slider.width() +'px; height:auto; display:block !important; top:0; left:-'+ ((sliceWidth + (i * sliceWidth)) - sliceWidth) +'px;" /></div>').css({ 
                        left:(sliceWidth*i)+'px', 
                        width:(slider.width()-(sliceWidth*i))+'px',
                        height:sliceHeight+'px', 
                        opacity:'0',
                        overflow:'hidden'
                    })
                );
            } else {
                slider.append(
                    $('<div class="nivo-slice" name="'+i+'"><img src="'+ vars.currentImage.attr('src') +'" style="position:absolute; width:'+ slider.width() +'px; height:auto; display:block !important; top:0; left:-'+ ((sliceWidth + (i * sliceWidth)) - sliceWidth) +'px;" /></div>').css({ 
                        left:(sliceWidth*i)+'px', 
                        width:sliceWidth+'px',
                        height:sliceHeight+'px',
                        opacity:'0',
                        overflow:'hidden'
                    })
                );
            }
        }

第256行至第286行

        for(var rows = 0; rows < settings.boxRows; rows++){
            for(var cols = 0; cols < settings.boxCols; cols++){
                if(cols === settings.boxCols-1){
                    slider.append(
                        $('<div class="nivo-box" name="'+ cols +'" rel="'+ rows +'"><img src="'+ vars.currentImage.attr('src') +'" style="position:absolute; width:'+ slider.width() +'px; height:auto; display:block; top:-'+ (boxHeight*rows) +'px; left:-'+ (boxWidth*cols) +'px;" /></div>').css({ 
                            opacity:0,
                            left:(boxWidth*cols)+'px', 
                            top:(boxHeight*rows)+'px',
                            width:(slider.width()-(boxWidth*cols))+'px'

                        })
                    );
                    $('.nivo-box[name="'+ cols +'"]', slider).height($('.nivo-box[name="'+ cols +'"] img', slider).height()+'px');
                } else {
                    slider.append(
                        $('<div class="nivo-box" name="'+ cols +'" rel="'+ rows +'"><img src="'+ vars.currentImage.attr('src') +'" style="position:absolute; width:'+ slider.width() +'px; height:auto; display:block; top:-'+ (boxHeight*rows) +'px; left:-'+ (boxWidth*cols) +'px;" /></div>').css({ 
                            opacity:0,
                            left:(boxWidth*cols)+'px', 
                            top:(boxHeight*rows)+'px',
                            width:boxWidth+'px'
                        })
                    );
                    $('.nivo-box[name="'+ cols +'"]', slider).height($('.nivo-box[name="'+ cols +'"] img', slider).height()+'px');
                }
            }
        }

        sliderImg.stop().animate({
            height: $(vars.currentImage).height()
        }, settings.animSpeed);
    };

Line 356 to line 364

        // Run random effect from specified set (eg: effect:'fold,fade')
        if(settings.effect.indexOf(',') !== -1){
            anims = settings.effect.split(',');
            currentEffect = anims[Math.floor(Math.random()*(anims.length))];
            if(currentEffect === undefined) { currentEffect = 'fade'; }
        }

共1个答案

匿名用户

我以前没有用过nivoslider。还有，我找不到任何详细的文档为这个插件。所以，我决定看看它的代码。

据我所知，这个插件对滑块内的所有图像都使用了通用的config（option）对象。

我找不到一种方法来改变默认情况下每个图像的属性。

所以，我决定编辑库代码。

我的目标很简单。我不是从选项中获取滑块属性，而是希望在img标记中传递这些属性，如data-nseffect='box rain'。然后在库中，我想像.data('nseffect')那样访问它。

这里是我在图书馆所做的改变。

行号：361

  var currentEffect = vars.currentImage.data('nseffect') || settings.effect;
  console.log('effect', currentEffect);

行号：223

  settings.slices = vars.currentImage.data('nsslices') || settings.slices;
  console.log('slices', settings.slices);

行号：263

  settings.boxCols = vars.currentImage.data('nsboxcols') || settings.boxCols;
  console.log('boxCols', settings.boxCols);

  settings.boxRows = vars.currentImage.data('nsboxrows') || settings.boxRows;
  console.log('boxRows', settings.boxRows);

行号：99

  settings.animSpeed = vars.currentImage.data('nsanimspeed') || settings.animSpeed;
  console.log('animSpeed', settings.animSpeed);

不幸的是，它只从第一个img属性获取pausetime并创建一个setinterval，因此，它应该是滑块内所有图像通用的。

这里是HTML部分。

    <div id="slider" class="nivoSlider">
        <img src="images/toystory.jpg"
        data-thumb="images/toystory.jpg"
        alt = ""
        data-nseffect = "boxRain"
        data-nsslices = "30"
        data-nsboxcols = "10"
        data-nsboxrows = "5"
        data-nsanimspeed = "5000"
        data-nspausetime = "3000"
        />

        <a href="http://dev7studios.com">
          <img src="images/up.jpg"
          title="This is an example of a caption"
          data-nseffect = "sliceUp"
          data-nsslices = "35"
          data-nsboxcols = "15"
          data-nsboxrows = "6"
          data-nsanimspeed = "3000"
          data-nspausetime = "3000"
           />
        </a>

      ...
      ...

    </div>

最后在PHP中

<div id="slider" class="nivoSlider">
 <?php while($row = mysqli_fetch_assoc($result)) {
 $effect = $row['Effect'];
 $slices = $row['Slices'];
 $boxCols = $row['Cols'];
 $boxRows = $row['Rows'];
 $animSpeed = $row['AnimSpeed'];
 $pauseTime = $row['TimeLapse'];
 echo '<img src="/'.$ImagePath .''.$row['PromotionImage'].'"
    data-nseffect = "'.$effect.'"
    data-nsslices = "'.$slices.'"
    data-nsboxcols = "'.$boxCols.'"
    data-nsboxrows = "'.$boxRows.'"
    data-nsanimspeed = "'.$animSpeed.'"
    data-nspausetime = "'.$pauseTime.'"
    />';
  }?>
</div>
...
<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider();
});
</script>

注意：我从他们的官方GitHub这里取了这个库。

对我有用。希望对你有帮助。：）