• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

PHP Array von Javascript durchsuchen lassen

lokoroko

Mitglied
Hallo,

also ich versuche dann mal zu erklären was ich vorhabe :)

Hier kurz mal mein Code:

Code:
<?php   
 $test = "http://192.168.178.61/PHPversion/"; // mal gucken
    
$pdo = new PDO('mysql:host=localhost;dbname=Datenbank_NEU', 'root', 'fisch');
$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 "; 
foreach ($pdo->query($sql) as $row) {
    echo "<div id='rahmen'>
    
<img class='profilbild' src='".$test.$row['profilbild']."' alt='Bild'><p style='color: black; float: left; margin-left: 37px; position: absolute'>".$row['vorname']."</p><div class='dropdowntest'><i class='fa fa-ellipsis-h' aria-hidden='true' style='color: #6E6E6E; float: right; margin-left: 110px; cursor: pointer; margin-top: -10px; position: absolute'></i><div class='dropdowntestcontent'><a href='#' style='font-weight: normal'><p style='color: black'>Dieses Bild melden !</p></a></div></div>
<ul class='bildermenu2'>
<li>
<div class='gallery'>
<img class='bild' src='".$test.$row['path']."'>
</div>
<div class='aufnahme'>
<div class='effekt'></div>
<div class='aufnahmetext'>
    <i id='i' class='fa fa-star-half-o fa-2x' aria-hidden='true' style='float: left; margin-left: 100px;'></i>
    <i id='i' class='fa fa-comment fa-2x' aria-hidden='true' style='float: right; margin-right: 100px;'></i>
</div>
</div>
</li>
</ul>
</div>";
}
?>

Mithilfe von diesem Code werden auf meiner Website Bilder ausgelesen und angezeigt. Das ganze funktioniert auch wunderbar und ist hier eher weniger das Thema. Mir geht es im speziellen nämlich um diese drei Zeilen aus dem Code:

<div class='gallery'>
<img class='bild' src='".$test.$row['path']."'>
</div>

Ich habe ein Javascript-Code geschrieben mit dem ich so eine Art Lightbox erzeuge. In dieser Lightbox gibt es drei Icons:
-Eins zum schließen der Lightbox
-Einen linken Pfeil um auf das vorherige Bild zu gelangen
-Einen rechten Pfeil um auf das folgende Bild zu gelangen

Das schließen der Lightbox funktioniert. Nach rechts und links klicken hingegen nicht und ich habe die Vermutung das dass an den drei Zeilen liegt die ich oben schon genannt habe. Doch hier ist erstmal ein Teil meines Javascripts damit ihr versteht was ich meine (mit dem Teil soll man auf das folgende Bild gelangen):

Code:
...
//Nächstes Bild
    
    $('#right').stop().click(function() {
        next_img(ACTIVE_IMG);
    });
    
    function next_img(OBJEKT) {
        if($(OBJEKT).next().is('img')){
            console.log('ok');
            ACTIVE_IMG = $(OBJEKT).next();
            IMG_URL = $(OBJEKT).next('img').attr('src');
            $('#lightbox_overlay #lightbox_inhalt img').attr('src', IMG_URL);
        } else {
            console.log('Nicht ok');
            ACTIVE_IMG = $(OBJEKT).parent().children('img').first();
            IMG_URL = $(OBJEKT).parent().children('img').first().attr('src');
            $('#lightbox_overlay #lightbox_inhalt img').attr('src', IMG_URL);
        }
    }
...

Ich habe insgesamt eine Vermutung warum das ganze nicht funktioniert und zwar gibt es in diesem Code folgende Zeile:

