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 () {

                });
            }

我有这段代码，我希望fancybox 可以使用它。

这是fancybox代码：

$(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。

.on()但是，您可以使用(jQuery v1.7+) 方法将 fancybox 绑定到这些元素并定位它们的父容器，例如：

$(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

还可以添加tabindex到您生成的<a>标签中以修复 Chrome 的错误，例如：

+ "<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 回答