Это моя третья попытка задать этот вопрос по-разному в отношении заполнения параметра nivoSlider данными, возвращаемыми запросом. Спасибо всем, кто пытался ответить на мой предыдущий вопрос. Здесь я попытался дать лучшее объяснение того, что я пытаюсь сделать.
Это то, что я пытаюсь сделать. У меня есть две записи в таблице, которые содержат имя изображения, эффект, срезы, boxCols, boxRows, animSpeed и pauseTime.
Запустите скрипт, который возвращает данные и отображает изображения для каждой записи, используя nivoSlider.
Каждый слайд имеет различные требования к отображению, например:
Слайд №1:
эффект - sliceUp
ломтики - 30
boxCols - 16
boxRows - 8
animSpeed - 8000
pauseTime - 12000
Слайд №2:
эффект - boxRain
ломтики - 10
boxCols - 12
boxRows - 8
animSpeed - 8000
pauseTime - 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>
С помощью скрипта nivoSlider внутри цикла while я ожидал, что код получит первую запись и отобразит ее
используя переменную в скрипте 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'; }
}