1. Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!
    Information ausblenden

PHP Array von Javascript durchsuchen lassen

Dieses Thema im Forum "PHP" wurde erstellt von lokoroko, 22 Juni 2017.

  1. lokoroko

    lokoroko Mitglied

    Registriert seit:
    9 Mai 2017
    Beiträge:
    45
    Punkte für Erfolge:
    6
    Also ich habe jetzt mal auf der Basis des ersten Codes einen Code für den linken Button geschrieben bzw. umgeschrieben.

    Code (text):
    1. (function () {
    2.             var idx = 0;
    3.             $("img.bild").on("click", function () {
    4.                 idx = parseInt($(this).data("idx"));
    5.                 var imgurl = $(this).attr("src");
    6.                 $("#lightbox_overlay img").attr("src", imgurl);
    7.             });
    8.  
    9.             $('#left').click(function () {
    10.                 prv_img();
    11.             });
    12.             function prv_img() {
    13.                 idx--;
    14.                 var newsrc = $("#img" + idx).attr("src");
    15.                 $('#lightbox_overlay #lightbox_inhalt img').attr('src', newsrc);
    16.             }
    17.         })();
    Erstmal die gute Nachricht. Das Klicken nach links und rechts funktioniert schon mal doch es gibt ein Problem. Ich versuche das ganze mal zu beschreiben.

    Sagen wir auf meiner Website werden 10 Bilder von oben nach unten ausgelesen.
    Bild 1
    Bild2
    Bild3
    ...
    Bild 10

    Klicke ich auf Bild 5 dann wird mir dieses Bild in der Lightbox angezeigt. Wenn ich auf den rechten Button klicke, gelange ich auf Bild 6. Klicke ich nochmal auf den rechten Button auf Bild 7. Soweit so gut.

    Doch wenn ich auf Bild 7 bin und dann auf den linken Button klicke um ein Bild zurück zu gehen, dann bin ich auf einmal auf Bild 4.

    Das heißt, der linke und der rechte Button funktionieren in diesem Fall ausgehend von Bild 5. Der Code müsste also insofern geändert werden als das man dem Code klar macht welches Bild das aktive Bild ist oder ?
     
    Werbung:

    Jetzt registrieren, damit diese Werbung verschwindet
  2. Sempervivum

    Sempervivum Aktives Mitglied

    Registriert seit:
    18 Oktober 2016
    Beiträge:
    286
    Punkte für Erfolge:
    28
    Verstehe, aber kann es nicht reproduzieren. Bei mir funktioniert dieser Code wie erwartet:
    Code (text):
    1.         (function () {
    2.             $('#right').after('<div id="lightbox_overlay"><div id="textbox"><div id="lightbox_inhalt"><div id="val_nav"><i id="left" class="fa fa-chevron-left" aria-hidden="true" style="float: left"></i><i id="x" class="fa fa-times" aria-hidden="true"></i><i id="right" class="fa fa-chevron-right" aria-hidden="true" style="float: right"></i></div><img /></div></div></div>');
    3.             var idx = 0;
    4.             $("img.bild").on("click", function () {
    5.                 idx = parseInt($(this).data("idx"));
    6.                 var imgurl = $(this).attr("src");
    7.                 $("#lightbox_overlay img").attr("src", imgurl);
    8.             });
    9.             $('#left').click(function () {
    10.                 prev_img();
    11.             });
    12.             function prev_img() {
    13.                 idx--;
    14.                 var newsrc = $("#img" + idx).attr("src");
    15.                 $('#lightbox_overlay #lightbox_inhalt img').attr('src', newsrc);
    16.             }
    17.             $('#right').click(function () {
    18.                 next_img();
    19.             });
    20.             function next_img() {
    21.                 idx++;
    22.                 var newsrc = $("#img" + idx).attr("src");
    23.                 $('#lightbox_overlay #lightbox_inhalt img').attr('src', newsrc);
    24.             }
    25.         })();
    Poste am besten mal dein vollständiges Javascript mit Öffnen, Links und Rechts.
     
    lokoroko gefällt das.
  3. lokoroko

    lokoroko Mitglied

    Registriert seit:
    9 Mai 2017
    Beiträge:
    45
    Punkte für Erfolge:
    6
    Ach ja na klar, mir ist jetzt aufgefallen was bei meinem Code der Haken war. Der Fehler war das ich sowohl für den rechten als auch für den linken Button jeweils eine neue Funktion erzeugt hatte. Habe das ganze jetzt in eine Funktion geschrieben so wie du und jetzt funktioniert es genau so wie ich mir das vorgestellt habe :D

    Doch eine Frage stellt sich mir jetzt auch noch. Wenn ich auf einen der Button klicke, wird manchmal eine blaue Markierung erzeugt. Hast du zufällig ne Idee woran das liegen könnte ?

    Aber schon mal vielen vielen Dank für die Hilfe, hab wirklich was gelernt dabei ! :)
     
  4. Sempervivum

    Sempervivum Aktives Mitglied

    Registriert seit:
    18 Oktober 2016
    Beiträge:
    286
    Punkte für Erfolge:
    28
    Nicht ohne den Code in Aktion zu sehen. Poste die URl deiner Seite oder wenn Du noch keinen Webspace hast, lade sie bei bplaced.net hoch.
     
    lokoroko gefällt das.
  5. lokoroko

    lokoroko Mitglied

    Registriert seit:
    9 Mai 2017
    Beiträge:
    45
    Punkte für Erfolge:
    6
    Gute Neuigkeiten, ich habe das Problem selbst gelöst bekommen :) Ich habe da aber noch so ne allgemeine Frage. Und zwar weißt du ja das ich die Lightbox mit Javascript erzeuge. Mein Ziel jetzt ist es in der Lightbox nicht nur die Bilder anzeigen zu lassen sondern auch die Kommentare die dazu abgegeben wurden. Das Script für die Kommentarfunktion ist bereits fertig und funktioniert auch, ist aber eine PHP-Datei.

    Ist es also möglich, diese PHP-Datei in das Javascript zur Lightbox mit einzubinden ?

    Ich weiß nämlich das es innerhalb von PHP-Datein eine Funktion gibt die andere PHP-Dateien mit einbindet:

    <?php include("Datei.php"); ?>

    Im Prinzip wünsche ich mir genau sowas :)
     
  6. Sempervivum

    Sempervivum Aktives Mitglied

    Registriert seit:
    18 Oktober 2016
    Beiträge:
    286
    Punkte für Erfolge:
    28
    Zunächst mal weniger in das Javascript sondern mehr in die Datei, die das Javascript und das HTML enthält. Ja, das geht mit PHP-include. Dieser Datei musst Du ebenfalls die Endung "php" geben, damit der Browser das PHP parst und ausführt.

    Für die Kommentare sehe ich im wesentlichen zwei Möglichkeiten:

    1. Du legst den Kommentar jeweils als weiteres data-Attribut bei dem Bild ab, so wie wir es schon mit dem Index und der Bild-ID gemacht haben:
    Code (text):
    1. <img class='bild' data-comment='" . /* hier den Kommentar eintragen */ . "' data-idx='" . $idx . "' id='img" . $idx . "' src='".$test.$row[' path']."'>
    2. Alle Kommentare in ein (assoziatives) Array eintragen und dieses nach Javascript übertragen.

    Eigentlich gefällt mir 2. besser, denn wenn Du von Kommentaren sprichst, vermute ich, dass diese auch länger sein können und dann würde das HTML sehr unübersichtlich. Allerdings vermute ich, dass Du die Kommentare in der selben DB-Tabelle führst wie die Bilder und dann wäre 1. von der Programmierung her einfacher. Um es sinnvoll zu entscheiden, müsste man mehr über deine Datenstrukturen wissen.
     
    Zuletzt bearbeitet: 3 Juli 2017
    lokoroko gefällt das.
  7. lokoroko

    lokoroko Mitglied

    Registriert seit:
    9 Mai 2017
    Beiträge:
    45
    Punkte für Erfolge:
    6
    tut mir erstmal leid das ich so lange nicht geschrieben hatte aber der Urlaub kam dazwischen :)

    So und jetzt weiter im Text. Vielleicht sollte ich mal das Script für Kommentarfunktion zeigen:

    Code (text):
    1. <?php
    2. session_start();
    3. $userid = $_SESSION['userid'];
    4. $username = $_SESSION['username'];
    5. ?>
    6. <html>
    7. <boody>
    8. <?php
    9.    
    10.  $z= $_GET["delid"];
    11.    
    12.    
    13. try {
    14.     $db = new PDO('mysql:host=localhost;dbname=Datenbank_NEU', 'root', 'lehar456');
    15.     $sql = "SELECT kommentare.userid, kommentare.k_path, kommentare.eintrag, kommentare.autor, kommentare.datum, DATE_FORMAT(datum,'%d.%m.%Y um %H:%i') AS meindatum FROM `kommentare` WHERE kommentare.k_path = '$z'";
    16.    
    17.     $ergebnis = $db->query($sql);
    18.     foreach ($ergebnis as $zeile) {
    19.         printf("<p><a href=\"mailto:%s\">%s</a> schrieb am %s</p>
    20.           <h3>%s</h3><p>%s</p><hr noshade=\"noshade\" />",
    21.           urlencode($zeile['']), // da stand mal email
    22.           htmlspecialchars($zeile['autor']),
    23.           htmlspecialchars($zeile['meindatum']),
    24.           htmlspecialchars($zeile['']), // hier stand mal userid
    25.           nl2br(htmlspecialchars($zeile['eintrag']))
    26.           );
    27.     }
    28. } catch (PDOException $e) {
    29.   echo 'Fehler: ' . htmlspecialchars($e->getMessage());
    30. }
    31. ?>
    32.    
    33. <?php  
    34.     $y= $_GET["delid"];
    35.  
    36.    
    37.  if (isset($_SESSION['userid']) &&
    38.      isset($_SESSION['username']) &&
    39.      isset($_POST["Kommentar"]))  {
    40.    
    41.    
    42.      try {
    43.          $bobo = $_POST["Kommentar"];
    44.          $pdo = new PDO('mysql:host=localhost;dbname=Datenbank_NEU', 'root', 'lehar456');
    45.          $statement = $pdo->prepare("INSERT INTO kommentare (id, userid, k_path, eintrag, autor, datum) VALUES (NULL, '$userid', '$y', '$bobo', '$username', CURRENT_TIMESTAMP)");
    46.          $statement->execute();
    47.          echo "Eintrag hinzugef&uuml;gt";
    48.      }   catch (PDOException $e) {
    49.          echo 'Fehler: ' . htmlspecialchars($e->getMessage());
    50.      }
    51.  }  
    52. ?>
    53.    
    54. <form method="post">
    55. Kommentar
    56. <textarea cols="70" rows="10" name="Kommentar"></textarea><br/>
    57. <input type="submit" name="Submit" value="Eintragen">
    58. </form>
    59. </boody>
    60. </html>
    So, über dieses Script ist aktuell bereits möglich Kommentare zu einem Bild abzugeben und diese auch auszulesen. Im wesentlichen möchte ich dieses Script aber auch immer dann angezeigt bekommen sobald ich die Lightbox öffne.
    Dafür wandert das Bild an den linken Rand der Lightbox und rechts davon soll die Kommentarfunktion zu sehen sein.

    Und ja du lagst mit deiner Vermutung bereits richtig. Die Kommentare werden in einer Datenbank mit den Bildpfaden abgespeichert so das klar ist welches Kommentar zu welchem Bild gehört.

    Jetzt ist natürlich die Frage ob es da eine Möglichkeit gibt das ganze relativ einfach zu realisieren oder ob man dann wirklich über den Weg geht den du bereits genannt hattest...
     
  8. Sempervivum

    Sempervivum Aktives Mitglied

    Registriert seit:
    18 Oktober 2016
    Beiträge:
    286
    Punkte für Erfolge:
    28
    Wenn ich das richtig verstehe, sind diese Kommentare relativ umfangreich: Mehrere Benutzer können jeweils einen Kommentar verfassen und ein Kommentare kann wahrscheinlich über mehrere Zeilen gehen. Und Du willst wahrscheinlich zu jedem Kommentar auch den Benutzer und die Zeit anzeigen. Dann kann man wohl die Möglichkeit, sie in einem Data-Attribut abzulegen, ausschließen. Möglicher Weise über Ajax einlesen. Und was die Anzeige betrifft, muss das Kommentarfeld u. U. scrollbar sein.
     
    lokoroko gefällt das.
  9. lokoroko

    lokoroko Mitglied

    Registriert seit:
    9 Mai 2017
    Beiträge:
    45
    Punkte für Erfolge:
    6
    Genau, also du triffst den Nagel auf den Kopf. Und das kann man mithilfe von Ajax realisieren ja ? Wäre dann das erste mal das ich mich mit Ajax auseinandersetze. Kennst du eventuell eine Website auf der mein Vorhaben mit Ajax erklärt wird ?
     
  10. Sempervivum

    Sempervivum Aktives Mitglied

    Registriert seit:
    18 Oktober 2016
    Beiträge:
    286
    Punkte für Erfolge:
    28
    Selber orientiere ich mich an dem Handbuch von jQuery:
    http://api.jquery.com/jquery.ajax/
    Eine Seite in Form eines Tutorials habe ich im Moment nicht zur Hand, Du kansst ja selber versuchen, so etwas zu finden. I. allg. ist es ausreichend, wenn man von diesem Muster ausgeht:
    Code (text):
    1. $.ajax({
    2.         url: "name.php",
    3.         data: {imgurl: "images/bild1.jpg"},
    4.         type: "POST",
    5.         success: function(output) {
    6.             // Ausgabe von name.php steht unter dem Parameter output zur Verfügung
    7.             // in deinem Fall wären das die Kommentare
    8.         },
    9.         error: function( /* Parameter entspr Doku */ ) {
    10.         }
    11. });
    data sind die Parameter, die dem aufgerufenen Skript (name.php) übergeben werden. In deinem Fall muss das wahrscheinlich die URL des Bildes sein, weil diese der Schlüssel für die Datenbank ist.
    Die Funktion success() wird aufgerufen, wenn der Vorgang erfolgreich war. error() wird im Fehlerfall aufgerufen.
    Alles weitere kann man aus der o. a. Doku entnehmen.

    Natürlich musst Du noch das Layout deiner Lightbox erweitern, damit sie die Kommentare aufnehmen und anzeigen kann.

    Es ist kein Muss, die Kommentare mit Ajax zu holen. Man könnte sie auch beim Laden der Seite in ein ass. Arry bzw. Objekt mit Schlüssel Bild-URL einlesen und dann darauf zugreifen, wenn sie bei Öffnen der Lightbox gebraucht werden. Was eher zu empfehlen ist, hängt davon ab
    • wie lang die Kommentare sind
    • wie viele Datensätze bzw. Bilder es sind
     
    Zuletzt bearbeitet: 17 Juli 2017
    lokoroko gefällt das.
  11. lokoroko

    lokoroko Mitglied

    Registriert seit:
    9 Mai 2017
    Beiträge:
    45
    Punkte für Erfolge:
    6
    Also aktuell können Kommentare noch bis zu 5000 Zeichen lang sein. Das werde ich aber definitiv noch reduzieren auf so um die 1000 Zeichen. Grundsätzlich können es unendlich viele Datensätze/Bilder sein. Das ist davon abhängig wie viel von den Usern hochgeladen wird.

    Verstehe ich das jetzt richtig das mithilfe des Ajax-Codes den du geschrieben hattest, es grundsätzlich möglich ist einen PHP-Code in einen JS-Code einzubeziehen ?
     
  12. Sempervivum

    Sempervivum Aktives Mitglied

    Registriert seit:
    18 Oktober 2016
    Beiträge:
    286
    Punkte für Erfolge:
    28
    Ja, mit Ajax kannst Du ein PHP-Skript auf dem Server aufrufen und bekommst die Ausgabe im Javascript zurück.
     
    lokoroko gefällt das.
  13. lokoroko

    lokoroko Mitglied

    Registriert seit:
    9 Mai 2017
    Beiträge:
    45
    Punkte für Erfolge:
    6
    ich habe mich jetzt mal ein wenig über Ajax schlau gemacht und dabei ist mir aufgefallen das Ajax nur mittels javascript funktionieren soll ?

    Was aber wenn ein User Javascript bei sich deaktiviert hat, gibt es dann ne Möglichkeit das ganze trotzdem zu realisieren oder müsste man doch was anderes an stelle von Ajax benutzen ?
     
  14. Sempervivum

    Sempervivum Aktives Mitglied

    Registriert seit:
    18 Oktober 2016
    Beiträge:
    286
    Punkte für Erfolge:
    28
    Ja, Ajax funktioniert nur mit Javascript. Du hast aber sowieso schon Javascript bei deinem Next- und Previous-Button. Häufig wird folgende Strategie empfohlen: Alle Informationen sollten auch ohne Javascript vorhanden und lesbar sein. Für die Kommentare würde das bedeuten, dass man sie nicht mit Ajax nachlädt und auch nicht in Javascript in einem Array ablegt, sondern sie im HTML-Text in einem Container ablegt, der dem Bild zugeordnet ist.
    Javascript wird dann verwendet, um die Darstellung zu verbessern und die Bedienung komfortabler zu machen, z. B. die Anzeige von Bildern und Texten in einer Lightbox mit den Buttons für die Navigation. Einen Nachteil dabei sollte man nicht übersehen: Alle Informationen müssen gleich beim Laden der Seite herunter geladen werden, was die Ladezeit der Seite erhöht. Eine Lösung kann sein, die Informationen auf mehrere Seiten zu verteilen.
    Man kann Galerien auch ohne Javascript nur mit CSS realisieren, auch Lightboxes, aber der Code ist dann meistens unübersichtlich und schlecht lesbar.
     
  15. lokoroko

    lokoroko Mitglied

    Registriert seit:
    9 Mai 2017
    Beiträge:
    45
    Punkte für Erfolge:
    6
    Mmh okay ich verstehe. Gut ich versuche mich dann jetzt aber mal an AJAX. Der Code den du bereits oben geschrieben hattest, habe ich jetzt so oder so ähnlich bereits in paar Videos gesehen die ich mir zu dem Thema angeschaut habe. Wenn ich den Code mal an meine Dateien anpassen würde dann müsste das ganze so ausschauen:

    Code (text):
    1. $.ajax({
    2.         url: "Version2.php",
    3.         data: {imgurl: "$row['path']"},
    4.         type: "POST",
    5.         success: function(output) {
    6.             // Ausgabe von name.php steht unter dem Parameter output zur Verfügung
    7.             // in deinem Fall wären das die Kommentare
    8.         },
    9.         error: function( /* Parameter entspr Doku */ ) {
    10.         }
    11. });
    Dazu jetzt aber im allgemeinen ein paar Fragen :)

    Diese AJAX-Funktion schreibe ich in mein ganz normales PHP-Script in der meine Website erzeugt wird oder doch in die Javascript-Datei wodurch die Lightbox erzeugt wird ? Schon in das PHP-Script, richtig ?

    Dann zu "url: Version2.php". Wenn ich das richtig verstehe ist dass das Script das ich in Javascript ausgeben möchte ?

    Jetzt zu "data: {imgurl: "$row['path']"}". Wie du schon geschrieben hattest sind das die Parameter die an Version2.php übergeben werden sollen. Das bedeutet also die Bildpfade. Da ich mir die Bildpfade aus der Datenbank mithilfe dieses Codes hole:
    Code (text):
    1. $pdo = new PDO('mysql:host=localhost;dbname=Datenbank_NEU', 'root', 'fisch');
    2. $sql = "SELECT bildtabelle.path, adressen.nachname, adressen.vorname, adressen.profilbild, bildtabelle.timestamp FROM `bildtabelle`, `adressen` WHERE adressen.id = bildtabelle.user_id ORDER BY timestamp DESC ";
    3. foreach ($pdo->query($sql) as $row) {
    müsste "$row['path']" richtig sein oder ?

    Jetzt hattest du noch etwas zu success geschrieben was mir nicht ganz klar geworden ist. Die Ausgabe von Version2.php steht unter dem Parameter output zur Verfügung. Was bedeutet das bzw. output ?
    Du schreibst ja das es in meinem Fall die Kommentare wären aber wird durch output dann etwa das PHP-Script in url: ausgeführt, also Version2.php ?
     
  16. Sempervivum

    Sempervivum Aktives Mitglied

    Registriert seit:
    18 Oktober 2016
    Beiträge:
    286
    Punkte für Erfolge:
    28
    Nein, ich bin der Meinung, dass es in das Javascript gehört, das die Lightbox öffnet. Du willst ja in der Lightbox die Kommentare anzeigen und dazu müssen sie vom Server geholt werden.
    Das ist das PHP-Skript, das die Kommentare aus der Datenbank liest und und per echo ausgibt. Die vollständige Ausgabe ist dann im Parameter output des success-Callbacks verfügbar.
    • Ja, Du hast den Bildpfad schon im src-Attribut des Bildes.
    Code (text):
    1. <img class='bild' src='".$test.$row['path']."'>
    Im onclick-Handler für das Bild ist er dann unter this.src verfügbar und Du kannst ihn für den Ajax-Aufruf verwenden:
    Code (text):
    1.             $("img.bild").on("click", function () {
    2.                 idx = parseInt($(this).data("idx"));
    3.                 var imgurl = $(this).attr("src");
    4.                 $("#lightbox_overlay img").attr("src", imgurl);
    5. [LIST=1]
    6. $.ajax({
    7.         url: "Version2.php",
    8.         data: {imgurl: imgurl},
    9.         type: "POST",
    10.         success: function(output) {
    11.             // Ausgabe von name.php steht unter dem Parameter output zur Verfügung
    12.             // in deinem Fall wären das die Kommentare
    13.         },
    14.         error: function( /* Parameter entspr Doku */ ) {
    15.         }
    16. });
    17. [/LIST]
    18.             });
    Etwas irritierend, dass der Schlüssel in dem Objekt mit dem Parameter gleich dem Variablennamen ist, aber funktioniert.
    jQuery schickt eine Anfrage an den Server und übergibt als Parameter die URL des Bildes. Etwas später kommt die Antwort vom Server zurück und enthält die Ausgaben des Skriptes Version2.php. jQuery ruft dann die success-Callback-Funktion auf und übergibt ihr als Parameter die Ausgaben, die vom Server gekommen sind. In deinem Fall sind das die Kommentare. Du musst jetzt noch ein HTML-Element in deiner Lightbox aufnehmen, das die Kommentare aufnimmt und anzeigt. In dieses Element musst Du den Inhalt des Parameters output eintragen, durch innerHTML oder jQuery-html().
     
  17. lokoroko

    lokoroko Mitglied

    Registriert seit:
    9 Mai 2017
    Beiträge:
    45
    Punkte für Erfolge:
    6
    Okay ich glaube das ich das so langsam mehr und mehr verstehe. Ich hab den ganzen Code jetzt mal zusammengesetzt, sieht nun so aus:

    Code (text):
    1. $(document).ready(function() {
    2.  
    3. // Globale Variablen
    4.  
    5.     var ACTIVE_IMG;
    6.     var IMG_URL;
    7.  
    8.  
    9. // Create Lightbox
    10.  
    11. $('body').append('<div id="lightbox_overlay"><div id="textbox"><div id="lightbox_inhalt"><div id="val_nav"><i id="left" class="fa fa-chevron-left" aria-hidden="true" style="float: left"></i><i id="x" class="fa fa-times" aria-hidden="true"></i><i id="right" class="fa fa-chevron-right" aria-hidden="true" style="float: right"></i></div><img /></div></div></div>');
    12.  
    13.    
    14. // Open Lightbox
    15.  
    16. $('.gallery img'). stop().click(function(){
    17.  
    18.     IMG_URL = $(this).attr('src');
    19.  
    20.     $('#lightbox_overlay #lightbox_inhalt img').attr('src', IMG_URL);
    21.     $('#lightbox_overlay').fadeIn(500);
    22.  
    23.     ACTIVE_IMG = $(this);
    24. });
    25.  
    26. // Bild schließen
    27.  
    28.     $('#x').stop().click(function(){
    29.         $('#lightbox_overlay').fadeOut(500);
    30.     });
    31.  
    32. //Nächstes Bild (links und rechts)
    33.  
    34. (function () {
    35.             var idx = 0;
    36.             $("img.bild").on("click", function () {
    37.                 idx = parseInt($(this).data("idx"));
    38.                 var imgurl = $(this).attr("src");
    39.                 $("#lightbox_overlay img").attr("src", imgurl);
    40.          
    41.             $.ajax({
    42.         url: "Version2.php",
    43.         data: {imgurl: imgurl},
    44.         type: "POST",
    45.         success: function(output) {
    46.             // Ausgabe von Version2.php steht unter dem Parameter output zur Verfügung
    47.             // in deinem Fall wären das die Kommentare
    48.         },
    49.         error: function( /* Parameter entspr Doku */ ) {
    50.         }
    51. });
    52.          
    53.             });
    54.             $('#left').click(function () {
    55.                 prev_img();
    56.             });
    57.             function prev_img() {
    58.                 idx--;
    59.                 var newsrc = $("#img" + idx).attr("src");
    60.                 $('#lightbox_overlay #lightbox_inhalt img').attr('src', newsrc);
    61.             }
    62.             $('#right').click(function () {
    63.                 next_img();
    64.             });
    65.             function next_img() {
    66.                 idx++;
    67.                 var newsrc = $("#img" + idx).attr("src");
    68.                 $('#lightbox_overlay #lightbox_inhalt img').attr('src', newsrc);
    69.             }
    70.         })();
    71.  
    72. });
    73.  
    Du hattest in deinem Code ja das hier verwendet "LIST=1", doch irgendwie wollte das bei mir so nicht funktionieren weswegen ich das wieder rausgenommen hatte. Welche Funktion hat LIST=1 überhaupt und ist es absolut notwendig ?

    1. Dann zu dem html-Element das ich jetzt noch in die Lightbox aufnehmen muss. Ich bin mir jetzt nicht ganz so sicher wie man das jetzt genau macht. Ich hatte im ersten Moment an so eine Möglichkeit gedacht:

      Code (text):
      1. <html onclick="output"></html>
      doch leider funktioniert das so nicht weshalb ich mich frage wie genau du das meintest bzw. wie das html-Element die Kommentare aufnehmen soll. Außerdem bin ich mir nicht 100% sicher an welche Stelle ich das html-Element einfügen muss. Dieser Code in der Javascript-Datei erzeugt ja die Lightbox:

      Code (text):
      1. $('body').append('<div id="lightbox_overlay"><div id="textbox"><div id="lightbox_inhalt"><div id="val_nav"><i id="left" class="fa fa-chevron-left" aria-hidden="true" style="float: left"></i><i id="x" class="fa fa-times" aria-hidden="true"></i><i id="right" class="fa fa-chevron-right" aria-hidden="true" style="float: right"></i></div><img /></div></div></div>');
      Da ich die Kommentare rechts neben dem Bild ausgelesen bekommen möchte würde, es für mich am meisten Sinn machen wenn ich den <html>-Tag rechts neben den <img/>-Tag ansetzen würde (weitere dinge könnte ich dann ja über css vornehmen) ?

    Zudem hattest du ja auch geschrieben das ich das über innerHTML machen muss, doch dazu habe ich so etwas gefunden:

    Code (text):
    1. var content = output.innerHTML;
    ist es das was du meintest ?
     
    Zuletzt bearbeitet: 22 Juli 2017 um 19:30 Uhr
  18. Sempervivum

    Sempervivum Aktives Mitglied

    Registriert seit:
    18 Oktober 2016
    Beiträge:
    286
    Punkte für Erfolge:
    28
    Ups, das war nur eine kleine Panne beim Editieren des Postings. Das sind offenbar BB-Code-Tags, die unbeabsichtigt in den Code hinein geraten sind.

    Du musst in dem Code, der die Lightbox erzeugt, einen Container für die Kommentare hinzu fügen:
    Code (text):
    1. $('body').append('<div id="lightbox_overlay"><div id="textbox"><div id="lightbox_inhalt"><div id="val_nav"><i id="left" class="fa fa-chevron-left" aria-hidden="true" style="float: left"></i><i id="x" class="fa fa-times" aria-hidden="true"></i><i id="right" class="fa fa-chevron-right" aria-hidden="true" style="float: right"></i></div><img /><div id="comments"></div></div></div></div>');
    (nach dem img-Tag)
    Dann kannst Du die Ausgaben des PHP-Skriptes dort einfügen:
    Code (text):
    1. $("#comments").html(output);
     
    lokoroko gefällt das.
  19. lokoroko

    lokoroko Mitglied

    Registriert seit:
    9 Mai 2017
    Beiträge:
    45
    Punkte für Erfolge:
    6
    Also das ganze wird jetzt auf jeden Fall schon mal mit in der Lightbox ausgelesen. Das ganze wird man jetzt wahrscheinlich noch weiter anpassen müssen denn es treten aktuell noch folgende Probleme auf:

    1. Aktuell wird nur der erste Datensatz aus der Datenbank ausgelesen, also der erste Kommentar

    2. Dadurch das nur der eine und erste Kommentar in der Datenbank ausgelesen wird, ist es nicht möglich zu sehen welches Kommentar zu welchem Bild gehört

    3. Die Kommentare müssten sich von Bild zu Bild unterscheiden und es müssten auf jeden Fall alle Datensätze/Kommentare ausgelesen werden die zu einem Bild existieren

    Jetzt ist natürlich die Frage wie man dabei vorgeht. Version2.php also das Script das für die Kommentarfunktion zuständig ist funktioniert ja an sich schon. Nur in der Lightbox funktioniert es nicht so wie ich mir das vorstelle. Deswegen frage ich mich was das Problem ist.

    Zudem habe ich das Problem mit der Kommentar-Zuordnung sonst immer so gelöst, dass bei Klick auf ein Bild der Dateipfad in der Url übergeben wurde und ich so den Abgleich mit der Datenbank herstellen konnte. So wurden immer die Kommentare passend zu den Bildern ausgelesen. Jetzt stellt sich die aber Frage wie ich das Problem nun löse, denn über die URL kann ich jetzt wahrscheinlich nicht mehr arbeiten ?

    hier nochmal Version2.php (Kommentarfunktion):

    Code (text):
    1. <?php
    2. session_start();
    3. $userid = $_SESSION['userid'];
    4. $username = $_SESSION['username'];
    5. ?>
    6. <html>
    7. <boody>
    8. <?php
    9.    
    10.  $z= $_GET["delid"];
    11.    
    12.    
    13. try {
    14.     $db = new PDO('mysql:host=localhost;dbname=Datenbank_NEU', 'root', 'fisch123');
    15.     $sql = "SELECT kommentare.userid, kommentare.k_path, kommentare.eintrag, kommentare.autor, kommentare.datum, DATE_FORMAT(datum,'%d.%m.%Y um %H:%i') AS meindatum FROM `kommentare` WHERE kommentare.k_path = '$z'";
    16.    
    17.     $ergebnis = $db->query($sql);
    18.     foreach ($ergebnis as $zeile) {
    19.         printf("<p><a href=\"mailto:%s\">%s</a> schrieb am %s</p>
    20.           <h3>%s</h3><p>%s</p><hr noshade=\"noshade\" />",
    21.           urlencode($zeile['']), // da stand mal email
    22.           htmlspecialchars($zeile['autor']),
    23.           htmlspecialchars($zeile['meindatum']),
    24.           htmlspecialchars($zeile['']), // hier stand mal userid
    25.           nl2br(htmlspecialchars($zeile['eintrag']))
    26.           );
    27.     }
    28. } catch (PDOException $e) {
    29.   echo 'Fehler: ' . htmlspecialchars($e->getMessage());
    30. }
    31. ?>
    32.    
    33. <?php  
    34.     $y= $_GET["delid"];
    35.  
    36.    
    37.  if (isset($_SESSION['userid']) &&
    38.      isset($_SESSION['username']) &&
    39.      isset($_POST["Kommentar"]))  {
    40.    
    41.    
    42.      try {
    43.          $bobo = $_POST["Kommentar"];
    44.          $pdo = new PDO('mysql:host=localhost;dbname=Datenbank_NEU', 'root', 'fisch123');
    45.          $statement = $pdo->prepare("INSERT INTO kommentare (id, userid, k_path, eintrag, autor, datum) VALUES (NULL, '$userid', '$y', '$bobo', '$username', CURRENT_TIMESTAMP)");
    46.          $statement->execute();
    47.          echo "Eintrag hinzugef&uuml;gt";
    48.      }   catch (PDOException $e) {
    49.          echo 'Fehler: ' . htmlspecialchars($e->getMessage());
    50.      }
    51.  }  
    52. ?>
    53.    
    54. <form method="post">
    55. Kommentar
    56. <textarea cols="70" rows="10" name="Kommentar"></textarea><br/>
    57. <input type="submit" name="Submit" value="Eintragen">
    58. </form>
    59. </boody>
    60. </html>
    Im wesentlich habe ich also zwei Probleme:

    1. Wie kriege ich es hin das alle Datensätze/Kommentare die zu einem Bild existieren, ausgelesen werden ? (Wahrscheinlich muss man dann mit einem Scrollbalken usw. arbeiten)

    2. Wie kriege ich es hin das zu jedem Bild auch die passenden Kommentare ausgelesen werden ? (Die Methode die ich in Version2.php genutzt habe mit "delid" wird wohl nicht mehr funktionieren ?)
     
  20. Sempervivum

    Sempervivum Aktives Mitglied

    Registriert seit:
    18 Oktober 2016
    Beiträge:
    286
    Punkte für Erfolge:
    28
    Erst Mal eine grundsätzliche Frage: Arbeitest Du mit relativen oder absoluten Bildpfaden? D. h. wie sieht der Pfad aus, den Du hier aus der Datenbank ausliest:
    Code (text):
    1. $sql = "SELECT bildtabelle.path
    ? Poste ein Beispiel.
    Die Sache ist nämlich die, dass die Bildpfade natürlich übereinstimmen müssen, wenn Du die Kommentare aus der Datenbank ausliest. Im Moment verwenden wir dafür das src-Attribut. Problem ist, dass der Browser dieses zu einem absoluten Pfad ergänzt, der dadurch von dem Pfad abweichen kann, der in der Tabelle mit den Kommentaren gespeichert ist.
    Wie entsteht bildtabelle?