if($(OBJEKT).next().is('img')){

Ich überprüfe also mit dieser Zeile ob das folgende Bild auch wirklich ein Bild ist. Schaut man sich jetzt die drei Zeilen von vorhin an dann ist eigentlich klar warum der rechte Pfeil nicht funktioniert. Es wird ja nur ein IMG-Tag ausgelesen somit ist für das Javascript auch kein folgendes Bild vorhanden...


Meine Frage jetzt ist folgende: In dem PHP-Code seht ihr ja das quasi alle Bilder aus einem Array Zeile für Zeile ausgelesen werden. Wie bekomme ich es nun hin das auch mein Javascript Code jedes Bild in diesem Array erkennt ?
 
Werbung:
Genau, also ich will ganz einfach wissen wie man so etwas realisiert um mich selbst weiterzubilden :) Zudem kann ich so die Lightbox zu 100% an meine eigenen Bedürfnisse und Wünsche anpassen und bin nicht an irgendwelche Muster gebunden. Und dann ist da auch noch der Reiz des selber machens :D
 
Das ist natürlich ein Grund. Da das PHP nicht Gegenstand des Problems ist, empfehle ich , das generierte HTML, u. U. gekürzt auf wenige Bilder, zu posten, damit man eine Testseite aufbauen kann.

Also der PHP Code befindet sich auf meiner Website einfach in einem Div-Element in den die Bilder ausgelesen werden. Damit will ich sagen das der PHP Code quasi alles ist was vorhanden ist :)
Edit: Beim oberflächlichen Lesen fällt mir dieses auf:
Code:
if($(OBJEKT).next().is('img')){
Wenn OBJECT ein img-Element ist, wirst Du das nächste mit next() wohl nicht finden, weil die img-Elemente in divs geschachtelt sind. Dies sollte funktionieren:
Code:
$(OBJEKT).parent().next().children('img');

Genau das habe ich mir auch gedacht ! Darf ich fragen was du genau mit der Verschachtelung in den Divs meinst ? Habe das ganze was du geschrieben hast natürlich auch mal kurz ausprobiert doch leider war das nicht von Erfolg gekrönt. Kann jetzt natürlich auch sein das ich einen Fehler dabei gemacht habe. Welche Zeilen des Javascript hätte ich denn alles verändern müssen ?

Also das Problem liegt offensichtlich daran das dass Javascript kein folgendes img Element finden kann und das liegt vor allen Dingen an diesen drei Zeilen:

<div class='gallery'>
<img class='bild' src='".$test.$row['path']."'>
</div>

Da nur ein img-Tag vorhanden ist.

Nun ist es ja so das in meinem PHP-Code eine foreach Schleife vorhanden ist die für jedes in der Datenbank vorhanden Bild eine Variable $row erzeugt. Klicke ich also nach rechts, klicke ich quasi eine neue $row an.

Das muss ich jetzt dem Javascript irgendwie klar machen. Doch leider weiß ich absolut nicht wie :/

Ich hoffe man kann mir folgen :)
 
Zuletzt bearbeitet:
Werbung:
Code:
$(OBJEKT).parent().nextAll(".gallery").eq(0).children('img');

Probiere mal, ob Du auf diese Weise weiter kommst.

Also ich habe mich jetzt mal mit deinem Code auseinander gesetzt und du hast auf jeden Fall recht. Habe jetzt auch verstanden warum das aufgrund der Verschachtelung nicht funktionieren konnte.

Naja habe das ganze jetzt auch ausprobiert und es scheint so als wenn wir jetzt auf jeden Fall auf dem richtigen Weg sind. Zumindest wird mir in der Konsole bereits durch den console.log "ok" ausgegeben...

Ich bin mir eigentlich fast sicher das ich noch was am Rest des Javascript-Codes verändern muss. Hab da auch jetzt auch schon so einiges ausprobiert nur leider reicht mein Javascript Wissen noch nicht aus um den Fehler zu finden :/

So sieht der Code jetzt aus:

