jQuery를 설정하여 앵커 클릭시 PrettyPhoto를 시작하십시오.

나는 간단한 갤러리를 설정하기 위해 PrettyPhoto와 협력 해 왔습니다. 내 문제는 개발자의 site에 제공된 설명서에서 API를 구현하는 방법을 이해할 수 없다는 것입니다. 이해하고 앵커를 클릭 할 때 코드를 추가해도 아무런 변화가 없습니다.jQuery를 설정하여 앵커 클릭시 PrettyPhoto를 시작하십시오.

저는 Site.Master 페이지와 플러그인을 사용하는 콘텐츠 페이지가 있습니다. 여기

<asp:Content ID="HeadContent" runat="server" ContentPlaceHolderID="HeadContent"> 
    <title>Gallery</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />  
    <script type="text/javascript"> 
     $('#prettyPhoto').click(function() { 
      api_images = ['images/prettyPhoto/dogs.png', 'images/prettyPhoto/Yard1.png', 'images/prettyPhoto/Yard2.png', 'images/prettyPhoto/Yard3.png']; 
      api_titles = ['Title Dogs', 'Title Yard 1', 'Title Yard 2', 'Title Yard 3']; 
      api_descriptions = ['Dogs', 'Yard 1', 'Yard 2', 'Yard 3']; 
      $.prettyPhoto.open(api_images, api_titles, api_descriptions); 
     }); 
    </script> 
</asp:Content> 

... 

<a href="#" id="prettyPhoto"><img src='images/prettyPhoto/dogs.png' alt='Dogs' style="float:right; margin:0px 0px 10px 10px" /></a>

그리고 Site.Master 내용은 다음과 같습니다 : 여기 콘텐츠 페이지에있는 코드는 내가 여기에 너무 많은 정보를 게시하고 있지 않다 희망

<head id="Head1" runat="server"> 
    <link rel="stylesheet" href="Styles/styles.css" type="text/css" /> 
    <link rel="stylesheet" href="styles/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" /> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
    <script type="text/javascript" src="Scripts/jquery.cycle.all.latest.js"></script> 
    <script type="text/javascript" src="Scripts/jquery.prettyPhoto.js" charset="utf-8"></script>  
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('.newWindow').click(function (event) { 
       var url = $(this).attr("href"); 
       var windowName = $(this).attr("name"); 
       var windowSize = windowSizeArray[$(this).attr("rel")]; 
       window.open(url, windowName, windowSize); 
       event.preventDefault(); 
      });    
      $('.slideshow').cycle();    
      if ($("#content").height() > $("#sidebar").height()) { 
       $("#sidebar").height($("#content").height()); 
      } 
      else { 
       $("#content").height($("#sidebar").height()); 
      } 
     }); 
    </script> 
    <asp:ContentPlaceHolder ID="HeadContent" runat="server"> 
    </asp:ContentPlaceHolder> 
</head>

,하지만 난 아니에요 내 실수가 어디 있는지 분명히해라. 그리고 나는 오늘 밤 일찍부터 내가 원하는대로이 컨트롤을 작동 시켰기 때문에 실수를하고있다. 그런 다음 "미세 조정"을 시작해야했다. 내가 그것을 알기 전에 나는 나의 변화를 추적하지 못하고 그것을 깨뜨렸다.

출처

2012-03-28 William Smith

오케이, 나는 오류를 알아 냈고 다른 누군가가 사용할 수 있도록 답변을 게시 할 것입니다. 개발자 웹 사이트의 설명서에서 API 구현에 대한 몇 가지 세부 사항을 설명하는 데 부족함을 알았지 만 이러한 세부 사항은 더 많은 jQuery 경험을 가진 사람에게 분명합니다. 나는 두 가지 실수를 저질렀다. 첫째, 클릭 핸들러는 $ (document) .ready 함수 안에 있어야합니다. 둘째, 클릭 핸들러에서 API 호출을 선언하기 전에 플러그인을 호출해야합니다. 이것은 나에게 정말로 혼란스러운 부분입니다. 나는 API가 플러그인 호출의 필요성을 무효화했다고 생각했지만, 다시 jQuery 경험은 제한적이다.

<script type="text/javascript" src="Scripts/jquery.prettyPhoto.js" charset="utf-8"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $().prettyPhoto(); 
     $('#prettyPhoto').click(function() { 
      api_images = ['images/prettyPhoto/dogs.png', 'images/prettyPhoto/Yard1.png', 'images/prettyPhoto/Yard2.png', 'images/prettyPhoto/Yard3.png']; 
      api_titles = ['Title Dogs', 'Title Yard 1', 'Title Yard 2', 'Title Yard 3']; 
      api_descriptions = ['Dogs', 'Yard 1', 'Yard 2', 'Yard 3']; 
      $.prettyPhoto.open(api_images, api_titles, api_descriptions); 
     }); 
    }); 
</script>

이 일에서 나는 위의 코드가 Site.Master 또는 콘텐츠 파일 중 하나에 배치, 분명히 어느 곳에서나 해당 파일에서 할 수 있다는 것을 배운 다음은 최종 코드입니다. 이를 해결하면 외부 XML 파일에서이 전체 코드 블록을 동적으로 생성하는 다른 아이디어를 구현하는 데 도움이되었습니다.

출처

2012-03-28 13:17:00

미래의 방문자를 위해 솔루션을 수용 대답으로 표시해주십시오. –

멋진 팁 주셔서 감사합니다; 내 하루를 구했다. – yitwail

jQuery를 설정하여 앵커 클릭시 PrettyPhoto를 시작하십시오.

답변

관련 문제