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

Javascript triggert doppelt

lokoroko

Mitglied
Hallo,

folgendes Problem habe ich aktuell. Auf meiner Hauptseite befindet sich ein Ajax-Code der Bilder beim scrollen nachlädt und eine PHP-Datei aufruft (loaddata_popular.php).

Innerhalb der loaddata_popular.php Datei, binde ich direkt am Anfang eine Javascript-Datei (lightboxtest2.js)ein. Das Problem ist jetzt das sobald die erste Salve an Bilder nachgeladen wird, die Javascript-Datei erneut aufgerufen wird und es somit zu Fehlfunktionen auf der Website kommt. Ich habe auch bereits probiert die Javascript-Datei auf der Hauptseite mit einzubinden, doch da ist sie leider ohne Funktion da sie den Inhalt der loaddata_popular.php Datei benötigt.
Hier aber noch mal beide Codes:

Ajax auf der Hauptseite:
Code:
<script>
     $(document).ready(function()
  {
    var start = 0;
        var count = 12;
        function morepic() {
            console.log(start, count);
            var params = {
                start: start,
                count: count
            };
            $.ajax({
                url: "loaddata_popular.php",
                type: "POST",
                data: params,
                success: function (output) {
                    console.log(output);
                    var newpictures = $("<div>" + output + "</div>");
                    start += count;
                  
                    if (newpictures.find("span.end").length != 0) {
                        $('div#loader').empty();
                    }
                 $("#servicetext").append(newpictures); 
                }
            });
        }
    $(window).scroll(function()
    {
      if($(window).scrollTop() == $(document).height() - $(window).height())
      {
        morepic();
      }
    });
         morepic();
        });
</script>

loaddata_popular.php:

Code:
<script src="lightboxtest2.js"></script>
<?php 
 $test = "http://192.168.178.61/PHPversion/"; // mal gucken
$idx = 0; 
  
$start = $_POST["start"];
$count = $_POST["count"];
$count2 = $count;
 
try {
$pdo = new PDO('mysql:host=localhost;dbname=Datenbank_NEU', 'root', 'lehar456');
$sql = "SELECT bildtabelle.path, adressen.benutzername, adressen.vorname, adressen.profilbild, bildtabelle.timestamp, adressen.id FROM `bildtabelle`, `adressen` WHERE adressen.id = bildtabelle.user_id ORDER BY timestamp DESC LIMIT $start, $count2";
 $ergebnis = $pdo->query($sql);
    $countread = 0;
foreach ($ergebnis as $row) {
    echo "<div class='rahmen'>
        <img class='profilbild' src='".$test.$row['profilbild']."' alt='Bild'><a href=User_Seite.php?user=".$row['id']." style:'font-weight: normal; data-user='".$row['id']."''><p style='color: black; float: left; margin-left: 37px; position: absolute; font-weight: normal'>".$row['benutzername']."</p></a><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' data-idx='".$idx."' id='img".$idx."' src='".$test.$row['path']."' data-relurl='".$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>";
     $idx++;
        $countread++;
} 
if ($countread < $count2) {
        echo '<span class="end"></span>';
    }
} catch (PDOException $e) {
  echo 'Fehler: ' . htmlspecialchars($e->getMessage());
}
?>

Würde mich freuen wenn jemand einen Tipp hätte wie ich die Javascript-Datei besser einbinde
 
Werbung:
Es würde die Sache erleichtern, wenn man es sich in Aktion ansehen könnte. Dann hat man zwar keinen Einblick in das PHP, aber dieses Problem scheint ja das Javascript zu betreffen. Hast Du es online?
ne leider nicht :/ Aber du musst dir das wie folgt vorstellen. Sobald ich meine Hauptseite öffne fängt Ajax an zu arbeiten und lädt den Inhalt von loaddata_popular.php. Dabei wird dann das in loaddata_popular.php enthaltene Javascript das erste mal aufgerufen.

Durch den Scrollvorgang kommt es aber irgendwann dazu das loaddata_popular irgendwann erneut aufgerufen wird und somit das Javascript auch. Dadurch das dass Javascript dann in Summe zweimal aufgerufen wurde kommt es zu einer fehlerhaften darstellung der Kommentare in der Lightbox...