Code:
$('#right').stop().click(function() {
        next_img(ACTIVE_IMG);
    });
    
    function next_img(OBJEKT) {
        if($(OBJEKT).parent().nextAll(".gallery").eq(0).children('img')){
            console.log('ok');
            ACTIVE_IMG = $(OBJEKT).next();
            IMG_URL = $(OBJEKT).next('img').attr('src');
            $('#lightbox_overlay #lightbox_inhalt img').attr('src', IMG_URL);
        } else {
            console.log('Nicht ok');
            ACTIVE_IMG = $(OBJEKT).parent().children('img').first();
            IMG_URL = $(OBJEKT).parent().children('img').first().attr('src');
            $('#lightbox_overlay #lightbox_inhalt img').attr('src', IMG_URL);
        }
    }

Wie gesagt in der Konsole wird durch den console.log bereits "ok" ausgegeben. Vermutlich muss noch was an ACTIVE_IMG und IMG_URL gemacht werden oder ?

Und dann hätte ich da noch eine Frage aus Interesse:

was genau bewirkt eq(0) ?
die Anzahl an ausgegeben Elementen ?

Habe im Internet zwar auf mehreren Seiten was gelesen aber richtig eindeutig ist mir die Funktion nicht :)
 
ich versuche gerade, eine Testseite anzulegen und die Generierung des HTML kommt mir komisch vor: Du legst da in jedem Schleifendurchlauf ein ul-Element mit nur einem li darin an. Ist das wirklich deine Absicht? Ich würde erwarten, dass es ein ul-Element gibt mit mehreren li-s und den Bildern sowie ggf. Zusatzinfos darin. So wie es jetzt ist, kann es auch nicht funktionieren, weil man dann mit parent() mehrere Stufen in der Hierarchie hoch und mit find() wieder herunter gehen müsste, um zum nächsten img zu gelangen.


Genau, also mit jedem Schleifendurchlauf wird ein ul-element usw. angelegt weil pro Bild so eine Art Maske erzeugt wird die wie ein Hover Effekt funktioniert. Fährt man mit der Maus über ein Bild, kommt vom unteren Bildrand so eine Art "Seitenmenü" zum Vorschein...

Hatte mir um ehrlich zu sein bisher keine Gedanken darüber gemacht und war mir nicht im klaren das dass ein solches Problem darstellt. Jetzt ist natürlich die Frage wie man an das Problem heran geht. Was würdest du mir empfehlen ?

Soll ich das ul_element und die li-s fürs erste rausnehmen? Oder hättest du eventuell sogar noch ne Idee was man machen könnte ?

Ich denke meinen gewünschten Hover-Effekt kann ich nämlich auch anders erzeugen :)
 
Code:
        var idx = 0;
        $('#right').click(next_img);
        function next_img() {
            idx++;
            var newsrc = $("#bild" + idx).attr("src");
            $('#lightbox_overlay #lightbox_inhalt img').attr('src', newsrc);
        }

Mmh also ich verstehe das dass ganze an der Stelle zu kompliziert werden würde. Doch ich versuche jetzt deinen Code zu verstehen...

Verstehe Ich richtig das wir quasi bei einem Klick nach rechts die Bilder hochzählen, in dem wir ihnen eine ID zuweisen ? Wenn ja dann verstehe ich nicht ganz woher das Script dann aber wissen soll welches Bild gerade als aktives Bild angezeigt wird und welches bei klick nach rechts die Rolle des Aktiven Bildes übernimmt?

Also ich habe deinen Code jetzt auch mal bei mir eingesetzt doch leider funktioniert es immer noch nicht.

PS: #bild sollte glaube ich .bild sein oder ?

Ach und was meintest du damit das ich das ganze relativ einfach dann mit PHP generieren kann ? Meinst du das ich beim auslesen der Bilder eine ID anhänge ?
 
Zuletzt bearbeitet:
Werbung:
Ich habe mich für eine ID entschieden, Du kannst aber auch eine Klasse verwenden. Nur HTML und jQuery muss übereinstimmen. Diese IDs müssen von vorn herein im HTML fest gelegt sein, d. h. Du musst sie mit deinem PHP generieren.

Ich soll für jedes Bild immer eine neue ID generieren ? Und hier das ist meine Lightbox :)

Code:
$('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>');


