Jquery special effect FancyBox in Updatepanel reply failure Solution

1. event Description: The Jquery special effect Fancybox of a product image is included in an updatepanel on a product page. when the product is changed based on product attributes, the special effect of the product image is no longer available, the code for the special product effects is initially placed on the page.

2. Page code:

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

$ (". 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) + ') ';
}
});
};

</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. The DivProdPhoto and UlProdThumbNavs contents are generated dynamically. The Code is as follows:

String _ prodImageLink = "<div class = \" tab {2} \ ">"
+ "<A class = \" large-item \ "title = \" {1} \ "href = '{0}'>"
+ "+ "<Div class = \" enlarge \ "> Click to enlarge </div>"
+ "</A>"
+ "</Div> ";

String _ prodIconLi = "<li> <a href = \" # \ "> </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. After the product is changed, the special effects of jquery are not loaded. You can solve this problem by calling RegisterFancyBoxJs in page_load by using the code:

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) + ') ';
}
});";

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

}
Author: eiwing