An sich müsste ich nur einen weg finden das Javascript in loaddata_popular.php an einer Stelle aufzurufen an der es nur einmal aufgerufen wird und dann konstant wirkt. Nur wie gesagt auf der Hauptseite habe ich es schon probiert doch da hatte das ganze leider keine Reaktion gezeigt :/

Davon spreche ich...
Code:
<script src="lightboxtest2.js"></script>
 
Achso tut mir leid :D

Hier lightboxtest2.js:

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  id="bigpic" /><div id="comments"></div></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;
    function comment(relurl) {
        $.ajax({
            url: "Kommentar_auslesen.php",
            data: {imgurl: relurl},
            type: "POST",
            success: function(output) {
                console.log("Success output = " + output); // kann später auch raus
                $("#comments").html(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 */ ) {}
        })
    }
    $("img.bild").on("click", function() {
        idx = parseInt($(this).data("idx"));
        var relurl = $(this).data("relurl");
        $("#lightbox_overlay img").attr("src", relurl);
        console.log(relurl); //später wieder rausnehmen
        comment(relurl);
 
    });
            $('#left').click(function () {
                prev_img();
            });
            function prev_img() {
                var nrimg = $(".gallery").length;
                if (idx > 0) idx--;
                else idx = nrimg - 1;
                var newsrc = $("#img" + idx).attr("src");
                $('#lightbox_overlay #lightbox_inhalt img#bigpic').attr('src', newsrc);
                var relurl = $("#img" + idx).data("relurl");
                comment(relurl);
            }
            $('#right').click(function () {
                next_img();
            });
            function next_img() {
                var nrimg = $(".gallery").length;
                if (idx < nrimg - 1) idx++;
                else idx = 0;
                var newsrc = $("#img" + idx).attr("src");
                $('#lightbox_overlay #lightbox_inhalt img#bigpic').attr('src', newsrc);
                var relurl = $("#img" + idx).data("relurl");
                comment(relurl);
            }
        })();   
    
});

glaube aber nicht das der Code an sich der Knackpunkt ist oder ?
 
Werbung:
Okay also nur um Missverständnisse aus dem Weg zu räumen. Wir sprechen jetzt von lightboxtest2.js richtig ?

Das Erzeugen des Overlay heraus nehmen und nur einmal beim ersten Laden der Seite ausführen.

Okay aber wie genau stellst du dir das vor ? Ich glaube das ich gerade einen Denkfehler habe bzw. kann mir nicht direkt vorstellen an welche Stelle ich es dann erzeuge :/

Den Rest probiere ich dann mal aus :)
 
Okay ich verstehe. Ich habe das dann auf meiner Hauptseite mal gemacht doch leider will das so nicht ...
Code:
</body>
<script>
...
function() {
$('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  id="bigpic" /><div id="comments"></div></div></div></div>');
}
</script>
</html>

oder meinst du es anders ?
 
Stimmt das ist mir entgangen haha
So funktioniert es jetzt:

Code:
<script>
function 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  id="bigpic" /><div id="comments"></div></div></div></div>');
}
lightbox();
</script>
</body>
</html>

Das heißt jetzt gehen wir wieder in lightbox2.js und prüfen ob die Eventlistener bereits registriert wurden richtig ?
 
Werbung:
du meinst jetzt mit in den Code aus #11 ? Wird das nicht wegen relurl schwierig oder macht das nichts ?

Probiere das ganze aber aus :)
 
Meinst Du dieses?
Code:
var relurl = $("#img" + idx).data("relurl");
Da erwarte ich keine Probleme, da relurl ja aus dem data-Attribut des Bildes geholt wird.

Ja genau. Habe das jetzt mal eben probiert aber wenn ich das so mache wie ich denke du es auch meinst dann öffnet sich zwar die Lightbox aber es funktionieren weder die prev und next Buttons noch werden die Kommentare angezeigt.

Würde dann so aussehen:

Code:
<script>
function 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  id="bigpic" /><div id="comments"></div></div></div></div>');
}
lightbox();
    

  $('#x').stop().click(function(){
        $('#lightbox_overlay').fadeOut(500);
    });
    
    
 $("img.bild").on("click", function() {
        idx = parseInt($(this).data("idx"));
        var relurl = $(this).data("relurl");
        $("#lightbox_overlay img").attr("src", relurl);
        console.log(relurl); //später wieder rausnehmen
        comment(relurl);
 
    });
            $('#left').click(function () {
                prev_img();
            });
            function prev_img() {
                var nrimg = $(".gallery").length;
                if (idx > 0) idx--;
                else idx = nrimg - 1;
                var newsrc = $("#img" + idx).attr("src");
                $('#lightbox_overlay #lightbox_inhalt img#bigpic').attr('src', newsrc);
                var relurl = $("#img" + idx).data("relurl");
                comment(relurl);
            }
            $('#right').click(function () {
                next_img();
            });
            function next_img() {
                var nrimg = $(".gallery").length;
                if (idx < nrimg - 1) idx++;
                else idx = 0;
                var newsrc = $("#img" + idx).attr("src");
                $('#lightbox_overlay #lightbox_inhalt img#bigpic').attr('src', newsrc);
                var relurl = $("#img" + idx).data("relurl");
                comment(relurl);
            }
</script>
</body>
</html>
 
Ich habe vom Debugger schon gelesen aber noch nicht richtig angewendet. Ich schaue mal was sich alles so in der Console abspielt und werde alles überprüfen. Aber mir ist da noch etwas aufgefallen was ich nicht richtig einschätzen kann und zwar folgendes...

Grundsätzlich wird ja direkt zu Beginn auf der Hauptseite, loaddata_popular.php ausgelesen. Dabei werden die ersten 12 Bilder ausgelesen. Bei jedem Scrolll-Vorgang werden die nächsten 12 Bilder ausgelesen. Ich versuche das mal an einem Beispiel zu erklären was jetzt passiert.

Erste Salve an Bildern (12 Bilder):
Bild 1, Bild 2, Bild3, Bild 4, ..., Bild 12

SCROLLEN

Zweite Salve an Bildern (12 Bilder):
Bild 1, Bild 2, Bild3, Bild 4, ..., Bild 12

Klicke ich nun, sagen wir auf auf Bild 5 der zweiten Salve um es mir in der Lightbox anzuschauen und klicke dann einen nach rechts. Dann wird mir Bild 6 der ersten Salve angezeigt obwohl mir das der zweiten Salve angezeigt werden müsste. Dadurch kommt es dann dazu das die Kommentare nicht mehr zu den Bildern passen . Es scheint irgendwas mit dem zählen der Bilder nicht zu funktionieren.

Aber wie gesagt ich kann dieses Problem nicht wirklich einordnen. Ich weiß nicht ob das Problem jetzt wirklich daran liegt das ich lightboxtext2.js falsch einbeziehe oder etwas mit Ajax nicht stimmt. Denn beim scrollen habe ich zusätzlich auch noch das Problem das dann wieder die Kommentare bei den Bildern doppelt ausgelesen werden was eigentlich nur daran liegen kann das bei jedem Scroll-Vorgang, lightboxtest2.js immer wieder aufgerufen wird...

Nun ja dachte es wäre vielleicht ein nicht ganz unwichtiger Hinweis. Werde jetzt aber erstmal wie gehabt weitermachen und kontrollieren was sich in der Konsole usw. tut

EDIT: Wenn ich Bild 12 der ersten Salve anklicke und einen nach rechts klicke obwohl die zweite Salve bereits geladen wurde dann funktioniert das nicht. Bei Bild 12 ist also Ende und er erkennt die zweite Salve nicht....
 
Zuletzt bearbeitet:
Werbung:
Also ich habe dann jetzt aber mal weiter getestet und mir dabei die Console usw. genauer angeschaut.

Der Code aus #15 der sich auf der Hauptseite im Body Bereich befindet funktionierte ja nicht bzw. der prev und next Button. Da kommt eine Meldung in der Console das die Variable idx nicht gefunden werden kann. Aber wie gesagt nur für die Bilder bei prev und next...

Ich habe dann mal weiter probiert und geschaut was man machen könnte. Hab dann folgendes mal probiert. Wir befinden uns immer noch auf der Hauptseite am Ende des Body-Tags ...

