0

我正在尝试使用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 表的一行，但最初有 5 行，并且get_photos.php一次添加另外 5行

<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>
4

2 回答 2

0

你必须绑定一个live点击处理程序来实现你想要的

$('.photos').on('click','.photos1', function() {
    $.fn.colorbox({href:$(this).attr('href'), open:true,
                   rel: 'photos1',transition: "fade"});
    return false;
}

$.on的文档

工作小提琴

根据 URL 更新：

你get_photos.php是这样输出td的

<td align=\"center\" class=\"photos\" style=\"padding-top:10px; height:140px; width:140px; border:1px solid #7B7B7B; background:#E9E9E9;\">
  <a id=\"photos1\" href=\"http:\/\/sphotos.xx.fbcdn.net\/hphotos-ash4\/s720x720\/398601_355232294489552_174042505941866_1396720_1688100724_n.jpg\"><img src=\"http:\/\/photos-b.ak.fbcdn.net\/hphotos-ak-ash4\/398601_355232294489552_174042505941866_1396720_1688100724_s.jpg\" alt=\"355232294489552\" border=\"0\">
  <\/a>
<\/td>

当我们在类中使用类时更改id=\"photos1\"为class=\"photos1\"ona标签并像这样更改调用photos1$.on$.on

$('table#photos').on('click','.photos1', function() {
    $.fn.colorbox({href:$(this).attr('href'), open:true,
                   rel: 'photos1',transition: "fade"});
    return false;
}

它应该可以正常工作。:)

于 2012-05-24T04:02:48.560 回答
0

这真的可以解决.live()吗？添加新照片后，似乎更多的是重新初始化 colorBox 的问题。

我看到您已经接受了乔伊的回答，但如果仅在简化代码方面，您可能需要考虑以下一些想法。

$(function () {
    var colorboxSettings = ({
        rel: 'photos1',
        transition: "fade"
    }
    $(".photos1").colorbox(colorboxSettings);

    var loading = '<img src="images/ajax-loader.gif" /> <b>LOADING</b>';

    $('#get_albums').on('click', load_albums);
    $('#get_photos').on('click', load_photos);

    function load_photos() {
        $('#ld_ck').html(loading);
        $('#get_photos').html('');
        var data = {
            after: $('#photos_next').val(),
            offset: $('#photos_offset').val(),
            gallery_id: $('#g_id').val()
        };
        $.getJSON('get_photos.php', data, function(json) {
            if(json.photos && json.after && json.offset && json.count) {//or similar
                $('#photos').append(json.photos);
                $('#photos_next').val(json.after);
                $('#photos_offset').val(json.offset);
                if (Number(json.count) == 25) { $('#get_photos').html('SEE MORE'); }
                $.colorbox.remove();//maybe?
                $(".photos1").colorbox(colorboxSettings);//or is it $(".photos") ?
            }
            $('#ld_ck').html('');
        });
    }
});

如您所见，存在一些不确定性，但没有什么是您无法解决的。

于 2012-05-24T05:06:23.863 回答