Also ich muss leider sagen das ich das Prinzip insgesamt nicht ganz nachvollziehen kann. Ich habe wirklich versucht das ganze zusammen zu setzen und zu verstehen aber es will einfach nicht klappen :/

Ich habe da aber nochmal über etwas nachgedacht. Und zwar über das was du hier geschrieben hattest...
ich versuche gerade, eine Testseite anzulegen und die Generierung des HTML kommt mir komisch vor: Du legst da in jedem Schleifendurchlauf ein ul-Element mit nur einem li darin an. Ist das wirklich deine Absicht? Ich würde erwarten, dass es ein ul-Element gibt mit mehreren li-s und den Bildern sowie ggf. Zusatzinfos darin. So wie es jetzt ist, kann es auch nicht funktionieren, weil man dann mit parent() mehrere Stufen in der Hierarchie hoch und mit find() wieder herunter gehen müsste, um zum nächsten img zu gelangen.

Wenn ich das richtig verstanden habe dann lag das Problem vor allem an dem ul- und li-Element das wir in der Hierarchie ein ständiges auf und ab haben.

Was wäre es wenn der Code wie folgt aussehen würde:
Code:
<?php   
 $test = "http://192.168.178.61/PHPversion/"; // mal gucken
    
$pdo = new PDO('mysql:host=localhost;dbname=Datenbank_NEU', 'root', 'lehar456');
$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 "; 
foreach ($pdo->query($sql) as $row) {
    echo "<div id='rahmen'>
    
<img class='profilbild' src='".$test.$row['profilbild']."' alt='Bild'><p style='color: black; float: left; margin-left: 37px; position: absolute'>".$row['vorname']."</p><div class='dropdowntest'><i class='fa fa-ellipsis-h' aria-hidden='true' style='color: #6E6E6E; float: right; margin-left: 110px; cursor: pointer; margin-top: -10px; position: absolute'></i><div class='dropdowntestcontent'><a href='#' style='font-weight: normal'><p style='color: black'>Dieses Bild melden !</p></a></div></div>
<div class='gallery'>
<img class='bild' src='".$test.$row['path']."'>
</div>
</div>";
}
?>

Wäre das Hierarchie-Verhältnis dann nicht eindeutiger ?
 
Also ich habe das ganze jetzt mal ausprobiert und versucht zu verstehen. Macht so jetzt auf jeden Fall Sinn und funktioniert auch aber ein Problem gibt es da trotzdem noch...

Explizit meine ich diese Zeilen
Code:
    <div class='rahmen'>
        <img class='profilbild' src='".$test.$row[' profilbild']."' alt='Bild'><p style='color: black; float: left; margin-left: 37px; position: absolute'>".$row['vorname']."</p><div class='dropdowntest'><i class='fa fa-ellipsis-h' aria-hidden='true' style='color: #6E6E6E; float: right; margin-left: 110px; cursor: pointer; margin-top: -10px; position: absolute'></i><div class='dropdowntestcontent'><a href='#' style='font-weight: normal'><p style='color: black'>Dieses Bild melden !</p></a></div></div>
        <div class='gallery'>
            <img class='bild' data-idx="0" id="img0" src='images/dia0.jpg'>
        </div>
    </div>
    <div class='rahmen'>
        <img class='profilbild' src='".$test.$row[' profilbild']."' alt='Bild'><p style='color: black; float: left; margin-left: 37px; position: absolute'>".$row['vorname']."</p><div class='dropdowntest'><i class='fa fa-ellipsis-h' aria-hidden='true' style='color: #6E6E6E; float: right; margin-left: 110px; cursor: pointer; margin-top: -10px; position: absolute'></i><div class='dropdowntestcontent'><a href='#' style='font-weight: normal'><p style='color: black'>Dieses Bild melden !</p></a></div></div>
        <div class='gallery'>
            <img class='bild' data-idx="0" id="img1" src='images/dia1.jpg'>
        </div>
    </div>
    <div class='rahmen'>
        <img class='profilbild' src='".$test.$row[' profilbild']."' alt='Bild'><p style='color: black; float: left; margin-left: 37px; position: absolute'>".$row['vorname']."</p><div class='dropdowntest'><i class='fa fa-ellipsis-h' aria-hidden='true' style='color: #6E6E6E; float: right; margin-left: 110px; cursor: pointer; margin-top: -10px; position: absolute'></i><div class='dropdowntestcontent'><a href='#' style='font-weight: normal'><p style='color: black'>Dieses Bild melden !</p></a></div></div>
        <div class='gallery'>
            <img class='bild' data-idx="0" id="img2" src='images/dia2.jpg'>
        </div>
    </div>
    <button id="right">Nach rechts</button>


