jQuery/CSS Probleme mit einfachen Bildergalerie - erste Seite hat Probleme beim Laden

Question

Ich arbeite an einer einfachen Bildergalerie, die Informationen aus der Flickr-API herunterzieht. Grundsätzlich ist die Prämisse der Galerie, dass jede Seite 10 Bilder enthalten muss und entsprechend der Anzahl der Bilder in jeder Galerie paginieren muss. Wenn ein Benutzer auf ein Foto klickt, sollte ein Overlay mit dem Bild in einem Rahmen erscheinen.

Sie können meinen Code auf CodePen finden Sie hier: http://codepen.io/anfperez/pen/QEZNEZ

Ich habe in der Lage, die Galerie zu gelangen erfolgreich zum größten Teil mit einer Ausnahme arbeiten: auf der ersten Seite, sind nur neun Bilder geladen. Meine Theorie ist, weil ich einige jQuery-Befehle habe, die 10 Elemente paginieren. In meinem HTML habe ich ein img-Tag versteckt in einem #frame div, das versteckt ist, bis der Benutzer auf ein Bild klickt. Also zählt mein jQuery das versteckte img-Tag als Teil der 10 maximalen Bilder und fügt es in das Paginierungssystem ein. Wie kann ich das erste img-tag ausschließen? Ich habe versucht,

$('img:not(:first)') 

als meine Auswahl zu verwenden, aber es funktioniert nicht.

Das zweite Problem ist, dass, wenn Sie auf eine andere Seite wegklicken, dann auf die erste Seite zurückkehren, können Sie jetzt ein großes leeres Rahmenelement sehen. Dieses Element sollte jedoch ausgeblendet werden, wenn ein Bild nicht angeklickt wird. Irgendwelche Vorschläge, wie Sie diesen Code sauberer machen können?

Answer 1

Das Problem ist, dass Sie die Klasse Paginieren auf alle <img>-Tags hinzugefügt, wenn Sie sie nach oben in Ihrem Erfolg Schleife in Zeile 38.

Dies sind Einstellung: $('img').addClass("paginate")

werden soll: $('#photo-list img').addClass("paginate")

Dies beschränkt es auf alle Bilder in Ihrem Foto-Liste div, so dass es nicht Ihr unsichtbares Frame-Bild abfangen. Dies behebt sowohl das Off-by-One-Problem als auch das Paginate-Problem, das den unsichtbaren Frame anzeigt. Sie können dies auch außerhalb der Schleife verschieben, da es keinen Grund gibt, warum dies bei Bildern bei jeder Schleifeniteration aufgerufen werden sollte.

Unabhängig davon sollten Sie in Zeile 78 auch ein Semikolon hinzufügen. Chrome gibt einen Fehler aus, weil der Rückgabewert der ersten anonymen Methode die nächste Methode aufruft. Code sieht ansonsten gut aus.