Hallo,
also ich versuche dann mal zu erklären was ich vorhabe :)
Hier kurz mal mein Code:
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):
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 ?
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 ?