FancyBox doesn't trigger when using it in UserControl

Question

I have ASP.Net Masterpage design & have to user a Fancybox to show videos as modal, When i show videos on a ContenPage & place all related scripts to FB on that page then it works fine for that page without any issue. But i also need Top 10 Videos to be shown on some page as a user control. What i do is that i create a User Control & put all the related scripts in that user control except the main jQuery which i user in masterpage & download as CDE.

In this case fancybox doesnt trigger.

I am to make it work if i black fancy-box related scripts on all contents page which i dont want to.

I want script to be in userControl

I have placed my sample code for user control & master Page below.

USER CONTROL

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ucMostPopular.ascx.cs" Inherits="ucMostPopular"  %>

    <script src="<%= Helper.ResolveUrl("~/scripts/fancybox/jquery.fancybox-1.3.4.js") %>" type="text/javascript"></script>
    <link href="<%= Helper.ResolveUrl("~/styles/english-jquery.fancybox-1.3.4.css") %>" rel="stylesheet" type="text/css" />
  <script type="text/javascript">

   //Code to Reinitialize Fancybox script when using update panel START
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_initializeRequest(InitializeRequest);
    prm.add_endRequest(EndRequest);
    function InitializeRequest(sender, args) { }
    function EndRequest(sender, args) { InitMyFancyBox(); }
    $(document).ready(function () {
        InitMyFancyBox();
    });

    function InitMyFancyBox() {
        $(document).ready(function () {
            $(".youtube").click(function () {
                // first, get the value from the alt attribute
                var newTitle = $(this).find("img").attr("alt"); // Get alt from image
                $.fancybox({
                    'padding': 0,
                    'autoScale': false,
                    'transitionIn': 'none',
                    'transitionOut': 'none',
                    //'title': this.title, // we will replace this line
                    'title': newTitle,  //<--- this will do the trick
                    'width': 680,
                    'height': 495,
                    'href': this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
                    'type': 'swf',
                    'swf': { 'wmode': 'transparent', 'allowfullscreen': 'true' }

                });
              // alert(this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'));
                $.ajax({
                    type: "POST",
                    url: "UpdateVideoViews.aspx?youtubeVideoID="+this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
                });
                return false;
            });
        });

    }

  </script>  
        <!-- Videos  -->  
        <div id="Videos" class="tab_text">  
            <div id="popular-videos-wrapper">
                <asp:Repeater ID="rptPopularVideos" runat="server" EnableViewState="False" >
                    <ItemTemplate>
                            <div class="popular-article-title">
                                 <asp:Label ID="lblCounter" CssClass="lblCounter" runat="server" Text='<%# Container.ItemIndex + 1 %>'  > </asp:Label> 
                                 <asp:HyperLink ID="hylnkArticle" CssClass="popular-youtube-links" ToolTip ='<%# Eval("VideoTitle")%>' NavigateUrl='<%# generateVideoURL(Eval("VideoYoutubeID")) %>' runat="server" BorderWidth="0">
                                    <asp:Label ID="lblArticleTitle" Text='<%# getVideoTitle(Eval("VideoTitle"))%>' runat="server" ></asp:Label>
                                 </asp:HyperLink>
                              </div>
                    </ItemTemplate>
                </asp:Repeater>
            </div>
         </div>  
         <!-- Videos  -->

MASTER PAGE

<%@ Master Language="C#"  AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="SiteMasterPage"  %>
<%@ Register Src="~/en/UserControls/ucLiquidCarousel.ascx" TagName="ucLiquidCarousel"  TagPrefix="uc"%>
<%@ Register Src="~/en/UserControls/ucNewsTicker.ascx" TagName="ucTicker"  TagPrefix="uc"%>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title></title>
<asp:Literal ID="litCtrMetaForSM" runat="server"></asp:Literal>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="shortcut icon" href="http://www.alshindagah.com/favicon.ico">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<link href="../styles/english_css.css" rel="stylesheet" type="text/css" />
<link href="../styles/horizontal-menu-english.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="head" runat="server"> </asp:ContentPlaceHolder>
<script type="text/javascript">
.....
//Other scripts
.....
</script>

I am not sure why this is not working i have moved script related to fancy box on masterpage then it worked only for default page & failed on other pages.

I also used ResolveURL(...) that didn't work either

I dont get any error regarding script.

I would appreciate help in this regard so that my fancybox will work by placing all the scripts related to fancybox from usercontrol it self

FancyBox doesn't trigger when using it in UserControl

0 Answers0