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