0 
                $.getJSON("/Home/AjaxBrowse", { page: p ? p : 1 }, function (data)              {    
                    var output = "";
                    jQuery.each(data.users, function (key, value) {

                        output += '<li>'
                        + "<div class=\"slidera_img\">"
                        + "<a href=\"/image/viewImage/" + data.users[key].ImageId + "\" rel=\"example_group\">"
                        + "<img  src=\"/image/viewimage/" + data.users[key].ImageId + "?imageType=thumb\" width=\"100=\" height=\"100\" />"
                        +"</a>"
                        + "</div>"

                        + ' </li>';
                    });

                    $("#namesList")
                    .attr("start", data.pager.FirstItemOnPage) 
                    .html(output);
                    $("#namesPager").html(pagedList.render(data.pager));  
                }).error(function () {

                });
            }

ファンシーボックスで動作させたいこのコードがあります。

ファンシーボックスのコードは次のとおりです。

$(document).ready(function () {
        $("a[rel=example_group]").fancybox({
            'transitionIn': 'none',
            'transitionOut': 'none',
            'titlePosition': 'over',
            'type': 'image',
            'titleFormat': function (title, currentArray, currentIndex, currentOpts) {
                return '<span id="fancybox-title-over">' + (title.length ? ' &nbsp; ' + title : '') + '</span>';
            }
        });

    });

画像を表示できるようになりました。しかし、画像をクリックするとリンクに移動し、派手なボックスは開きません:(

どうすればこれを修正できますか?

出力生データをhtmlにコピーすると。ファンシーボックスが動作します。しかし、json 呼び出しからのデータでは機能しません。これはページの読み込みに関連していますか?

4

3 に答える 3

2

Fancybox 1.3.x は、動的に追加された要素をサポートしていません。それはあなたのJSON電話の場合です。

ただし、(jQuery v1.7+) メソッドを使用してこれらの要素に fancybox をバインドし、次の.on()ような親コンテナーをターゲットにすることができます。

$(document).ready(function () {
 $("div.slidera_img").on("focusin", function(){
  $("a[rel=example_group]").fancybox({
   'transitionIn': 'none',
   'transitionOut': 'none',
   'titlePosition': 'over',
   'type': 'image',
   'titleFormat': function (title, currentArray, currentIndex, currentOpts) {
     return '<span id="fancybox-title-over">' + (title.length ? ' &nbsp; ' + title : '') + '</span>';
   }
  }); // fancybox
 }); // on
}); // ready

また、次のような Chrome のバグを修正するtabindexために、生成されたタグに追加します。<a>

+ "<a tabindex=\"1\" href=\"/image/viewImage/" + data.users[key].ImageId + "\" rel=\"example_group\">"

詳細とデモについては、この投稿を確認してください。

于 2012-05-05T17:36:27.783 に答える
0 
$(document).ready(function () {
            $.getJSON('/Home/AjaxBrowse', { page: p ? p : 1 }, function (data) {
                var output = '';
                $.each(data.users, function (key, entity) {
                    output += '<li><div class="slidera_img"><a href="/image/viewImage/' + entity.ImageId + '" rel="example_group">'
                                + '<img  src="/image/viewimage/' + entity.ImageId + '"?imageType=thumb" width="100" height="100" /></a></div></li>';
                });

                $("#namesList").attr("start", data.pager.FirstItemOnPage).html(output);
                $("#namesPager").html(pagedList.render(data.pager));

                $("a[rel=example_group]").fancybox({
                    'transitionIn': 'none',
                    'transitionOut': 'none',
                    'titlePosition': 'over',
                    'type': 'image',
                    'titleFormat': function (title, currentArray, currentIndex, currentOpts) {
                        return '<span id="fancybox-title-over">' + (title.length ? ' &nbsp; ' + title : '') + '</span>';
                    }
                });
            }).error(function () {

            });
        });
于 2012-05-05T11:30:21.843 に答える
0 
$(document).ready(function () {
            $.getJSON('/Home/AjaxBrowse', { page: p ? p : 1 }, function (data) {
                var output = '';
                $.each(data.users, function (key, entity) {
                    output += '<li><div class="slidera_img"><a href="/image/viewImage/' + entity.ImageId + '" rel="example_group">'
                                + '<img  src="/image/viewimage/' + entity.ImageId + '"?imageType=thumb" width="100" height="100" /></a></div></li>';
                });

                $("#namesList").attr("start", data.pager.FirstItemOnPage).html(output);
                $("#namesPager").html(pagedList.render(data.pager));               
            }).error(function () {

            });

            $("a[rel=example_group]").livequery(function () {
                $(this).fancybox({
                    'transitionIn': 'none',
                    'transitionOut': 'none',
                    'titlePosition': 'over',
                    'type': 'image',
                    'titleFormat': function (title, currentArray, currentIndex, currentOpts) {
                        return '<span id="fancybox-title-over">' + (title.length ? ' &nbsp; ' + title : '') + '</span>';
                    }
                });
            });
        });
于 2012-05-05T11:44:57.657 に答える