Code:
<script>
function 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  id="bigpic" /><div id="comments"></div></div></div></div>');
}
lightbox();
 
 
  $('#x').stop().click(function(){
        $('#lightbox_overlay').fadeOut(500);
    });
                 
 
    (function() {
    var idx = 0;
    function comment(relurl) {
        $.ajax({
            url: "Kommentar_auslesen.php",
            data: {imgurl: relurl},
            type: "POST",
            success: function(output) {
                console.log("Success output = " + output); // kann später auch raus
                $("#comments").html(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 */ ) {}
        })
    }
    $("img.bild").on("click", function() {
        idx = parseInt($(this).data("idx"));
        var relurl = $(this).data("relurl");
        $("#lightbox_overlay img").attr("src", relurl);
        console.log(relurl); //später wieder rausnehmen
        comment(relurl);
 
    });
         
         
   
   
            $('#left').click(function () {
                prev_img();
            });
            function prev_img() {
                var nrimg = $(".gallery").length;
                if (idx > 0) idx--;
                else idx = nrimg - 1;
                var newsrc = $("#img" + idx).attr("src");
                $('#lightbox_overlay #lightbox_inhalt img#bigpic').attr('src', newsrc);
                var relurl = $("#img" + idx).data("relurl");
                comment(relurl);
            }
            $('#right').click(function () {
                next_img();
            });
            function next_img() {
                var nrimg = $(".gallery").length;
                if (idx < nrimg - 1) idx++;
                else idx = 0;
                var newsrc = $("#img" + idx).attr("src");
                $('#lightbox_overlay #lightbox_inhalt img#bigpic').attr('src', newsrc);
                var relurl = $("#img" + idx).data("relurl");
                comment(relurl);
            }
        })();
</script>

So funktionieren die Buttons auf jeden Fall wieder aber das ganze ist in gewissermaßen doppelt gemoppelt. Zum Vergleich wie lightboxtest2.js zum jetzigen Zeitpunkt aussieht:

Code:
$(document).ready(function() {

// Globale Variablen
   
    var ACTIVE_IMG;
    var IMG_URL;
   
 
// Create Lightbox
   

 
// 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
   
 
   
//Nächstes Bild (links und rechts)
   

   
(function() {
    var idx = 0;
    function comment(relurl) {
        $.ajax({
            url: "Kommentar_auslesen.php",
            data: {imgurl: relurl},
            type: "POST",
            success: function(output) {
                console.log("Success output = " + output); // kann später auch raus
                $("#comments").html(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 */ ) {}
        })
    }
    $("img.bild").on("click", function() {
        idx = parseInt($(this).data("idx"));
        var relurl = $(this).data("relurl");
        $("#lightbox_overlay img").attr("src", relurl);
        console.log(relurl); //später wieder rausnehmen
        comment(relurl);
 
    });
         
        })();  
   
});

Den doppelten Teil in lightboxtest2.js aber rauszunehmen ist auch keine Option da das ganze dann nicht funktioniert :/
 
Okay also das heißt wir teilen den Code aus Lightboxtest2.js auf und ziehen ihn auf die Hauptseite ?

Das würde dann so aussehen:

Code:
<script>
function 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  id="bigpic" /><div id="comments"></div></div></div></div>');
}
lightbox();
 
 
  $('#x').stop().click(function(){
        $('#lightbox_overlay').fadeOut(500);
    });
                 
   
            $('#left').click(function () {
                prev_img();
            });
            function prev_img() {
                var nrimg = $(".gallery").length;
                if (idx > 0) idx--;
                else idx = nrimg - 1;
                var newsrc = $("#img" + idx).attr("src");
                $('#lightbox_overlay #lightbox_inhalt img#bigpic').attr('src', newsrc);
                var relurl = $("#img" + idx).data("relurl");
                comment(relurl);
            }
            $('#right').click(function () {
                next_img();
            });
            function next_img() {
                var nrimg = $(".gallery").length;
                if (idx < nrimg - 1) idx++;
                else idx = 0;
                var newsrc = $("#img" + idx).attr("src");
                $('#lightbox_overlay #lightbox_inhalt img#bigpic').attr('src', newsrc);
                var relurl = $("#img" + idx).data("relurl");
                comment(relurl);
            }
</script>
</body>
</html>

Und der Ajax Code auf der Hauptseite:

Code:
<script>
     $(document).ready(function()
  {
    var start = 0;
        var count = 12;
        function morepic() {
            console.log(start, count);
            var params = {
                start: start,
                count: count
            };
            $.ajax({
                url: "loaddata_popular.php",
                type: "POST",
                data: params,
                success: function (output) {
                    console.log(output);
                    var newpictures = $("<div>" + output + "</div>");
                     var ACTIVE_IMG;
    var IMG_URL;
                    $('.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);
   
});
                    start += count;
                   
                    if (newpictures.find("span.end").length != 0) {
                        $('div#loader').empty();
                    }
                 $("#servicetext").append(newpictures);  
                }
            });
        }
    $(window).scroll(function()
    {
      if($(window).scrollTop() == $(document).height() - $(window).height())
      {
        morepic();
      }
    });
         morepic();
        });
