Hi all,

I'm creating a simple gallery as a way to dip my toes into jQuery. I have thumbnails, each of which link to an image file, and when the user clicks on them the main image in the center is swapped. This works fine.

I'm now coding the "previous" and "next" buttons. They will work the same way -- they just link to a photo, and when clicked the main photo is swapped. However, the link needs to update whenever a new image is displayed.

The way I am doing this now is to: 1) Go through the list of thumbnails and work out which thumbnail in the list is the one that points to the current main image, 2) find the previous and next thumbnails (if they exist), 3) update the links and show the previous and next buttons as required.

The code below works fine, however I feel like I am doing it in an inefficient way:

1. // set previous and next buttons to link to appr. photos in list
2. function setPreviousAndNext(){
3.     var currentPhoto = $('#photo img').attr('src');
4.    
5.     var foundPrevious = false;
6.     var foundNext = false;
7.     var previous, next;
8.     $('.prev-next a').hide();    // hide prev and next, show only if necessary
9.        
10.     $('.thumb').each(function(){
11.         if ($(this).attr('href') == currentPhoto) {
12.             foundPrevious = true;
13.             // add border to thumb and caption to image
14.             $(this).parent().attr('style', 'border: 2px solid gray;');
15.             $('#caption').html($(this).children().attr('alt'))
16.         } else {
17.             if (!foundPrevious){
18.                 previous = $(this);
19.             } else if (!foundNext){
20.                 next = $(this);
21.                 foundNext = true;
22.             }
23.             $(this).parent().attr('style', 'border: 2px solid white;');
24.         }
25.     });
26.     if (previous != null)
27.         $('#previous a').attr('href', previous.attr('href')).show();
28.     if (next != null)
29.         $('#next a').attr('href', next.attr('href')).show();
30. }

Instead of having to store the previous and next image using flags and what-not, it would be much easier if I could say

2. $('.thumb').each(function(){
3.     if ($(this).attr('href') == currentPhoto) {
4.         previous = $('.thumb').each().previous();
5.         next = $('.thumb').each().next()
6.         // add border to thumb and caption to image
7.         $(this).parent().attr('style', 'border: 2px solid gray;');
8.         $('#caption').html($(this).children().attr('alt'))
9.     } else {
10.         $(this).parent().attr('style', 'border: 2px solid white;');
11.     }
12. });

... or something, where "previous()" and "next()" just peek at the previous and next items in the list.

Is there some efficient way of doing this? Or another way to make my code nicer?

Thanks!