javascript - 如何将静态初始化变成动态初始化

Question

我有这个 fancybox 插件，非常棒，但我认为 documentation 上没有足够的示例。

$(document).ready(function(){   
    $('nav.main a#gallery').live('click',function() {
        $.fancybox([
            {href : 'img/galeria/fondo1.jpg', title : 'Title1','nextEffect' : 'fade',   'prevEffect'    : 'fade'}, 
            {href : 'img/galeria/fondo2.jpg', title : 'Title2','nextEffect' : 'fade',   'prevEffect'    : 'fade'},
            {href : 'img/galeria/fondo3.jpg', title : 'Title3','nextEffect' : 'fade',   'prevEffect'    : 'fade'}, 
            {href : 'img/galeria/fondo4.jpg', title : 'Title4','nextEffect' : 'fade',   'prevEffect'    : 'fade'}  
        ]);
    });
});

正如您所看到的，这会在 fancybox 中加载一些图像。

我希望能够通过向其传递一个 javascript 对象来完成此操作，这样我就不需要知道有哪些图像或有多少图像(在 init 中)并管理更新对象，但我只是不知道如何做到这一点。

谁能帮忙。

Answer 1

您是否尝试过传递有效的 json 对象？

function getGaleriaObject()
{
  // do your database / what ever stuff here
  var obj = [
            {href : 'img/galeria/fondo1.jpg', title : 'Title1','nextEffect' : 'fade',   'prevEffect'    : 'fade'}, 
            {href : 'img/galeria/fondo2.jpg', title : 'Title2','nextEffect' : 'fade',   'prevEffect'    : 'fade'},
            {href : 'img/galeria/fondo3.jpg', title : 'Title3','nextEffect' : 'fade',   'prevEffect'    : 'fade'}, 
            {href : 'img/galeria/fondo4.jpg', title : 'Title4','nextEffect' : 'fade',   'prevEffect'    : 'fade'}  
        ];
   return obj;
}

$(document).ready(function(){   
    $('nav.main a#gallery').live('click',function() {
      var obj = getGaleriaObject();    
      $.fancybox(obj);
    });
});

示例:JsFiddle