</script>

Währenddessen sieht lightboxtest2.js dann so aus:

Code:
$(document).ready(function() {

// Globale Variablen
   
   
 
// Create Lightbox
   

 
// Open Lightbox
   

   
// Bild schließen
   
 
   
//Nächstes Bild (links und rechts)
   

   
(function() {
    var idx = 0;
    function comment(relurl) {
        $.ajax({
            url: "Kommentar_auslesen.php",
            data: {imgurl: relurl},
            type: "POST",
            success: function(output) {
                console.log("Success output = " + output); // kann später auch raus
                $("#comments").html(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 */ ) {}
        })
    }
    $("img.bild").on("click", function() {
        idx = parseInt($(this).data("idx"));
        var relurl = $(this).data("relurl");
        $("#lightbox_overlay img").attr("src", relurl);
        console.log(relurl); //später wieder rausnehmen
        comment(relurl);
 
    });
         
        })();  
   
});

Also das Problem ist jetzt das sich so gar keine Lightbox mehr öffnet. In der Console werden aber bei Klick auf ein Bild success-Callbacks geworfen. Habe ich das jetzt so gemacht wie du meinst ?

Grundsätzlich gibt es ja zwei Probleme aktuell. Zum einen kommt es zu doppelten Kommentaren wenn man gescrollt hat und zum anderen werden die zweite und alle folgenden Salven nicht erkannt so das innerhalb der Lightbox bei Bild 12 Schluss ist.

Das Problem mit den doppelten Kommentaren liegt doch im wesentlichen daran das dieser Ajax Code beim scrollen immer wieder aufgerufen wird:

Code:
$.ajax({
            url: "Kommentar_auslesen.php",
            data: {imgurl: relurl},
            type: "POST",
            success: function(output) {
                console.log("Success output = " + output); // kann später auch raus
                $("#comments").html(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 */ ) {}
        })
 
Zuletzt bearbeitet:
Ich habe dann mal weiter getestet und es hinbekommen das die Lightbox erzeugt wird. Wenn ich das richtig verstanden habe wollten wir lightboxtest2.js zerlegen und den Code passend aufteilen. Nun befindet sich der gesamte Code aus lightboxtest2.js auf der Hauptseite. Die Datei lightboxtes2.js ist jetzt leer.

Nun hat man zumindest nicht mehr das Problem das durch den Scroll-Vorgang die Kommentare doppelt ausgegeben wurden doch es gibt nun andere Probleme.

Problem Nr. 1: Klicke ich auf der Hauptseite ein Bild an, dann öffnet sich das Bild in der Lightbox jedoch werden weder Kommentaren oder sonst irgendwas neben dem Bild angezeigt. Da passiert jedoch immer nur beim ersten mal. Interessanterweise gibt es auch keine Reaktion in der Console. Kein Success-Callback, kein Fehler, nichts...
Klicke ich dann in der Lightbox auf den next- oder prev - Button, erscheinen auf einmal die Kommentare und alles was dazu gehört. Auch ein Success-Callback in der Console wird geworfen.

Problem Nr. 2: Das was hier passiert ist ein wenig schwieriger zu erklären. Es scheint als würde der Code das aktuelle Bild und die dazugehörigen Kommentare nicht erfassen, sondern einer strikten Reihenfolge nachgehen. Klicke ich z.B auf Bild 5 und klicke einen nach rechts, dann gelange ich auf Bild 2 und das von jeder Position aus. Immer Bild 2. Außerdem scheint es so als wenn immer die Kommentare eines Bildes angezeigt werden, dass zuletzt in der Lightbox zu sehen war.
Beispiel:
Ich sehe Bild 3 und Kommentare, schließe die Lightbox und öffne wieder ein neues Bild. Dann kommen die Kommentare von Bild 3

EDIT: Das Problem scheint das selbe wie im ersten Problemfall zu sein. Klickt man ein Bild an egal welches, wird beim ersten mal kein Success-Callback ausgeworfen in der Console.

Problem Nr. 3: die zweite und alle folgenden Salven an Bildern werden ignoriert :/

Also ziemlich kompliziert das ganze. Bin mir auch nicht sicher ob das der richtige Weg ist, stehe um ehrlich zu sein ein wenig auf dem Schlauch. Ich poste aber gleich mal den Code von der Hauptseite, vielleicht hilft das ja :)

Hier der Code zu dem du mir geraten hast, dass ich die Event-listener registriere:
Code:
<script>
     $(document).ready(function()
  {
    var start = 0;
        var count = 12;
        function morepic() {
            console.log(start, count);
            var params = {
                start: start,
                count: count
            };
            $.ajax({
                url: "loaddata_popular.php",
                type: "POST",
                data: params,
                success: function (output) {
                    console.log(output);
                    var newpictures = $("<div>" + output + "</div>");
                    $(document).ready(function() {

    var ACTIVE_IMG;
    var IMG_URL;

   
$('.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);
   
});  
});
                    start += count;
                   
                    if (newpictures.find("span.end").length != 0) {
                        $('div#loader').empty();
                    }
                 $("#servicetext").append(newpictures);  
                }
            });
        }
    $(window).scroll(function()
    {
      if($(window).scrollTop() == $(document).height() - $(window).height())
      {
        morepic();
      }
    });
         morepic();
        });
