Question

我是jQuery / AJAX的新手。我有一个页面，使用colorbox显示照片库。该页面仅显示每个图库中的一个图像。单击时，将打开一个颜色框，其中包含该库中的所有照片。这些内部照片参考（对于所有画廊中的所有照片）都隐藏在页面中的隐形div中。该页面是PHP生成的页面。通过Picasa填充画廊/照片。

以上所有工作都很好，但不是在页面加载（通过PHP）上加载所有图库中的所有图像，我想通过AJAX仅将请求的图库加载到颜色框中。

到目前为止，我有一个测试页面可以将正确的链接插入到页面上的div中，但Colorbox不会选择这些链接。这是我需要帮助的地方。如何让Colorbox识别我的AJAX调用生成的链接？

颜色框脚本位于标题中：

 <script type="text/javascript" src="libs/js/jquery.colorbox.js"></script>
 <script type="text/javascript">
  //Writing out the ColorBox command for each album
  $(document).ready(function(){
   <?php 
   $setnum = 0;
   foreach ($albumIds as $albumId){
       echo "\t\t\t$(\"a[rel='set" . $setnum . "']\").colorbox({maxWidth:\"640px\",     maxHeight:\"480px\"});\n";
       $setnum++;
   }
   ?>
  });
 </script>

以下是我在页面正文部分中获取的JSON代码：

$.getJSON("myserv.php",formContent, function(json){
  var photos = json.data.items;
  var numpics = json.data.items.length;
  var pointer = 1;

  while (pointer < numpics){
   var stuffineed = photos[pointer].media.image.url;
   $("#ajaxBox").append("<a href='" + stuffineed + "' rel='set" + pointer +"'>" + photos[pointer].media.image.url + "</a><br />");
   pointer++; 
  }

 }); //End json

同样，我可以让AJAX正确填充div，但是colorbox脚本没有拾取这些图像。

非常感谢任何帮助。

Answer 1

我看到你要做的是什么，但是你想要做的数据直到ajax回调之后才会存在。所以，简单的解决方案：

将colorbox函数包装在一个命名函数中，并在回调函数中调用它：

 <script type="text/javascript">
  //Writing out the ColorBox command for each album
  function setcb(){
   $(document).ready(function(){
   <?php 
   $setnum = 0;
   foreach ($albumIds as $albumId){
       echo "\t\t\t$(\"a[rel='set" . $setnum . "']\").colorbox({maxWidth:\"640px\",     maxHeight:\"480px\"});\n";
       $setnum++;
   }
   ?>
   });
  });
 </script>

然后在你的json返回时调用该函数：

$.getJSON("myserv.php",formContent, function(json){
  var photos = json.data.items;
  var numpics = json.data.items.length;
  var pointer = 1;

  while (pointer < numpics){
   var stuffineed = photos[pointer].media.image.url;
   $("#ajaxBox").append("<a href='" + stuffineed + "' rel='set" + pointer +"'>" + photos[pointer].media.image.url + "</a><br />");
   pointer++; 
  }
  setcb();
 }); //End json

它会以这种方式使用一些无关的选择器，因为每次调用ajax时都要为所有库构建方法调用。可能更简单的方法是让json包含你正在使用的$ setnum值的回复，并将其传递给setcb作为一个值，只在当前结果集上调用colorbox。

使用Ajax的动态Colorbox库

1 个答案: