C# - Colorbox - 无法正确显示图像

时间:2014-05-22 07:35:46

标签: c# jquery asp.net visual-studio-2012 colorbox

我正在使用

中的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>

我觉得我完全按照教程。任何人都可以告诉我我可能做错了什么吗?这令人难以置信地令人沮丧(顺便说一下,不是我生命中曾经做过的第一个影子盒,但这是我第一次遇到这么多麻烦而且我责备VS2012)。

1 个答案:

答案 0 :(得分:0)

解决方案最终比我想象的要简单得多。首先,你要确保这一部分:

<script>
    jQuery(document).ready(function () {
        jQuery('a.gallery').colorbox({ opacity:0.5 , rel:'group1' });
    });
</script>

位于您希望它运行的.aspx(或.html)文件中,而不是您的母版页。第二,如果您使用ASP.NET默认站点设置,您将获得很多膨胀,包括运行脚本的这个小宝石:

    <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>
                        &copy; <%: DateTime.Now.Year %> - My ASP.NET Application
                    </p>
                </div>
            </div>
        </footer>
    </form>
</body>
</html>

我的default.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>