1. 首頁
  2. 問答
  3. C＃ - 彩盒 - 不顯示圖像正確

C＃ - 彩盒 - 不顯示圖像正確

2014-05-22 170 views
0

我使用中發現的顏色框插件模式在C＃ - 彩盒 - 不顯示圖像正確

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

來源

2014-05-22 Blairg23

回答

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>

來源

2014-05-23 23:28:49 Blairg23

相關問題

 相關問題