Динамические галереи Colorbox с использованием Ajax - PullRequest
Новая
       16

Динамические галереи Colorbox с использованием Ajax

1 голос
/ 13 июня 2010

Я новичок в jQuery / AJAX.У меня есть страница, которая использует colorbox для отображения фотогалерей.На странице отображается только одно изображение из каждой галереи.При щелчке открывается окно со всеми фотографиями из этой галереи.Эти внутренние ссылки на фотографии (для всех фотографий из всех галерей) скрыты на странице в невидимом элементе div.Страница является страницей, сгенерированной PHP.Галереи / фотографии заполняются через Picasa.

Все вышеперечисленное работает нормально, но вместо загрузки всех изображений из всех галерей при загрузке страницы (через PHP) я бы хотел загрузить только запрашиваемую галерею в colorbox через AJAX.

Пока у меня есть тестовая страница, которая может вставлять правильные ссылки в div на странице, но Colorbox не может подобрать эти ссылки.Это где мне нужна помощь.Как я могу заставить Colorbox распознавать ссылки, сгенерированные моим вызовом AJAX?

Сценарии colorbox находятся в заголовке: 

 <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, расположенный в разделе bodyстраница: 

$.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 не собирает эти изображения.

Любая помощь будет принята с благодарностью.

1 Ответ

1 голос
/ 13 июня 2010

Я вижу, что вы пытаетесь сделать, но данных, для которых вы пытаетесь это сделать, не существует до тех пор, пока не будет выполнен обратный вызов 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 только для текущего набора результатов.

...