Telerik和jQuery：RadGrid和Fancybox

Question

我正在使用telerik radgrid显示图像，并使用jquery fancybox在用户控件（ascx文件）上弹出图像。 问题是在首页的fancybox正常工作。 在表格的下一页，fancybox无法正常工作。 以下脚本粘贴在ascx文件上。

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript" src="../../Scripts/fancybox/jquery.easing-1.3.pack.js"></script>
    <script type="text/javascript" src="../../Scripts/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
    <script type="text/javascript" src="../../Scripts/fancybox/jquery.fancybox-1.3.4.js"></script>
    <link rel="stylesheet" type="text/css" href="../../Scripts/fancybox/jquery.fancybox-1.3.4.css" media="screen" />

    <script type="text/javascript">
    $(document).ready(function() {

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

    });

</script>

在网格

<a  class="img_group" runat="server" title='Photo_Title' href='imageURL'>
   <img runat="server" alt="image" src='imgSource'  Width="120" Height="95" id="imgOne" />
</a>

感谢您的帮助。 谢谢！！

Answer 1

RadGrid插件会将除第一页以外的其他页面上最有可能的图像动态添加到DOM中。 您正在使用fancybox v1.3.4，它不支持动态添加的元素。

我在这里发布了解决方法 。 您可能只需要调整脚本以匹配父级的容器选择器。

最终，您可以升级到fancybox v2.x ，而无需再做任何工作（该版本支持现有的和动态添加的元素。）