3

ASP.Netマスターページのデザインがあり、ビデオをモーダルとして表示するにはFancyboxを使用する必要があります。ContenPageにビデオを表示し、関連するすべてのスクリプトをそのページのFBに配置すると、問題なくそのページで正常に機能します。しかし、ユーザーコントロールとしてトップ10のビデオを一部のページに表示する必要もあります。私がしていることは、ユーザーコントロールを作成し、マスターページでユーザーとして使用し、CDEとしてダウンロードするメインのjQueryを除いて、すべての関連スクリプトをそのユーザーコントロールに配置することです。

この場合、fancyboxはトリガーされません。

私がしたくないすべてのコンテンツページでファンシーボックス関連のスクリプトを黒くした場合、私はそれを機能させることになっています。

スクリプトをuserControlに入れたい

以下に、ユーザーコントロールとマスターページのサンプルコードを配置しました。

ユーザーコントロール 

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

なぜこれが機能しないのかわかりません。マスターページのファンシーボックスに関連するスクリプトを移動しましたが、デフォルトページでのみ機能し、他のページでは失敗しました。

私も使用ResolveURL(...)しましたが、どちらも機能しませんでした

スクリプトに関するエラーは発生しません。

usercontrolfancyboxに関連するすべてのスクリプトを自分自身から配置することで、私のfancyboxが機能するように、この点で助けていただければ幸いです。

4

0 に答える 0