Die Bilder die in der Lightbox zu sehen sein sollen werden ja aus meiner Datenbank ausgelesen und über die foreach-Schleife ausgegeben. In dem Code aber erstellen wir drei div-Boxen die jeweils ein bestimmtes Bild mit einem bestimmten Dateipfad ausgeben.

Da es ja unendlich viele Bilder in der Datenbank geben kann, macht das System so ja nicht ganz Sinn da es nicht flexibel genug ist :/

Ich hoffe du verstehst was ich meine ? Es müsste eine Möglichkeit geben, alle Bilder die aus der Datenbank ausgelesen werden über dieses System auszugeben ohne das dafür vorher manuell mehr als ein Div-Element ('rahmen') erstellt wird


Aber an dieser Stelle wirklich schon mal vielen Dank für die Demo und die Zeit die du dir nimmst um mir bei meinem Problem zu helfen, bringt mich wirklich weiter ! :D
 
Wow also super das funktioniert wirklich einwandfrei, Vielen Dank schon mal bis hier her :D

Doch ich möchte bei der ganzen Sache ja auch was lernen und habe deswegen noch ein paar fragen, zudem muss ich das ganze natürlich noch für den linken Button realisieren :)

Jetzt ist das hier ja unser Javascript-Code:
Code:
(function () {
            var idx = 0;
            $("img.bild").on("click", function () {
                idx = parseInt($(this).data("idx"));
                var imgurl = $(this).attr("src");
                $("#lightbox_overlay img").attr("src", imgurl);
            });
 
            $('#right').click(function () {
                next_img();
            });
            function next_img() {
                idx++;
                var newsrc = $("#img" + idx).attr("src");
                $('#lightbox_overlay #lightbox_inhalt img').attr('src', newsrc);
            }
        })();

Und zwar frage ich mich ob ich diese Zeile idx = parseInt($(this).data("idx")); richtig verstehe.
Mit der parseInt-Methode lese ich den String dadrüber ein und kriege dafür eine Zahl aus dem angegeben Zahlensystem zurück. Diese Zahl gebe ich dann mit dem data-Attribut weiter. Und somit wird quasi für jedes Bild durch das hoch zählen, für die Variable idx eine neue Zahl ermittelt ?

Was genau ist $(this) ? Das aktuelle Bild ?


Ich frage deswegen nach diesen Sachen da ich wie gesagt noch die Funktion für den linken Button schreiben möchte. Grundsätzlich muss an dem Code für den rechten Button wahrscheinlich gar nicht mal mehr so viel für die linke Seite verändert werden. Folgende Fragen stellen sich mir dabei:

Wenn ich ein Bild aufrufe und nach rechts klicke, dann wird die Variable idx ja hochgezählt. Das aktuelle Bild hat dabei die Zahl 0, das folgende dann vermutlich die 1....Geht das hoch zählen dann immer so weiter oder wird sobald ich auf dem nächsten Bild bin, dass aktive Bild zu einer 0 ?

Im Bezug auf den linken Button ist das für mich dann nämlich interessant weil ich bei einem klick nach links ja runter zählen müsste ?
 
Werbung:
Also ich habe jetzt mal auf der Basis des ersten Codes einen Code für den linken Button geschrieben bzw. umgeschrieben.

