C # - Colorbox - δεν εμφανίζει εικόνες σωστά

ψήφοι
0

Είμαι χρησιμοποιώντας το plugin 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>

Νιώθω σαν να ακολούθησε το φροντιστήριο τέλεια. Μπορεί κάποιος να μου δώσει ένα προβάδισμα ως προς το τι μπορεί να κάνει λάθος; Αυτό είναι εξαιρετικά απογοητευτικό (και btw, δεν είναι η πρώτη shadowbox που έχω κάνει ποτέ στη ζωή μου, αλλά αυτή είναι η πρώτη φορά που είχα τόσο μεγάλο πρόβλημα μαζί τους και εγώ κατηγορώ VS2012).

Δημοσιεύθηκε 22/05/2014 στις 06:35
πηγή χρήστη
Σε άλλες γλώσσες...                            


1 απαντήσεις

ψήφοι
0

Η λύση κατέληξε να είναι πολύ πιο απλό από ό, τι νόμιζα. Πρώτα απ 'όλα, θέλετε να βεβαιωθείτε ότι αυτό το τμήμα:

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

είναι στο .aspx (ή .html) το αρχείο που θέλετε να τρέξει μέσα, δεν κύρια σελίδα σας. Δεύτερον μακριά, αν χρησιμοποιείτε τις προεπιλεγμένες ρυθμίσεις ASP.NET ιστοσελίδα, θα σας δοθεί μια πολύ bloat, συμπεριλαμβανομένων αυτό το μικρό διαμάντι για να τρέξει σενάρια:

    <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>
Απαντήθηκε 23/05/2014 στις 22:28
πηγή χρήστη

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more