</script>


Und jetzt noch der Code am Ende der Seite:

Code:
<script>
function 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  id="bigpic" /><div id="comments"></div></div></div></div>');

$('#x').stop().click(function(){
        $('#lightbox_overlay').fadeOut(500);
    });

var idx = 0;
    function comment(relurl) {
        $.ajax({
            url: "Kommentar_auslesen.php",
            data: {imgurl: relurl},
            type: "POST",
            success: function(output) {
                console.log("Success output = " + output); // kann später auch raus
                $("#comments").html(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 */ ) {}
        })
    }
    $("img.bild").on("click", function() {
        idx = parseInt($(this).data("idx"));
        var relurl = $(this).data("relurl");
        $("#lightbox_overlay img").attr("src", relurl);
        console.log(relurl); //später wieder rausnehmen
        comment(relurl);
 
    });
            $('#left').click(function () {
                prev_img();
            });
            function prev_img() {
                var nrimg = $(".gallery").length;
                if (idx > 0) idx--;
                else idx = nrimg - 1;
                var newsrc = $("#img" + idx).attr("src");
                $('#lightbox_overlay #lightbox_inhalt img#bigpic').attr('src', newsrc);
                var relurl = $("#img" + idx).data("relurl");
                comment(relurl);
            }
            $('#right').click(function () {
                next_img();
            });
            function next_img() {
                var nrimg = $(".gallery").length;
                if (idx < nrimg - 1) idx++;
                else idx = 0;
                var newsrc = $("#img" + idx).attr("src");
                $('#lightbox_overlay #lightbox_inhalt img#bigpic').attr('src', newsrc);
                var relurl = $("#img" + idx).data("relurl");
                comment(relurl);
            }
}
lightbox();
</script>
</body>
</html>

Also wie gesagt ich bin mir nicht sicher ob es das ist was du meintest und ob ich das jetzt richtig gemacht habe. Wie gesagt, lightboxtest2.js ist jetzt leer. Was kann ich noch machen um dem Problem auf die schliche zu kommen ? :)
 
Zuletzt bearbeitet:
Werbung:
Stimmt und ich habe das ganze dann natürlich direkt gerade ausprobiert doch es gibt ein Problem.
So siehts jetzt aus :
Code:
$('.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);
    
    
   comment(relurl);
    });

