I have asked a similar question before but I was not completing clear in my aims so I am asking again with more information. I am trying to write a script that uses "jquery.nivo.slider.js" to create a slide show of images on a page. I have read all the post on the subject of nivo-slider but none deal with using variables returned from a query.
The image names are stored in a MySQL data table along with the animation speed and the pause time. I run the query to get the data and then pass the returned variable to the nivo-slider script.
$(window).load(function() {
var TimeLapse = '<?php echo $row_fb['TimeLapse'];?>';
var Effect = '<?php echo $row_fb['Effect'];?>';
var AnimSpeed = '<?php echo $row_fb['AnimSpeed'];?>';
$('#slider').nivoSlider({
effect: Effect,
slices: 1,
boxCols: 1,
boxRows : 1,
animSpeed: AnimSpeed,
pauseTime: TimeLapse,
startSlide: 0,
directionNav: false,
controlNav: false,
controlNavThumbs: false,
pauseOnHover: false,
manualAdvance: false,
prevText: '',
nextText: '',
randomStart: false,
beforeChange: function(){},
slideshowEnd: function(){},
lastSlide: function(){},
afterLoad: function(){},
afterChange: function(){},
});
});
To loop through the returned data I am using a php "do while" loop thinking that each record found would make use of the returned variables in the nivo-slider script. The issue I have is the nivo-script is not picking up the "effect, animation and pause times but displays a random sequence of the effect, animation and pause time.. The complete script looks like this:
<body>
<div id="wrapper">
<div class="slider-wrapper">
<div id="slider" class="nivoSlider">
<?php do { ?>
<script type="text/javascript">
$(window).load(function() {
var TimeLapse = '<?php echo $row_fb['TimeLapse'];?>';
var Effect = '<?php echo $row_fb['Effect'];?>';
var AnimSpeed = '<?php echo $row_fb['AnimSpeed'];?>';
$('#slider').nivoSlider({
effect: Effect,
slices: 1,
boxCols: 1,
boxRows : 1,
animSpeed: AnimSpeed,
pauseTime: TimeLapse,
startSlide: 0,
directionNav: false,
controlNav: false,
controlNavThumbs: false,
pauseOnHover: false,
manualAdvance: false,
prevText: '',
nextText: '',
randomStart: false,
beforeChange: function(){},
slideshowEnd: function(){},
lastSlide: function(){},
afterLoad: function(){},
afterChange: function(){},
});
});
</script>
<img src="<?php echo $ImagePath.''.$row_fb['ImageName'];?>" data-transition="<?php echo $row_fb['Effect'];?>" />
<?php } while($row_fb = mysqli_fetch_assoc($fb)); ?>
</div>
</div>
</body>
Can anyone see what I am doing wrong?