Ankündigung

Einklappen
Keine Ankündigung bisher.

[Erledigt] Lightbox von mit js geladenen Bilder

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • [Erledigt] Lightbox von mit js geladenen Bilder

    Hallo zusammen, habe eine kurze Frage:
    Ich lade Bilder per JS aus dem RSS-Feed von Flickr.
    Nun möchte ich die Bilder in einer Lightbox anzeigen, nur irgendwie funktioniert das nicht. Schreibe ich aber testweise ein Bild mit Link hinein geht es, dasselbe per JS funktioniert aber nicht. Ist es möglich die Lightbox auf die js geladenen Bilder anzuwenden oder nicht?

    Bei der Lightbox handelt es sich um dieses Plugin.

    Ich möchte das geklärt haben, weil ich dann weiss ob der Fehler bei mir liegt oder ob es einfach unmöglich ist.

    Vielen Dank

    LG

  • #2
    Ich möchte das geklärt haben, weil ich dann weiss ob der Fehler bei mir liegt oder ob es einfach unmöglich ist.
    Dann solltest Du wenigstens einen Link posten. Hellsehen kann hier niemand.
    [COLOR="#F5F5FF"]--[/COLOR]
    [COLOR="Gray"][SIZE="6"][FONT="Georgia"][B]^^ O.O[/B][/FONT] [/SIZE]
    „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
    [URL="http://www.php.de/javascript-ajax-und-mehr/107400-draggable-sorttable-setattribute.html#post788799"][B]Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“[/B][/URL][/COLOR]
    [COLOR="#F5F5FF"]
    --[/COLOR]

    Kommentar


    • #3
      Kann ich auch. Hier
      Das Bild der ersten Tulpe ist fest im Code geschrieben, alle anderen werden per JS reingeschrieben.

      Ich dachte, ihr könntet einfach generell sagen, ob es möglich ist die Lightbox auf per js geladene Bilder anzuwenden.. aber ok sorry

      Danke für die schnelle Antwort

      Kommentar


      • #4
        rein prinzipiell ja. Die Frage ist nur wie du das ganze umsetzt.
        "My software never has bugs, it just develops random features."
        "Real programmers don't comment. If it was hard to write, it should be hard to understand!"

        Kommentar


        • #5
          Ok, danke für die Antwort.
          Ist es so wie ich es mache nicht möglich?
          Hier die Datei die den Import löst

          Ich bin auf die Javascript Methode umgestiegen, da die PHP Methode via simpleXML mit meiner Serverkonfiguration nicht möglich ist.

          Kommentar


          • #6
            Vermutlich muss einfach nur die Initialisierungs-Routine der Lightbox noch mal aufgerufen werden, nachdem die Bilder ins DOM eingefügt wurden.
            [SIZE="1"]RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?[/SIZE]

            Kommentar


            • #7
              Danke für die Antwort, aber bin nicht sicher, ob ich dich richtig verstehe.
              Mit "Initialisierungs-Routine der Lightbox" meinst du sehrwahrscheindlich.

              Code:
              $('#flickr a').lightBox(); // Select all links in object with gallery ID
              oder?
              In meinem Code wird die Funktion nach dem Einfügen ins DOM aufgerufen:

              Code:
              $(function(){
              
              
              	   //FLICKR IMPORT
                
                 $.getJSON("http://api.flickr.com/services/feeds/photoset.gne?set=72157624546841599&nsid=52783156@N07&lang=de-de&format=json&jsoncallback=?", function(data){
                $.each(data.items, function(i,item){
                var bildlink = item.media.m;
                var bildlink2 = item.media.m;
                bildlink2 = bildlink.replace("_m", "");
                  $("<img/>").attr("src", bildlink).attr("alt", item.title).appendTo("#flickr").wrap("<a href='" + bildlink2 + "'></a>");
              ;
                         
                });
                
                $("#title").html(data.title);
                $("#description").html(data.description);
                $("#link").html("<a href='"+data.link+"' target=\"_blank\">Visit the Viget Inspiration Pool!</a>");
                  //Notice that the object here is "data" because that information sits outside of "items" in the JSON feed
              
                });
                
                // lightbox
              	$('#flickr a').lightBox(); // Select all links in object with gallery ID
              
                
              });
              Reicht das nicht?

              Kommentar


              • #8
                Nein.

                getJSON basiert auf Ajax. Das bedeutet, dass nicht gewährleistet ist, dass das Einbinden der Items vor dem Lightbox-Script geschieht. Du solltest den Lightbox-Aufruf mit ins Callback ziehen. Alternative gehts _vielleicht_ mit live-Query.
                [COLOR="#F5F5FF"]--[/COLOR]
                [COLOR="Gray"][SIZE="6"][FONT="Georgia"][B]^^ O.O[/B][/FONT] [/SIZE]
                „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
                [URL="http://www.php.de/javascript-ajax-und-mehr/107400-draggable-sorttable-setattribute.html#post788799"][B]Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“[/B][/URL][/COLOR]
                [COLOR="#F5F5FF"]
                --[/COLOR]

                Kommentar


                • #9
                  Danke für die Antwort, jetzt verstehe ich das Problem Danke!
                  Schaue mir live-Query an!

                  Kommentar


                  • #10
                    Zitat von sign Beitrag anzeigen
                    Danke für die Antwort, jetzt verstehe ich das Problem Danke!
                    Schaue mir live-Query an!
                    Könntest du mir erklären, was das live-query genau macht? Ich verstehe nicht ganz, wie es funktioniert?

                    EDIT:

                    Habs verstanden, es geht jetzt. Musste die Funktion nur in den Callback der getJSON-Funktion nehmen! Danke für eure Hilfe!
                    Hier der Code:

                    $(function(){


                    //FLICKR IMPORT

                    $.getJSON("http://api.flickr.com/services/feeds/photoset.gne?set=72157624546841599&nsid=52783156@N 07&lang=de-de&format=json&jsoncallback=?", function(data){
                    $.each(data.items, function(i,item){
                    var bildlink = item.media.m;
                    var bildlink2 = item.media.m;
                    bildlink2 = bildlink.replace("_m", "");
                    $("<img/>").attr("src", bildlink).attr("alt", item.title).appendTo("#flickr").wrap("<a href='" + bildlink2 + "'></a>");
                    ;

                    });

                    $("#title").html(data.title);
                    $("#description").html(data.description);
                    $("#link").html("<a href='"+data.link+"' target=\"_blank\">Visit the Viget Inspiration Pool!</a>");
                    //Notice that the object here is "data" because that information sits outside of "items" in the JSON feed
                    $('#flickr a').lightBox();
                    });



                    });

                    Kommentar


                    • #11
                      Versuchs lieber erstmal über das Callback. Bin wirklich nicht sicher, ob das mit live-Query geht. Müsste mich da auch erst selbst mit dem Flickr-Plugin beschäftigen.
                      [COLOR="#F5F5FF"]--[/COLOR]
                      [COLOR="Gray"][SIZE="6"][FONT="Georgia"][B]^^ O.O[/B][/FONT] [/SIZE]
                      „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
                      [URL="http://www.php.de/javascript-ajax-und-mehr/107400-draggable-sorttable-setattribute.html#post788799"][B]Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“[/B][/URL][/COLOR]
                      [COLOR="#F5F5FF"]
                      --[/COLOR]

                      Kommentar

                      Lädt...
                      X