c# - Colorbox -不能正确显示图像
本文关键字：显示 显示图 图像 Colorbox 不能 | 更新日期: 2023-09-27 18:04:45
我使用的是在
找到的colorbox模态插件http://colorpowered.com/colorbox/我看了演示，一切似乎都很简单，易于使用。这是我经过的例子:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="colorbox.css">
<script src="jquery.min.js"></script>
<script src="jquery.colorbox-min.js"></script>
</head>
<body>
<a class='gallery' href='image1.jpg'>Photo_1</a>
<a class='gallery' href='image2.jpg'>Photo_2</a>
<a class='gallery' href='image3.jpg'>Photo_3</a>
</body>
</html>
在简单的HTML文件环境中完美地工作。但是，当我尝试将其扩展到ASP。. NET母版页通过把标签的东西放在我的母版文件，我的其他页面不认识它。事实上，如果我把它放在单独页面的标签中，它也不会识别任何东西。我甚至尝试引用原始URL而不是本地.js文件，但没有运气。这是我在主文件中调用它的方式:
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.js" type="text/javascript"></script>
<script src="http://colorpowered.com/colorbox/core/colorbox/jquery.colorbox.js" type="text/javascript"></script>
<link href="http://colorpowered.com/colorbox/core/example1/colorbox.css" rel="stylesheet" type="text/css" />
<script>
jQuery(document).ready(function () {
jQuery('a.gallery').colorbox({ opacity:0.5 , rel:'group1' });
});
</script>
</head>
，这是我如何使用它在我的。aspx页面:
<p>
<a class="gallery" href="http://upload.wikimedia.org/wikipedia/commons/3/37/African_Bush_Elephant.jpg">elephant</a>
<a class="gallery" href="http://upload.wikimedia.org/wikipedia/commons/3/37/African_Bush_Elephant.jpg">elephant</a>
<a class="gallery" href="http://upload.wikimedia.org/wikipedia/commons/3/37/African_Bush_Elephant.jpg">elephant</a>
</p>
我觉得我完美地遵循了教程。谁能告诉我，我哪里做错了?这是令人难以置信的沮丧(顺便说一句，这不是我一生中做过的第一个shadowbox，但这是我第一次遇到这么多麻烦，我责怪VS2012)。
解决方案最终比我想象的要简单得多。首先，您需要确保以下部分:
<script>
jQuery(document).ready(function () {
jQuery('a.gallery').colorbox({ opacity:0.5 , rel:'group1' });
});
</script>
在.aspx(或.html)文件中，而不是在母版页中。其次，如果您正在使用ASP。. NET默认的站点设置，会给你很多臃肿，包括这个小gem来运行脚本:
<asp:ScriptManager runat="server">
<Scripts>
<%--To learn more about bundling scripts in ScriptManager see http://go.microsoft.com/fwlink/?LinkID=272931&clcid=0x409 --%>
<%--Framework scripts--%>
<asp:ScriptReference Name="MsAjaxBundle" />
<asp:ScriptReference Name="jquery" />
<asp:ScriptReference Name="jquery.ui.combined" />
<asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
<asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
<asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
<asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
<asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
<asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
<asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
<asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
<asp:ScriptReference Name="WebFormsBundle" />
<%--Site scripts--%>
</Scripts>
</asp:ScriptManager>
除非您在上面的ScriptManager中使用一些脚本，否则只需将其注释掉。然后像在标签中那样调用常规脚本。
我最终的主页是这样的:
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="SiteMaster" %>
<!DOCTYPE html>
<html lang="en">
<head runat="server">
<meta charset="utf-8" />
<title><%: Page.Title %> - My ASP.NET Application</title>
<asp:PlaceHolder runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>
<webopt:BundleReference runat="server" Path="~/Content/css" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../jquery.colorbox.js"></script>
<asp:ContentPlaceHolder runat="server" ID="HeadContent" />
</head>
<body>
<form runat="server">
<asp:ScriptManager runat="server">
<%-- <Scripts>--%>
<%--To learn more about bundling scripts in ScriptManager see http://go.microsoft.com/fwlink/?LinkID=272931&clcid=0x409 --%>
<%--Framework scripts--%>
<%-- <asp:ScriptReference Name="MsAjaxBundle" />
<asp:ScriptReference Name="jquery" />
<asp:ScriptReference Name="jquery.ui.combined" />
<asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
<asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
<asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
<asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
<asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
<asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
<asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
<asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
<asp:ScriptReference Name="WebFormsBundle" />--%>
<%--Site scripts--%>
<%-- </Scripts>--%>
</asp:ScriptManager>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">
<a runat="server" href="~/">your logo here</a>
</p>
</div>
<div class="float-right">
<section id="login">
<asp:LoginView runat="server" ViewStateMode="Disabled">
<AnonymousTemplate>
<ul>
<li><a id="registerLink" runat="server" href="~/Account/Register">Register</a></li>
<li><a id="loginLink" runat="server" href="~/Account/Login">Log in</a></li>
</ul>
</AnonymousTemplate>
<LoggedInTemplate>
<p>
Hello, <a runat="server" class="username" href="~/Account/Manage" title="Manage your account">
<asp:LoginName runat="server" CssClass="username" />
</a>!
<asp:LoginStatus runat="server" LogoutAction="Redirect" LogoutText="Log off" LogoutPageUrl="~/" />
</p>
</LoggedInTemplate>
</asp:LoginView>
</section>
<nav>
<ul id="menu">
<li><a runat="server" href="~/">Home</a></li>
<li><a runat="server" href="~/About">About</a></li>
<li><a runat="server" href="~/Contact">Contact</a></li>
</ul>
</nav>
</div>
</div>
</header>
<div id="body">
<asp:ContentPlaceHolder runat="server" ID="FeaturedContent" />
<section class="content-wrapper main-content clear-fix">
<asp:ContentPlaceHolder runat="server" ID="MainContent" />
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>
© <%: DateTime.Now.Year %> - My ASP.NET Application
</p>
</div>
</div>
</footer>
</form>
</body>
</html>
和我的默认值。Aspx看起来像这样:
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<asp:Content ID="HeadContent" ContentPlaceHolderID="HeadContent" runat="server">
<script>
$(document).ready(function () {
//Examples of how to assign the Colorbox event to elements
$(".group1").colorbox({ rel: 'group1' });
$(".group2").colorbox({ rel: 'group2', transition: "fade" });
$(".group3").colorbox({ rel: 'group3', transition: "none", width: "75%", height: "75%" });
$(".group4").colorbox({ rel: 'group4', slideshow: true });
$(".ajax").colorbox();
$(".youtube").colorbox({ iframe: true, innerWidth: 640, innerHeight: 390 });
$(".vimeo").colorbox({ iframe: true, innerWidth: 500, innerHeight: 409 });
$(".iframe").colorbox({ iframe: true, width: "80%", height: "80%" });
$(".inline").colorbox({ inline: true, width: "50%" });
$(".callbacks").colorbox({
onOpen: function () { alert('onOpen: colorbox is about to open'); },
onLoad: function () { alert('onLoad: colorbox has started to load the targeted content'); },
onComplete: function () { alert('onComplete: colorbox has displayed the loaded content'); },
onCleanup: function () { alert('onCleanup: colorbox has begun the close process'); },
onClosed: function () { alert('onClosed: colorbox has completely closed'); }
});
$('.non-retina').colorbox({ rel: 'group5', transition: 'none' })
$('.retina').colorbox({ rel: 'group5', transition: 'none', retinaImage: true, retinaUrl: true });
//Example of preserving a JavaScript event for inline calls.
$("#click").click(function () {
$('#click').css({ "background-color": "#f00", "color": "#fff", "cursor": "inherit" }).text("Open this window again and this message will still be here.");
return false;
});
});
</script>
</asp:Content>
<asp:Content runat="server" ID="FeaturedContent" ContentPlaceHolderID="FeaturedContent">
<section class="featured">
<div class="content-wrapper">
<hgroup class="title">
<h1><%: Title %>.</h1>
<h2>Modify this template to jump-start your ASP.NET application.</h2>
</hgroup>
<p>
To learn more about ASP.NET, visit <a href="http://asp.net" title="ASP.NET Website">http://asp.net</a>.
The page features <mark>videos, tutorials, and samples</mark> to help you get the most from
ASP.NET. If you have any questions about ASP.NET visit
<a href="http://forums.asp.net/18.aspx" title="ASP.NET Forum">our forums</a>.
</p>
</div>
</section>
</asp:Content>
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
<h3>We suggest the following:</h3>
<ol class="round">
<li class="one">
<h5>Getting Started</h5>
ASP.NET Web Forms lets you build dynamic websites using a familiar drag-and-drop, event-driven model.
A design surface and hundreds of controls and components let you rapidly build sophisticated, powerful UI-driven sites with data access.
<a href="http://go.microsoft.com/fwlink/?LinkId=245146">Learn more…</a>
</li>
<li class="two">
<h5>Add NuGet packages and jump-start your coding</h5>
NuGet makes it easy to install and update free libraries and tools.
<a href="http://go.microsoft.com/fwlink/?LinkId=245147">Learn more…</a>
</li>
<li class="three">
<h5>Find Web Hosting</h5>
You can easily find a web hosting company that offers the right mix of features and price for your applications.
<a href="http://go.microsoft.com/fwlink/?LinkId=245143">Learn more…</a>
</li>
</ol>
These are images: <br />
<a class="group1" href="https://pbs.twimg.com/profile_images/604644048/sign051.gif">sign.</a> <br />
<a class="group1" href="http://i.telegraph.co.uk/multimedia/archive/02368/potd-cowboy-cat_2368962k.jpg">cat.</a><br />
<a class="group1" href="http://www.nonags.com/funimg/dogiedoll.jpg">dog.</a><br />
<a class="group2" href="https://pbs.twimg.com/profile_images/604644048/sign051.gif">sign.</a> <br />
<a class="group2" href="http://i.telegraph.co.uk/multimedia/archive/02368/potd-cowboy-cat_2368962k.jpg">cat.</a><br />
<a class="group2" href="http://www.nonags.com/funimg/dogiedoll.jpg">dog.</a><br />
<a class="group3" href="https://pbs.twimg.com/profile_images/604644048/sign051.gif">sign.</a> <br />
<a class="group3" href="http://i.telegraph.co.uk/multimedia/archive/02368/potd-cowboy-cat_2368962k.jpg">cat.</a><br />
<a class="group3" href="http://www.nonags.com/funimg/dogiedoll.jpg">dog.</a><br />
<a class="group4" href="https://pbs.twimg.com/profile_images/604644048/sign051.gif">sign.</a> <br />
<a class="group4" href="http://i.telegraph.co.uk/multimedia/archive/02368/potd-cowboy-cat_2368962k.jpg">cat.</a><br />
<a class="group4" href="http://www.nonags.com/funimg/dogiedoll.jpg">dog.</a><br />
</asp:Content>