Dabei sagt er mir Can't find variable: comment. Naja ich habe dann einfach folgendes gemacht:

Code:
$('.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);
    function comment(relurl) {
        $.ajax({
            url: "Kommentar_auslesen.php",
            data: {imgurl: relurl},
            type: "POST",
            success: function(output) {
                console.log("Success output = " + output); // kann später auch raus
                $("#comments").html(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 */ ) {}
        })
    }
    
   comment(relurl);
    });

Zum einen kommt der Ajax-Part ja auch am Ende der Seite vor aber das ist nicht das große Problem, sondern sagt er mir in diesem Fall Can't find variable: relurl.
Das heißt also das relurl nicht richtig gesetzt wird oder was ? Was kann ich dagegen machen ?
 
Also was die anonyme Funktion angeht liegst du richtig. Das Problem ist aber das sich ohne document-ready die Lightbox nicht öffnen lässt wenn das so aussieht...

Code:
$.ajax({
                url: "loaddata_popular.php",
                type: "POST",
                data: params,
                success: function (output) {
                    console.log(output);
                    var newpictures = $("<div>" + output + "</div>");

    var ACTIVE_IMG;
    var IMG_URL;

$('.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);
   comment(relurl);
    });
                                 
                    start += count;
                   
                    if (newpictures.find("span.end").length != 0) {
                        $('div#loader').empty();
                    }
                 $("#servicetext").append(newpictures);  
                }
            });
 
Okay super jetzt wird beim ersten klick auch alles angezeigt was dazu gehört doch es gibt jetzt ein weiteres Problem das ich nicht ganz verstehen kann aber ich versuche es mal zu erklären...

Die Bilder werden wie folgt ausgelesen, Bild 6 - Bild 1.
Klicke ich auf Bild 3 und dann auf next gelange ich auf Bild 5. Egal welches Bild es ist immer Bild 5.
Mache ich das selbe nur mit prev ausgehend von Bild 3, lande ich am Ende, also auf Bild 1

Sobald man dann aber auf Bild 5 gelandet ist und weiter klickt, funktioniert alles ganz normal. Desweiteren ist mir aufgefallen das Bild 5 das einzige Bild ist bei dem man zwei mal auf next klicken muss um weiter zu kommen.

Es werden aber bei jedem Klick auf next oder prev, Success-Callbacks geworfen. Irgendwas stimmt beim zählen der Bilder nicht schätze ich. Kann das was mit idx zu tun haben ?
 
Werbung:
UPDATE: Wenn ich ausgehend von Bild 6 durch die Lightbox klicke, funktioniert alles so wie es soll. Bild 6 ist aber die Ausnahme...
 
Mmh ich verstehe, doch leider funktioniert das so nicht. Was könnte man noch probieren ?

Im eigentlich Code war doch das hier dafür zuständig oder nicht ?
Code:
 $("img.bild").on("click", function() {
        idx = parseInt($(this).data("idx"));
        var relurl = $(this).data("relurl");
        $("#lightbox_overlay img").attr("src", relurl);
        console.log(relurl); //später wieder rausnehmen
        comment(relurl);
 
    });

Das komische ist halt das in der Console alles so läuft als wenn alles in Ordnung wäre :/
 
Eben. Aber ja hier nochmal der Code oben:

Code:
<script>
     $(document).ready(function()
  {
    var start = 0;
        var count = 12;
        function morepic() {
            console.log(start, count);
            var params = {
                start: start,
                count: count
            };
            $.ajax({
                url: "loaddata_popular.php",
                type: "POST",
                data: params,
                success: function (output) {
                    console.log(output);
                    var newpictures = $("<div>" + output + "</div>");
                    
                    
                    
                    var ACTIVE_IMG;
                    var IMG_URL;

newpictures.find('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);
    
    function comment(relurl) {
        $.ajax({
            url: "Kommentar_auslesen.php",
            data: {imgurl: relurl},
            type: "POST",
            success: function(output) {
                console.log("Success output = " + output); // kann später auch raus
                $("#comments").html(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 */ ) {}
        })
    }
           var relurl = $(this).data("relurl");
           comment(relurl);
    });                     
                                
                    start += count;
                    
                    if (newpictures.find("span.end").length != 0) {
                        $('div#loader').empty();
                    }
                 $("#servicetext").append(newpictures);   
                }
            });
        }
    $(window).scroll(function()
    {
      if($(window).scrollTop() == $(document).height() - $(window).height())
      {
        morepic();
      }
    });
         morepic();
        });
