Jquery特效FancyBox在Updatepanel回发失效的解决办法

1.  事件描述: 在一个产品页面有个产品图片的Jquery特效Fancybox被包含在一个updatepanel里面，当根据产品属性更换产品的时候，产品图片的特效没有了，产品特效的代码最初放在页面上。

2.  页面代码：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

<script type="text/javascript" src="script/jquery.cycle.all.js"></script>

<script type="text/javascript" src="script/jquery.fancybox-1.3.4.pack.js"></script>

<link rel="stylesheet" type="text/css" media="screen" href="css/fancybox.css" />

<style type="text/css">

/*   Product Thumbnail Styles for jQuery, etc.   */

#prodPhoto {
 left: 20px;
 position:relative;
 }

#prodPhoto img {
 margin:0 auto !important;
 position:relative !important;
}

#prodThumbNavs {
 margin: 5px 0 0 17px;
  width: 300px;
}

#prodPhotoViewLgText {
 margin: 5px 0 0 17px;
 width: 300px;
 font-size:10px;
 color:#7E8D90;
}

#prodPhotoViewLgText img { border:none; }

#prodPhotoViewLgText a:link, #prodPhotoViewLgText a:visited { color: #7E8D90; }

#prodPhotoViewLgText a:active, #prodPhotoViewLgText a:hover { color: #2C8FA4; }

#prodThumbNavs li {
 float: left;
 margin: 3px;
 list-style: none
}

#prodThumbNavs li a {
 padding: 0px;
 display: block;
 border: 1px solid #ccc;
}

#prodThumbNavs li.activeSlide a { border: 1px solid #30798A !important; }

#prodThumbNavs a:focus { outline: none; }

#prodThumbNavs img {
 border: none;
 display: block
}

</style>

<script type="text/javascript">

// ... Fancybox 函数

 $(".large-item").fancybox({
  'overlayColor' : '#2db0e5',
  'transitionIn' : 'elastic',
  'transitionOut' : 'elastic'
 });

 $('#product-view').cycle({
  timeout: 0,
        pager:  '#product-thumbs',
        pagerAnchorBuilder: function(idx, slide) {
            return '#product-thumbs li:eq(' + (idx) + ') a';
        }
        });

};

</script>

     <asp:UpdatePanel ID="updProductDetail" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <div id="product-gallery">

                       <div id="DivProdPhoto" runat="server">
                       </div>
                      <div id="UlProdThumbNavs" runat="server">
                      </div>
               </div>

                <div><asp:LinkButton runat="server" ID="lkb_ChangeProduct">Change Product</asp:LinkButton></div>

            </ContentTemplate>
        </asp:UpdatePanel>

3.  DivProdPhoto和UlProdThumbNavs内容动态产生，代码如下：

        string _prodImageLink = "<div class=\"tab{2}\">"
                + "<a class=\"large-item\" title=\"{1}\" href='{0}'>"
                + " <img src='{0}' style=\"border-right-width: 0px; border-top-width: 0px; border-bottom-width: 0px;border-left-width: 0px\" alt='{1}' width=\"300\" height=\"300\" />"
                + "<div class=\"enlarge\">Click to enlarge</div>"
                + "</a>"
                + "</div>";

            string _prodIconLi = " <li><a href=\"#\"><img src='{0}'  width=\"52\" height=\"60\"  /></a></li>";

            string prodImagesLink = "";
            string prodIconsLi = "";

             int picNum = 0;

                if (!string.IsNullOrEmpty(_Product.ImagePath_Normal) && !string.IsNullOrEmpty(_Product.ImagePath_Large))
                {
                    picNum++;
                    prodImagesLink = string.Format(_prodImageLink, _Product.ImagePath_Large, _Product.Name, picNum);
                    prodIconsLi = string.Format(_prodIconLi, _tProgram_Product.ImagePath_Normal);
                }
                if (!string.IsNullOrEmpty(_Product.Alternate1ImagePath_Small) && !string.IsNullOrEmpty(_Product.Alternate1ImagePath_Large))
                {
                    picNum++;
                    prodImagesLink += string.Format(_prodImageLink, _Product.Alternate1ImagePath_Large
                        , _Product.Name, picNum);
                    prodIconsLi += string.Format(_prodIconLi, _Product.Alternate1ImagePath_Small);
                }

                 ......

                this.DivProdPhoto.InnerHtml = " <div id=\"product-view\">" + prodImagesLink + "</div>";
                this.UlProdThumbNavs.InnerHtml = "<div id=\"product-thumbs\"><ul>" + prodIconsLi + "</ul></div>";

 

4.   在更换产品之后，不加载jquery的特效，通过代码在page_load中调用RegisterFancyBoxJs解决：   

       private void RegisterFancyBoxJs()
        {
            String jsname = "fancybox";
            string js = @"$('.large-item').fancybox({
                                  'overlayColor' : '#2db0e5',
                                  'transitionIn' : 'elastic',
                                  'transitionOut' : 'elastic'
                                 });

                                 $('#product-view').cycle({
                                  timeout: 0,
                                        pager:  '#product-thumbs',
                                        pagerAnchorBuilder: function(idx, slide) {
                                            return '#product-thumbs li:eq(' + (idx) + ') a';
                                        }
                                        });";

            ScriptManager.RegisterStartupScript(this.UpdProductDetail, this.GetType(), jsname, js, true);

        }