0

ColorboxFacebook から取り込まれた写真に使用しようとしていますが、ページの読み込み時に取り込まれた画像には問題なく機能します。しかし、.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.phpjsonテーブル行の文字列を 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>
4

2 に答える 2

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 に答える
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>

クラス内でクラスを使用しているため、 onタグに変更id=\"photos1\"し、呼び出しを次のように変更しますclass=\"photos1\"aphotos1$.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 に答える