将图像从数据库加载到 Jquery Vegas Slideshow答案

【问题标题】：Loading images from database to Jquery Vegas Slideshow将图像从数据库加载到 Jquery Vegas Slideshow
【发布时间】：2014-01-06 11:30:10
【问题描述】：

我在一个项目中使用插件Jquery Vegas Slideshow，我正在尝试将图像直接从我的数据库加载到幻灯片脚本中。

我使用以下代码运行它：

<script type="text/javascript">
    jQuery.vegas('slideshow', {
        backgrounds:[
            { src:'images/slider/slider_01.jpg', fade:2500 },
            { src:'images/slider/slider_01.jpg', fade:2500 },
        ]
        })('overlay', {
        src:'images/slider/overlays/06.png'
    });
</script>

如何使用 Ajax 填充 background 参数？
我已阅读文档，但没有关于任何服务器端语言的信息。

【问题讨论】：

标签： javascript ajax jquery jquery-plugins

【解决方案1】：

通过查看github上vegas插件的源代码，似乎没有任何方法可以在插件启动后动态更新背景图像。但由于有一种方法称为destroy，我建议尝试以下代码，它会破坏分配的背景和叠加层，并使用一组新图像重新初始化插件。

// Define backgrounds array
var bgimages = [
{ src:'1.jpg', fade:1000 }, 
{ src:'2.jpg', fade:1000 }, 
{ src:'3.jpg', fade:1000 },
{ src:'4.jpg', fade:1000 }];

//destroy vegas object background
$.vegas.desroy('background');

//destroy vegas overlay background
$.vegas.desroy('overlay');

// Pass shuffled array to Vegas
$.vegas('slideshow', {
delay:5000,
backgrounds: bgimages
}) ('overlay');

【讨论】：

【解决方案2】：

试试这个代码：

$('body').vegas({
   overlay: true,
   transition: 'fade', 
   transitionDuration: 4000,
   delay: 10000,
   color: 'red',
   animation: 'random',
   animationDuration: 20000,
   slides: [
      { src: 'img/2.jpg'},
      { src: 'img/3.jpg' },
      { src: 'img/4.jpg' },
      { src: 'img/5.jpg' }
   ]
});

【讨论】：