使用 Ajax 的动态彩盒画廊

Question

我是 jQuery / AJAX 的新手。我有一个使用颜色框显示照片库的页面。该页面仅显示每个图库中的一个图像。单击时，会打开一个颜色框，其中包含该画廊中的所有照片。这些内部照片参考（适用于所有画廊的所有照片）隐藏在页面上的不可见 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，但颜色框脚本没有拾取这些图像。

任何帮助将不胜感激。

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。