jQuery Fancybox不适用于JSON调用中的数据 [英] JQuery Fancybox is not working with data from JSON call

问题描述

                $.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使用的代码.

I have this code that I want the fancybox to work with.

这是fancybox代码:

and here is the fancybox code:

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

    });

我可以显示图像.但是当我单击图像时，它会转到链接，但不会打开花哨的框:(

I get to display the images. but when i click on the images, it goes to the link, it doesnt open fancy box:(

我该如何解决?

当我将输出的原始数据复制到html时. fancybox的作品.但它不适用于json调用中的数据.这与页面加载有关吗?

when i copy the output raw data to html. fancybox works. but it doesnt work with data from json call. is this related to page load?

推荐答案

Fancybox 1.3.x不支持动态添加的元素.您的JSON呼叫就是这种情况.

Fancybox 1.3.x doesn't support dynamically added elements. That is the case with your JSON call.

但是，您可以使用.on()(jQuery v1.7 +)方法并以其父容器为目标，将fancybox绑定到这些元素:

However you can bind fancybox to those elements using the .on() (jQuery v1.7+) method and targeting their parent container like:

$(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中的错误，例如:

Also add tabindex to your generated <a> tag to fix a bug with Chrome like:

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

查看此信息以获取更多信息和演示.

这篇关于jQuery Fancybox不适用于JSON调用中的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！