遍历数组以填充 nivoSlider 的变量，每张幻灯片都有自己的设置

Question

这是我第三次尝试以不同的方式提出这个问题，关于 nivoSlider 设置的数量以及查询返回的数据。在这里，我试图对我正在尝试做的事情提供更好的解释。

这就是我想要做的。我在 table 中有两条记录，其中包含图像名称、效果、切片、boxCols、boxRows、animSpeed 和 pauseTime。

运行使用 nivoSlider returns 数据并显示每条记录图像的脚本。每张幻灯片都有不同的显示要求，例如：

1 号幻灯片：
效果 - sliceUp
切片 - 30
boxCols - 16
boxRows - 8
动画速度 - 8000
暂停时间 - 12000

2 号幻灯片：

效果 - boxRain
切片 - 10
boxCols - 12
boxRows - 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'; }
        }

Answer 1

之前没用过nivoslider。另外，我找不到这个插件的任何详细文档。所以，我决定看一下它的代码。

据我了解，此插件对滑块内的所有图像使用通用配置（选项）对象。

默认情况下，我找不到更改每个图像属性的方法。

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

我的目标很简单。我不想从选项中获取滑块属性，而是想将这些属性传递到 img 标记内，例如 data-nseffect='boxRain'。然后在图书馆，我想像 .data('nseffect').

一样访问它

这是我在库中所做的更改。

Line Number: 361

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

Line Number: 223

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

Line Number: 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);

Line Number: 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>

注：这个库是我从他们官方拿来的GitHubhere.

对我有用。希望它能帮助你。 :)

遍历数组以填充 nivoSlider 的变量，每张幻灯片都有自己的设置

Looping through an array to populate the variables for nivoSlider with each slide having its own settings

php

jquery

nivo-slider