Question

                $.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时。 fancybox的作品。但它不适用于json调用的数据。这与页面加载有关吗？

Answer 1

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\">"

Check this post for further information和DEMO。

Answer 2

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

            });
        });

Answer 3

$(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>';
                    }
                });
            });
        });

JQuery Fancybox不使用来自JSON调用的数据

3 个答案: