アンカーでPrettyPhotoを起動するためのjQueryの設定方法

私はPrettyPhotoを使って簡単なギャラリーを設定しています。私の問題は、開発者のsiteで提供されているドキュメントからAPIを実装する方法がわかりません。私が理解しているコードを追加してアンカーをクリックすると、何も起こりません。アンカーでPrettyPhotoを起動するためのjQueryの設定方法

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

[OK]をクリックして、エラーを見つけました。他の誰かが使用できる場合は、回答を投稿します。開発者のWebサイトにあるドキュメンテーションが、APIの実装に関するいくつかの詳細を説明していないことがわかりましたが、これらの詳細はjQueryの経験が豊富な人にとっては明らかです。私は2つの間違いをしていた。まず、クリックハンドラは$（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

アンカーでPrettyPhotoを起動するためのjQueryの設定方法

答えて

関連する問題