</script>

Und hier der Code von unten:
Code:
<script>
$(document).ready(function() {
$('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  id="bigpic" /><div id="comments"></div></div></div></div>');

$('#x').stop().click(function(){
        $('#lightbox_overlay').fadeOut(500);
    });

(function() {
    var idx = 0;
    function comment(relurl) {
        $.ajax({
            url: "Kommentar_auslesen.php",
            data: {imgurl: relurl},
            type: "POST",
            success: function(output) {
                console.log("Success output = " + output); // kann später auch raus
                $("#comments").html(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 */ ) {}
        })
    }
    $("img.bild").on("click", function() {
        idx = parseInt($(this).data("idx"));
        var relurl = $(this).data("relurl");
        $("#lightbox_overlay img").attr("src", relurl);
        console.log(relurl); //später wieder rausnehmen
        comment(relurl);
 
    });
            $('#left').click(function () {
                prev_img();
            });
            function prev_img() {
                var nrimg = $(".gallery").length;
                if (idx > 0) idx--;
                else idx = nrimg - 1;
                var newsrc = $("#img" + idx).attr("src");
                $('#lightbox_overlay #lightbox_inhalt img#bigpic').attr('src', newsrc);
                var relurl = $("#img" + idx).data("relurl");
                comment(relurl);
            }
            $('#right').click(function () {
                next_img();
            });
            function next_img() {
                var nrimg = $(".gallery").length;
                if (idx < nrimg - 1) idx++;
                else idx = 0;
                var newsrc = $("#img" + idx).attr("src");
                $('#lightbox_overlay #lightbox_inhalt img#bigpic').attr('src', newsrc);
                var relurl = $("#img" + idx).data("relurl");
                comment(relurl);
            }
        })();
})
</script>
</body>
</html>
 
Werbung:
Die Console zeigt nur Syntax- und Laufzeitfehler an, keine logischen bzw. semantischen.
Post noch mal deine vollständigen Code, das Ajax mit allem was drin ist.


Also gute Nachrichten. Ich habe es zum laufen bekommen :D
Das Problem lag anscheinend darin das im Code und die variable idx auf 0 gesetzt war, dass sah ja so aus:

var idx = 0;

Ich habe das rausgenommen und dann oben im Code nochmal deinen Vorschlag ( idx= parseInt($(this).data("idx")); ) angewendet und schon läuft es. Dadurch das idx auf 0 gesetzt war, ist es beim zählen wohl Fehlern gekommen :)

So das hätten wir dann ja. Jetzt gibt es aber noch ein großes Problem und zwar frage ich mich wie ich es hinbekomme das auch alle nachgeladenen Bilder gezählt werden und über die Lightbox erreicht werden können ?

Würde mich über Vorschläge freuen :D
 
Ja so in etwa. Also zu Beginn werden ja immer Standardmäßig 12 Bilder ausgelesen und angezeigt. Bei diesen 12 Bilder funktioniert auch alles so wie gewünscht. Beim Scrollen werden dann ja immer 12 weitere Bilder ausgelesen.
Das Problem liegt aber beim Übergang. Ich spreche dabei immer von Salven. Wenn ich die ersten 12 Bilder geladen habe und dann vom 12ten Bild aufs theoretisch 13te Bild klicken möchte (innerhalb der Lightbox über den next Button) dann geht das nicht.

Es scheint als wenn alle nachgeladenen Bilder nicht mit in die Zählung einfließen und deshalb ignoriert werden oder so ähnlich. Bspw. gibt es auch das Phänomen das wenn ich auf ein Bild der zweiten Salve klicke und dann auf den next Button, mir als nächstes ein Bild aus der ersten Salve angezeigt wird.

Ich vermute auch das es etwas damit zu tun haben das Variable Start immer 0 ist. Aber ich bin da gerade noch dabei das ganze Stück auszuprobieren.
Code:
var start = 0;
        var count = 12;

Wird insgesamt klar was ich meine ?
 
Zurück
Oben