我有 ASP.Net Masterpage 设计并且必须使用 Fancybox 将视频显示为模态,当我在 ContenPage 上显示视频并将所有相关脚本放置到该页面上的 FB 时,它在该页面上运行良好,没有任何问题。但我还需要在某些页面上显示前 10 个视频作为用户控件。我所做的是创建一个用户控件并将所有相关脚本放在该用户控件中,除了我在母版页中使用的主 jQuery 并作为 CDE 下载。
在这种情况下,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(...)
也没用
我没有收到有关脚本的任何错误。
我会很感激这方面的帮助,这样我的 fancybox 就可以通过放置所有与 fancybox 相关的脚本来usercontrol
工作