I'm working on a simple picture gallery that pulls down info from the Flickr API. Basically the premise of the gallery is that each page must hold 10 images, and paginate according to how many pictures are in each gallery. When a user clicks on a photo, an overlay should pop up with the picture in a frame.
You can find my code on CodePen here: http://codepen.io/anfperez/pen/QEZNEZ
I've been able to get the gallery working successfully for the most part with one exception: on the first page, only nine pictures are loaded. My theory is because I have some jQuery commands that paginate 10 <img> elements. In my HTML I have an img tag hidden inside a #frame div, which is hidden until the user clicks on a picture. So my jQuery counts that hidden img tag as a part of the 10 image maximum, and includes it in the pagination system. How can I exclude the first img tag? I've been trying to use
$('img:not(:first)')
as my selector, but it's not working.
The second issue is that, if you click away to a different page, then return to the first page, you can now see a large blank frame element. But that element should be hidden whenever a picture is not clicked. Any suggestions for how to make this code cleaner?
The issue is that you're adding the paginate class to all <img> tags when you're setting them up in your success loop on line 38.
This: $('img').addClass("paginate")
Should be: $('#photo-list img').addClass("paginate")
This limits it to all the images in your photo-list div so it doesn't catch your invisible frame image. This fixes both the off by one issue and the paginate issue that shows the invisible frame. You can also move this outside of the loop as there's no reason why this should be called on all images at every loop iteration.
Unrelated, you should also add a semicolon on line 78. Chrome throws an error thinking that the return value from the first anonymous method is calling the next method. Code looks fine otherwise.