Code:
(function () {
            var idx = 0;
            $("img.bild").on("click", function () {
                idx = parseInt($(this).data("idx"));
                var imgurl = $(this).attr("src");
                $("#lightbox_overlay img").attr("src", imgurl);
            });
 
            $('#left').click(function () {
                prv_img();
            });
            function prv_img() {
                idx--;
                var newsrc = $("#img" + idx).attr("src");
                $('#lightbox_overlay #lightbox_inhalt img').attr('src', newsrc);
            }
        })();

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 ?
 
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 ! :)
 
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 :)
 
Werbung:
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:
<?php
session_start();
$userid = $_SESSION['userid'];
$username = $_SESSION['username'];
?>
<html>
<boody> 
<?php
    
 $z= $_GET["delid"];
    
    
try {
    $db = new PDO('mysql:host=localhost;dbname=Datenbank_NEU', 'root', 'lehar456');
    $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'";
    
    $ergebnis = $db->query($sql);
    foreach ($ergebnis as $zeile) {
        printf("<p><a href=\"mailto:%s\">%s</a> schrieb am %s</p>
          <h3>%s</h3><p>%s</p><hr noshade=\"noshade\" />",
          urlencode($zeile['']), // da stand mal email
          htmlspecialchars($zeile['autor']),
          htmlspecialchars($zeile['meindatum']),
          htmlspecialchars($zeile['']), // hier stand mal userid
          nl2br(htmlspecialchars($zeile['eintrag']))
          );
    }
} catch (PDOException $e) {
  echo 'Fehler: ' . htmlspecialchars($e->getMessage());
}
?> 
    
<?php   
    $y= $_GET["delid"];
 
    
 if (isset($_SESSION['userid']) &&
     isset($_SESSION['username']) &&
     isset($_POST["Kommentar"]))  {
    
    
     try {
         $bobo = $_POST["Kommentar"];
         $pdo = new PDO('mysql:host=localhost;dbname=Datenbank_NEU', 'root', 'lehar456');
         $statement = $pdo->prepare("INSERT INTO kommentare (id, userid, k_path, eintrag, autor, datum) VALUES (NULL, '$userid', '$y', '$bobo', '$username', CURRENT_TIMESTAMP)");
         $statement->execute();
         echo "Eintrag hinzugef&uuml;gt";
     }   catch (PDOException $e) {
         echo 'Fehler: ' . htmlspecialchars($e->getMessage());
     }
 }   
?>
    
<form method="post">
Kommentar
<textarea cols="70" rows="10" name="Kommentar"></textarea><br/>
<input type="submit" name="Submit" value="Eintragen">
</form>
</boody>
</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...
 
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 ?
 
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 ?
 
