Telerik and jQuery : RadGrid and Fancybox

本文关键字：and Fancybox RadGrid jQuery Telerik | 更新日期: 2023-09-27 18:36:02

我正在使用telerik radgrid来显示图像，并使用jquery fancybox在用户控件（ascx文件）处弹出图像。问题在于第一页花式框工作正常。在网格的下一页，花式框无法正常工作。下面的脚本被粘贴在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>

我感谢任何帮助。谢谢！！

Telerik and jQuery : RadGrid and Fancybox

最有可能的是，来自

第一个页面以外的其他页面的图像由 RadGrid 插件动态添加到 DOM 中。您正在使用 fancybox v1.3.4，它不支持动态添加的元素。

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

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

相关文章：