PrettyPhoto Einbindungsprobleme

  • HTML

Es gibt 8 Antworten in diesem Thema. Der letzte Beitrag () ist von Quellcoder02.

    PrettyPhoto Einbindungsprobleme

    Hallo liebe Community,

    ich probiere nun schon sein 2 Tagen verzweifelt Pretty Photo in meine Website einzubinden. Ich habe mich dafür bei diesem Tutorial erkundigt: teachingmultimedia.com/mmp240/prettyPhoto/#prettyPhoto.
    Nur leider funktioniert es nicht. Ich habe alles so gemacht wie es beschrieben wird, wenn ich nun auf das bild klicke öffnet sich nicht diese box wo man dann in der gallery herumschalten kann, sondern das bild wird mir in einem neuen Fenster angezeigt.

    Die Betroffenen Code-Teile:
    Spoiler anzeigen

    HTML-Quellcode

    1. <link
    2. href="/styles/prettyPhoto/css/prettyPhoto.css" rel="stylesheet"
    3. type="text/css" media="screen" title="prettyPhoto main stylesheet"/>
    5. <script
    6. src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"
    7. type="text/javascript" type="text/javascript"></script>
    8. <script src="/styles/prettyPhoto/js/jquery-prettyPhoto.js" type="text/javascript"></script>
    10. <div class="container">
    11. <div id="img" class="row text-center">
    12. <div class="col-sm-4">
    13. <ul class="gallery">
    15. <a href="img/portrait2.jpg"
    16. rel="prettyPhoto[screenshots]" title="Titel"><img
    17. src="img/portrait2.jpg" width="300" height="auto" alt="Screenshot 1"
    18. /></a>
    19. <a href="img/portrait2.jpg"
    20. rel="prettyPhoto[screenshots]" title="Titel"><img
    21. src="img/portrait2.jpg" width="300" height="auto" alt="Screenshot 1"
    22. /></a>
    23. </ul>
    24. </div>
    25. </div>
    26. </div>
    28. <script type="text/javascript" charset="utf-8">
    29. $(document).ready(function(){
    30. $("a[rel^='prettyPhoto']").prettyPhoto({social_tools:''});
    31. });
    32. </script>
    33. </body>



    Eventuell weiß ja jemand von euch was ich da falsch gemacht habe ?( .

    LG
    Quellcoder
    Projekte

    Hi,

    bin Grad am Smartphone auf VBP deswegen kurze Antwort.

    Unten in deinem Javascript Code innerhalb vom Document ready event hast du ja den Pretty Photo code. Setze davor mal diese Zeilen:

    e.preventDefault ();
    alert ("Test");

    und gib der function nach dem ready zwischen den Klammern ein "e" (ohne Anführungszeichen).

    Klicke dann nochmal auf das Bild und sag was dann passiert oder ob alles unverändert ist.

    Alternativ gib dem a Tag eine Klasse pretty-photo und ändere deinen jQuery Selector entsprechend.


    Link
    Hello World

    Hallo @Link,

    ich habe den Code so abgeändert wie du gesagt hast, und es blieb alles unverändert.
    Code:
    Spoiler anzeigen

    HTML-Quellcode

    1. <script type="text/javascript" charset="utf-8">
    2. $(document).ready(function(e){
    3. e.preventDefault ();
    4. alert ("Test");
    5. $("a[rel^='prettyPhoto']").prettyPhoto({social_tools:''});
    6. });
    7. </script>



    Link schrieb:

    Alternativ gib dem a Tag eine Klasse pretty-photo und ändere deinen jQuery Selector entsprechend.


    Ich verstehe leider nicht ganz was du damit meinst. Falls das noch was zur Sache tut, würde ich dich bitten es mir zu erläutern :D .

    Lg
    Quellcoder
    Projekte

    Hi,

    sicher, also es ist ganz einfach. Derzeit spricht dein Selector ja das rel Attribut des Links an. Vergib dem Link jetzt eine Klasse zb <a class="pretty-photo"> und sprich im Selector die Klasse an und nicht das rel Attribut, so in etwa: $("a.pretty-photo").prettyPhoto(...);

    Check auch mal die Browser Console ob du da irgendwelche Fehler hast.

    Ich schau mir das nochmal genauer an wenn ich Zuhause vor dem PC hocke.

    Link
    Hello World

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „Link“ ()

    Hallo @Link,

    ich habs jetzt mal probiert, ich habe allerdings die Zeile mit dem rel also $("a[rel^='prettyPhoto']").prettyPhoto({social_tools:''}); nicht weggelassen, da diese doch wichtig für die gallery ist.
    Jetziger Code:
    Spoiler anzeigen

    HTML-Quellcode

    1. <a href="img/portrait2.jpg" rel="prettyPhoto[screenshots]" class="prettyPhoto" title="Titel"><img src="img/portrait2.jpg" width="300" height="auto" alt="Screenshot 1" /></a>
    2. <a href="img/portrait2.jpg" rel="prettyPhoto[screenshots]" class="prettyPhoto" title="Titel"><img src="img/portrait2.jpg" width="300" height="auto" alt="Screenshot 1" /></a>
    4. <script type="text/javascript" charset="utf-8">
    5. $(document).ready(function(e){
    6. e.preventDefault ();
    7. alert ("Test");
    8. $("a[rel^='prettyPhoto']").prettyPhoto({social_tools:''});
    9. $("a.prettyPhoto").prettyPhoto({social_tools:''});
    10. });
    11. </script>



    Link schrieb:

    Check auch mal die Browser Co Sole ob du da irgendwelche Fehler hast.


    Die Konsole gibt nichts aus.

    LG
    Quellcoder
    Projekte

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „Quellcoder02“ ()

    Hi,

    ok scheinbar hast du die prettyPhoto JavaScript Datei falsch eingebunden, es muss /styles/prettyPhoto/js/jquery.prettyPhoto.js eingebunden werden und nicht /styles/prettyPhoto/js/jquery-prettyPhoto.js (Punkt statt Bindestrich).

    Der Code funktioniert für mich:

    HTML-Quellcode

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <title>Test prettyPhoto</title>
    6. <link href="/styles/prettyPhoto/css/prettyPhoto.css" rel="stylesheet" type="text/css" media="screen" title="prettyPhoto main stylesheet"/>
    7. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript" type="text/javascript"></script>
    8. <script src="/styles/prettyPhoto/js/jquery.prettyPhoto.js" type="text/javascript"></script>
    9. </head>
    11. <body>
    13. <div class="container">
    14. <div id="img" class="row text-center">
    15. <div class="col-sm-4">
    16. <ul class="gallery">
    17. <a href="img/portrait2.jpg" rel="prettyPhoto[screenshots]" title="Titel"><img src="img/portrait2.jpg" width="300" height="auto" alt="Screenshot 1"/></a>
    18. <a href="img/portrait2.jpg" rel="prettyPhoto[screenshots]" title="Titel"><img src="img/portrait2.jpg" width="300" height="auto" alt="Screenshot 1"/></a>
    19. </ul>
    20. </div>
    21. </div>
    22. </div>
    24. <script type="text/javascript" charset="utf-8">
    25. jQuery(document).ready(function () {
    26. jQuery("a[rel^='prettyPhoto']").prettyPhoto({social_tools: ''});
    27. });
    28. </script>
    30. </body>
    31. </html>


    Hier als rar example.rar bzw zip example.zip


    Link :thumbup:
    Hello World

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „Link“ ()

    @Link Hab das alles von dir an den Bereichen mal übernommen, und es hat sich immer noch nichts geändert. Was aber lustig ist ist, dass dein beispiel bei mir auch nicht funktioniert (auf der website die in der ersten nachricht verlinkt ist, funktioniert es aber). Kannst du dir das erklären?

    Lg
    Quellcoder
    Projekte

    Hast du dir denn die Dateien die ich am Ende meines Posts angehängt hab runtergeladen und ausprobiert? Das funktioniert definitiv.

    Link :thumbup:
    Hello World

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „Link“ ()

    @Link ich rede ja von diesen Beispiel-Datein, ich öffne die index.php im Browser, drücke auf eines der beiden Bildern und es wird mir in einem neuen tab auf voller größe angezeigt.

    LG
    Quellcoder
    Projekte