Telerik and jQuery : RadGrid and Fancybox

Question

I am using telerik radgrid to show images and using jquery fancybox to popup the image at user control (ascx file). The problem is in first page fancybox work properly. At next page of grid, fancybox didn't work properly. The follwing scripts are paste on ascx file.

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

At Grid

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

I appreciate any help. Thanks!!

Answer 1

Most likely images from other pages other than the first are added dynamically to the DOM by the RadGrid plugin. You are using fancybox v1.3.4, which doesn't support dynamically added elements.

I posted a workaround here though. You just may need to tweak the script to match your parent's container selector.

Eventually, you may upgrade to fancybox v2.x and won't have any further to do (that version supports existing and dynamically added elements.)