Nivo slider different transition effect for each image - nivo-slider

Question

I am working on a script that uses Nivo Slider. I have this working but I would like to make each image have a different transition effect.
The images are loaded using a MySQL call which returns the ImageName and Effect as PHP variables.
$row_Signage['PromotionImage'] = ImageName: image_1.png
$row_Signage['Effect'] = Effect: slideInRight
The config code for the Nivo Slider is:
$(window).load(function() {
var TimeLapse = '<?php echo $row_Setting['TimeLapse'];?>';
var Effect = '<?php echo $row_Setting['Effect'];?>';
console.log("EFFECT", Effect);
var AnimSpeed = '<?php echo $row_Setting['AnimSpeed'];?>';
$('#slider').nivoSlider({
effect: Effect,
slices: 30,
boxCols: 16,
boxRows: 8,
animSpeed: AnimSpeed,
pauseTime: TimeLapse,
startSlide: 0,
directionNav: false,
controlNav: false,
controlNavThumbs: false,
pauseOnHover: false,
manualAdvance: false,
//prevText: 'Prev',
//nextText: 'Next',
randomStart: false,
beforeChange: function(){},
afterChange: function(){},
slideshowEnd: function(){},
lastSlide: function(){},
afterLoad: function(){}
});
});
I then have a PHP While loop to display the images:
if($totalRows_Signage > 0){
while($row_Signage = mysql_fetch_array($Signage)){
echo '<img src="/'.$ImagePath .''.$row_Signage['PromotionImage'].'" data-transition="'.$row_Signage['Effect'].'"/> ';
$i++;
}
} else {
echo '<img src="/'.$DefaultImagePath .'"/>';
}
The issue I have is the echo statement in the while loop is not picking up the data-transition variable, I have tried a number of ways at writing the line that echo's out the images. Can anyone see where I am going wrong.
Many thanks in advance for your help and time.

Answer 1

On returning to this issue it was actually working with the code I posted. Odd but it works.