Ankündigung

Einklappen
Keine Ankündigung bisher.

[Erledigt] .next() / Prev und Next buttons

Einklappen

Neue Werbung 2019

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

  • [Erledigt] .next() / Prev und Next buttons

    Hallo!
    Ich bin gerade dabei, eine kleine Bildergalerie zu meistern.
    Die Bilder werden mithilfe von HTTPRequest von einem PHP-Script geladen, je nachdem welche Kategorien (Ordner) da sind.
    Und nun bin ich dazu gekommen, die Prev und Next Buttons zu implementieren, komme aber nicht weiter.
    Hier findet Ihr den Aufbau auf JSFiddle

    Was ich mir überlegt habe, dass ich jedem Image ein extra Class zuweise (Image1, Image2, ...), kann mir aber vorstellen, dass es eine bessere Lösung existiert.

    Vielen Dank im Voraus!
    mfg Alexander
    PHP-Code:
    if($happy)
       
    $happy false


  • #2
    1. Du baust dir eine sinnvolle Struktur für die Vorschau-Bilder:
    Code:
    <div class="item" data-src="http://akdes.eu/jsfiddle/1.jpg">
        <img src="http://akdes.eu/jsfiddle/1.jpg">
    </div>
    - Der Wert eines id-Attributs ist einzigartig, daher darfst du nicht allen divs id="content" zuweisen. Statt dessen z. B. class="item"
    - Das img braucht warscheinlich keine eigene Klasse (natürlich kannst du ihm aber eine zuweisen, wenn du das möchtest), es lässt sich über .item img selektieren.
    - kein Inline-Javascript (onlick-Attribut)
    - statt dessen das Attribut data-src hinzufügen. Natürlich kann man in der aktuellen Implementierung auch darauf verzichten und einfach das src-Attribut des Vorschau-Bildes direkt abfragen. Aber ich nehme an die Preview-Bilder sollen verkleinerte Versionen des eigentlichen Bildes sein.
    2. Der geänderte JS-Code:
    Code:
    $(document).ready(function()
    {
        $('#thumbs .item').click(function()
        {
            var url = $(this).attr('data-src');
            $('#bigImg').attr('src', url);
        });
    });
    3. Du merkst dir welches image angeklickt wurde:
    Code:
    ...
        var imageIndex = 0;
        
        $('#thumbs .item').click(function()
        {
            ...
            imageIndex = $(this).index();
        });
    4. Wenn man den prev/next-Link anklickt verringerst/erhöhst du den index. Dabei achtest du natürlich auf die Grenzen. Dann triggerst du einfach die click-Methode für das passende image. Beispiel für next:
    Code:
        $('#next').click(function(event)
        {
            event.preventDefault();
            
            imageIndex += 1;
            
            if (imageIndex == $('#thumbs .item').length) {
                imageIndex =  0;
            }
            
            $('#thumbs .item')[imageIndex].click();
        });
    Demo: http://jsfiddle.net/kfbp5ru4/2/
    (Der jQuery-Code kann optimiert und unnötige Abfragen können vermieden werden.)

    Kommentar


    • #3
      @monolith Vielen Dank für die wertvolle Tipps! und vor allem für die Schnelligkeit
      Versuchs.. =)


      Danke!
      mfg Alexander
      PHP-Code:
      if($happy)
         
      $happy false

      Kommentar


      • #4
        Beim verwenden von
        Code:
         $('#thumbs .item').click(function()
        anstatt
        Code:
        function show(url)
        funktioniert es nicht. (auch alerts werden nicht ausgegeben)
        mein rohes HTML hat nur den div mit id="thumbs", alle Fotos werden dann später per
        Code:
        xmlhttp.open
        geladen:
        PHP-Code:
        echo "<div class=\"item\" data-src=\"".$image."\"><img src=\"i/".$cat."/thumbs/".$thumb."\"/></div>\n"
        Kann es sein, da die Elemente "praktisch" nicht da sind, dass die clicks nicht verarbeitet werden?

        Somit funktionieren die Prev und Next Buttons....
        mfg Alexander
        PHP-Code:
        if($happy)
           
        $happy false

        Kommentar


        • #5
          Naja wenn ich das richtig verstehe wird der Code, der eigentlich den click-Events Closures zuweisen soll, ausgeführt bevor die betroffenen HTML-Elemente überhaupt existieren, oder? Im Grunde müsstest du dann nur den Code entsprechend anpassen:
          Code:
          <script>
             ... // Erzeugen der HTML-Elemente
          
              // Erst danach das click-Event binden
              $('#thumbs .item').click(function()
              {
                  var url = $(this).attr('data-src');
                  $('#bigImg').attr('src', url);
              });
          </script>
          Ansonsten wenn das nicht hilft poste den Code mit dem du #thumbs füllst.

          Kommentar


          • #6
            Zitat von monolith Beitrag anzeigen
            Naja wenn ich das richtig verstehe wird der Code, der eigentlich den click-Events Closures zuweisen soll, ausgeführt bevor die betroffenen HTML-Elemente überhaupt existieren, oder? Im Grunde müsstest du dann nur den Code entsprechend anpassen:
            Habs gefunden, dass Problem liegt daran, dass .click-Event funktioniert nur bei "statischen" Sachen.
            Hier ausführlicher

            Also somit habe ich jetzt anstatt
            Code:
            $("selector").click...
            das hier genommen:
            Code:
            $(document).on("click", "selector", function() {...
            und es funzt

            Danke dir nochmal =)
            mfg Alexander
            PHP-Code:
            if($happy)
               
            $happy false

            Kommentar


            • #7
              Zitat von akdes Beitrag anzeigen
              Habs gefunden, dass Problem liegt daran, dass .click-Event funktioniert nur bei "statischen" Sachen.
              Nein. Das funktioniert, wenn zum Zeitpunkt der Übergabe der Funktion das Element existiert. Ist doch auch irgendwie schlüssig, oder nicht? D. h. du musst nur dafür sorgen, dass die Funktion erst dann übergeben wird, wenn das Element bereits existiert.

              Demo: http://jsfiddle.net/2kn6a462/

              (Womit ich nicht sagen will, dass on nicht die besser passende Lösung ist.)

              Kommentar


              • #8
                Ja, ist schon richtig, bei mir aber, wurden die Sachen erst geladen, und dann gabs die Funktion, es hat nicht funktioniert. kp...
                Aber jetzt gehts ja, vielen vielen Dank für deine Hilfe und super Erklärung!
                mfg Alexander
                PHP-Code:
                if($happy)
                   
                $happy false

                Kommentar

                Lädt...
                X