Colorbox
Facebook から取り込まれた写真に使用しようとしていますが、ページの読み込み時に取り込まれた画像には問題なく機能します。しかし、.getJSON
さらに 25 個の画像を読み込んでテーブルに追加すると、カラー ボックスが機能しなくなります。コマンドの使用に関する言及を見たこと.live
がありますが、何をすべきかに従っていないと思います...
ここに私のjqueryコードがあります
$(function () {
$(".photos1").colorbox({
rel: 'photos1',
transition: "fade"
});
var loading = '<img src="images/ajax-loader.gif" /> <b>LOADING</b>';
$('#get_albums').click(function () {
$('#ld_ck').html(loading);
$('#get_albums').html('');
load_albums();
});
$('#get_photos').click(function () {
$('#ld_ck').html(loading);
$('#get_photos').html('');
load_photos();
});
function load_photos() {
var after = $('#photos_next').val();
var offset = $('#photos_offset').val();
var gallery_id = $('#g_id').val();
$.getJSON('get_photos.php?gallery_id=' + gallery_id + '&after=' + after + '&offset=' + offset, function (json) {
$.each(json, function (key, val) {
if (key == "photos") {
$('#photos').append(val);
}
if (key == "after") {
$('#photos_next').val(val);
}
if (key == "offset") {
$('#photos_offset').val(val);
}
if (key == "count") {
if (val == "25") {
$('#get_photos').html('<b>SEE MORE</b>');
}
}
});
$('#ld_ck').html('');
});
}
});
get_photos.php
json
テーブル行の文字列を jquery に 返します。
これはベース html テーブルの 1 行だけですが、最初の行は 5 行あり、一度に 5 行ずつget_photos.php
追加されます。
<table width="99%" border="0" cellspacing="5" cellpadding="0" id="photos" class="photos">
<tr>
<td align="center" class="photos" style="padding-top:10px; height:140px; width:140px; border:1px solid #7B7B7B; background:#E9E9E9;"><a class="photos1" href="fb_photo.jpg"> <img src="fb_thumb.jpg" alt="fb_photo" border="0" /> </a> </td>
<td align="center" class="photos" style="padding-top:10px; height:140px; width:140px; border:1px solid #7B7B7B; background:#E9E9E9;"><a class="photos1" href="fb_photo.jpg"> <img src="fb_thumb.jpg" alt="fb_photo" border="0" /> </a> </td>
<td align="center" class="photos" style="padding-top:10px; height:140px; width:140px; border:1px solid #7B7B7B; background:#E9E9E9;"><a class="photos1" href="fb_photo.jpg"> <img src="fb_thumb.jpg" alt="fb_photo" border="0" /> </a> </td>
<td align="center" class="photos" style="padding-top:10px; height:140px; width:140px; border:1px solid #7B7B7B; background:#E9E9E9;"><a class="photos1" href="fb_photo.jpg"> <img src="fb_thumb.jpg" alt="fb_photo" border="0" /> </a> </td>
<td align="center" class="photos" style="padding-top:10px; height:140px; width:140px; border:1px solid #7B7B7B; background:#E9E9E9;"><a class="photos1" href="fb_photo.jpg"> <img src="fb_thumb.jpg" alt="fb_photo" border="0" /> </a> </td>
</tr>
</table>
<div style="width:99%; text-align:center;" id="see_more">
<input name="photos_next" id="photos_next" type="hidden" value="xxxxxxxxxxxx" />
<input name="photos_offset" id="photos_offset" type="hidden" value="25" />
<input name="g_id" id="g_id" type="hidden" value="xxxxxxxx" />
<a id="get_photos"><b>SEE MORE</b></a></div>
<div id="ld_ck" class="loader" style="width:99%; text-align:center;" ></div>