Wie man jQuery einrichtet, um PrettyPhoto auf Anker zu starten klicken

Ich habe mit PrettyPhoto gearbeitet, um eine einfache Galerie einzurichten. Mein Problem ist, dass ich nicht verstehe, wie man die API aus der Dokumentation site des Entwicklers implementiert. Wenn ich den Code nach meinem Verständnis hinzufüge und auf den Anker klicke, passiert nichts.Wie man jQuery einrichtet, um PrettyPhoto auf Anker zu starten klicken

Ich habe eine Site.Master-Seite und eine Inhaltsseite, die das Plugin verwendet. Hier ist der Code, den ich in der Content-Seite haben:

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

Und hier ist der Site.Master Inhalt:

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

Ich hoffe, ich bin nicht zu viele Informationen hier zu veröffentlichen, aber ich bin nicht klar wo mein Fehler ist. Und ich weiß, dass ich einen Fehler mache, weil ich früher diese Kontrolle hatte, so wie ich es wollte, aber dann musste ich mit der Feinabstimmung beginnen. Bevor ich es wusste, hatte ich meine Veränderungen aus den Augen verloren und es gebrochen.

Quelle

2012-03-28 William Smith

OK, ich habe den Fehler herausgefunden und werde die Antwort posten, falls jemand anders sie benutzen könnte. Ich fand die Dokumentation auf der Website des Entwicklers zu wenig, um ein paar Details zur Implementierung der API zu erklären, aber vielleicht sind diese Details nur für jemanden mit mehr jQuery-Erfahrung offensichtlich. Ich habe zwei Fehler gemacht. Zuerst muss der Click-Handler innerhalb der $ (document) .ready-Funktion sein. Zweitens muss das Plugin vor dem Deklarieren des API-Aufrufs im Click-Handler aufgerufen werden. Das ist der Teil, der mich wirklich verwirrt; Ich hätte gedacht, dass die API die Notwendigkeit, das Plugin aufzurufen, negiert, aber meine jQuery-Erfahrung ist wiederum begrenzt. Hier ist der endgültige Code:

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

Dabei habe ich gelernt, dass der obige Code kann in platziert werden, um entweder die Site.Master oder Content-Datei, und anscheinend fast überall in diesen Dateien. Dies zu lösen, hat mir auch geholfen, meine andere Idee zu implementieren, nämlich den gesamten Codeblock dynamisch aus einer externen XML-Datei zu generieren.

Quelle

2012-03-28 13:17:00

Fühlen Sie sich frei, Ihre Lösung als die akzeptierte Antwort zu markieren, für zukünftige Besucher. –

Danke für einen tollen Tipp; rettete meinen Tag – yitwail

Wie man jQuery einrichtet, um PrettyPhoto auf Anker zu starten klicken

Antwort

Verwandte Themen