Werbung:
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 ?
 
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:
$.ajax({
        url: "Version2.php",
        data: {imgurl: "$row['path']"},
        type: "POST",
        success: function(output) {
            // Ausgabe von name.php steht unter dem Parameter output zur Verfügung
            // in deinem Fall wären das die Kommentare
        },
        error: function( /* Parameter entspr Doku */ ) {
        }
});

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:
$pdo = new PDO('mysql:host=localhost;dbname=Datenbank_NEU', 'root', 'fisch');
$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 ";
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 ?
 
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:
$(document).ready(function() {

// Globale Variablen
 
    var ACTIVE_IMG;
    var IMG_URL;
 
 
// Create Lightbox
 
$('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>');

   
// Open Lightbox
 
$('.gallery img'). stop().click(function(){
 
    IMG_URL = $(this).attr('src');
 
    $('#lightbox_overlay #lightbox_inhalt img').attr('src', IMG_URL);
    $('#lightbox_overlay').fadeIn(500);
 
    ACTIVE_IMG = $(this);
});
 
// Bild schließen
 
    $('#x').stop().click(function(){
        $('#lightbox_overlay').fadeOut(500);
    });
 
//Nächstes Bild (links und rechts)
 
(function () {
            var idx = 0;
            $("img.bild").on("click", function () {
                idx = parseInt($(this).data("idx"));
                var imgurl = $(this).attr("src");
                $("#lightbox_overlay img").attr("src", imgurl);
         
            $.ajax({
        url: "Version2.php",
        data: {imgurl: imgurl},
        type: "POST",
        success: function(output) {
            // Ausgabe von Version2.php steht unter dem Parameter output zur Verfügung
            // in deinem Fall wären das die Kommentare
        },
        error: function( /* Parameter entspr Doku */ ) {
        }
});
         
            });
            $('#left').click(function () {
                prev_img();
            });
            function prev_img() {
                idx--;
                var newsrc = $("#img" + idx).attr("src");
                $('#lightbox_overlay #lightbox_inhalt img').attr('src', newsrc);
            }
            $('#right').click(function () {
                next_img();
            });
            function next_img() {
                idx++;
                var newsrc = $("#img" + idx).attr("src");
                $('#lightbox_overlay #lightbox_inhalt img').attr('src', newsrc);
            }
        })();
 
});

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:
    <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:
    $('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:
var content = output.innerHTML;

ist es das was du meintest ?
 
Zuletzt bearbeitet:
Werbung:
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:
<?php
session_start();
$userid = $_SESSION['userid'];
$username = $_SESSION['username'];
?>
<html>
<boody>
<?php
   
 $z= $_GET["delid"];
   
   
try {
    $db = new PDO('mysql:host=localhost;dbname=Datenbank_NEU', 'root', 'fisch123');
    $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'";
   
    $ergebnis = $db->query($sql);
    foreach ($ergebnis as $zeile) {
        printf("<p><a href=\"mailto:%s\">%s</a> schrieb am %s</p>
          <h3>%s</h3><p>%s</p><hr noshade=\"noshade\" />",
          urlencode($zeile['']), // da stand mal email
          htmlspecialchars($zeile['autor']),
          htmlspecialchars($zeile['meindatum']),
          htmlspecialchars($zeile['']), // hier stand mal userid
          nl2br(htmlspecialchars($zeile['eintrag']))
          );
    }
} catch (PDOException $e) {
  echo 'Fehler: ' . htmlspecialchars($e->getMessage());
}
?>
   
<?php  
    $y= $_GET["delid"];
 
   
 if (isset($_SESSION['userid']) &&
     isset($_SESSION['username']) &&
     isset($_POST["Kommentar"]))  {
   
   
     try {
         $bobo = $_POST["Kommentar"];
         $pdo = new PDO('mysql:host=localhost;dbname=Datenbank_NEU', 'root', 'fisch123');
         $statement = $pdo->prepare("INSERT INTO kommentare (id, userid, k_path, eintrag, autor, datum) VALUES (NULL, '$userid', '$y', '$bobo', '$username', CURRENT_TIMESTAMP)");
         $statement->execute();
         echo "Eintrag hinzugef&uuml;gt";
     }   catch (PDOException $e) {
         echo 'Fehler: ' . htmlspecialchars($e->getMessage());
     }
 }  
?>
   
<form method="post">
Kommentar
<textarea cols="70" rows="10" name="Kommentar"></textarea><br/>
<input type="submit" name="Submit" value="Eintragen">
</form>
</boody>
</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 ?)
 
Ich würde behaupten das es sich dabei um relative Bildpfade handelt. In der Datenbank stehen die Pfade wie folgt drin:

upload/bild_dateiuser29.jpg

Mmh okay also ich verstehe das Problem. Die Lösung wäre also das ich den absoluten Bildpfad in die Datenbank eintragen lasse ?

Nun ja "bildtabelle" ist eine Tabelle in meiner Datenbank in die ich Daten wie die id, Bildpfade und user eintrage. Also die Art und Weise wie ich die Bildpfade in "bildtabelle" eintrage kann ich auf jeden Fall verändern. Oder was meinst du mit der Frage wie bildtabelle entsteht ?
 
Zurück
Oben