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，它不支持动态添加的元素。

我发布了workaround here。您可能需要调整脚本以匹配父级容器选择器。

最终，您可以升级到fancybox v2.x并且不会再做任何事情（该版本支持现有和动态添加的元素。）

Telerik和jQuery：RadGrid和Fancybox

1 个答案: