C # - Colorbox - неправильно отображать изображения

Question

C # - Colorbox - неправильно отображать изображения

0

Я использую modbox плагин 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).

Blairg23 22 май 2014, в 10:15

Источник

Теги:

c#

jquery

asp.net

visual-studio-2012

colorbox

1 ответ

Ещё вопросы

Blairg23 · Answer 1 · 2014-05-23T21-40-00.000Z

Решение оказалось намного проще, чем я думал. Прежде всего, вы хотите убедиться, что эта часть:

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