1. 홈
  2. 질의 응답
  3. C 번호 - Colorbox - 제대로

C 번호 - Colorbox - 제대로

2014-05-22 2 views
0

내가 찾은 colorbox 모달 플러그인을 사용하고 표시되지 이미지C 번호 - 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 마스터 페이지로 확장하려고하면 다른 페이지에서이를 인식하지 못합니다. 사실, 개별 페이지의 태그에 넣으면 아무 것도 인식하지 못합니다. 심지어 로컬 .js 파일 대신 원래 URL에 대한 참조를 만들려고했지만 행운이 없습니다. 내 마스터 파일을 호출 오전 방법입니다 :

<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, 내 인생에서 한 첫 섀도우 박스는 아니지만, 내가 처음으로 그렇게 많은 어려움을 겪었고 VS2012를 탓했습니다).

출처

2014-05-22 Blairg23

답변

0

솔루션이 결국 내가 생각했던 것보다 훨씬 간단 해졌습니다.

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

는 .ASPX에 (또는 .html), 당신이에서 실행하려는 마스터 페이지를하지 파일 : 우선, 당신은 반드시이 부분을 만들고 싶어. 다만,

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

당신은 스크립트 관리자 위의 일부 스크립트를 사용하지 않는 : 당신이 ASP.NET 기본 사이트 설정을 사용하는 경우 두 번째 해제, 당신은 스크립트를 실행하려면이 작은 보석을 포함하여 팽창을 많이 받게됩니다 이것을 주석으로 처리하십시오. 그런 다음 일반 스크립트를 태그에서 일반적으로 호출하는 방식으로 호출하십시오.

<%@ 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>
: 
<%@ 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를이처럼 보였다

:

내 최종 마스터 페이지는이처럼 보였다

출처

2014-05-23 23:28:49 Blairg23

 관련 문제

  • 관련 문제 없음^_^