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

[akdes]

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!

[monolith]

1. Du baust dir eine sinnvolle Struktur für die Vorschau-Bilder:

<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:

$(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:

...
    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:

    $('#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.)

[akdes]

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


Danke!

[akdes]

Beim verwenden von

 $('#thumbs .item').click(function()

anstatt

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

xmlhttp.open

geladen:

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....

[monolith]

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:

<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.

[akdes]

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

$("selector").click...

das hier genommen:

$(document).on("click", "selector", function() {...

und es funzt

Danke dir nochmal =)

[monolith]

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.)

[akdes]

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!