使用Ajax的动态Colorbox画廊 [英] Dynamic Colorbox galleries using Ajax

问题描述

我是jQuery/AJAX的新手.我有一个使用Colorbox显示照片库的页面.该页面仅显示每个图库中的一张图像.单击时，将打开一个颜色框，其中包含该图库中的所有照片.这些内部照片参考(用于所有画廊的所有照片)在页面上隐藏在一个不可见的div中.该页面是PHP生成的页面.画廊/照片正在通过Picasa填充.

I am new to jQuery / AJAX. I have a page that uses colorbox to display photo galleries. The page displays only one image from each gallery. When clicked, a colorbox opens up with all of the photos from that gallery. These inner photo references (for all photos from all galleries) are hidden on the page in an invisible div. The page is a PHP generated page. The galleries/photos are being populated via Picasa.

以上所有方法都可以正常工作，但是我不想通过页面加载(通过PHP)从所有画廊加载所有图像，而是希望通过AJAX仅将请求的画廊加载到颜色盒中.

All of the above works fine, but instead of loading all of the images from all galleries on page load (via PHP), I'd like to load only the requested gallery into the colorbox via AJAX.

到目前为止，我有一个测试页，可以在页面的div中插入适当的链接，但是Colorbox不会在这些链接上显示.这是我需要帮助的地方.如何让Colorbox识别由我的AJAX调用生成的链接?

So far, I have a test page which can insert the proper links into a div on the page, but the Colorbox won't pick up on these links. This is where I need help. How can I get Colorbox to recognize the links generated by my AJAX call?

colorbox脚本位于标题中:

The colorbox scripts sit in the header:

 <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代码:

Here is my get JSON code located in the body section of the page:

$.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脚本没有拾取这些图像.

Again, I can get the AJAX to populate the div correctly, but the colorbox script isn't picking up these images.

任何帮助将不胜感激.

推荐答案

我看到了您要执行的操作，但是直到ajax回调之后，您要执行的操作的数据才存在.因此，简单的解决方案:

I see what you are trying to do, but the data you are trying to do it to doesn't exist until after the ajax callback. So, easy solution:

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

wrap the colorbox function in a named function, and call it on callback:

 <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返回时调用该函数:

then call the function when your json returns:

$.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.

It will use some extraneous selectors in this way of doing it because you are building the method call for all galleries each time the ajax gets called. Probably an easier way of doing this is to have the json contain reply with the $setnum value you are using and pass that in to setcb as a value to call colorbox on just the current result set.

这篇关于使用Ajax的动态Colorbox画廊的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！