Question

I’m building a gallery of 150 thumbnail images and I’m using a jQuery script to place the images into a DIV and link them to larger versions:

function getImageThumb(number) {
return $('<a href="javascript:void(0);" title="Plate ' + number + '" rel="{gallery: \'gal1\', smallimage: \'./Vol4/Small/tafel_' + number + '.jpg\', largeimage: \'./Vol4/Large/tafel_' + number + '.jpg\'}">' +
         '<img src="./Vol4/Thumbs/tafel_' + number + '.jpg" alt="Plate ' + number + '" width="100" height="150" border="0" /></a>');}

$(document).ready(function(){  
    for (var i=450; i<601; i++) {
    $(".pane").append(getImageThumb(i)); 
    }
});  

The problem I’m having is with positioning. Each thumbnail is 100px by 150px and I want to arrange them in groups of 9 in this particular order:

01 02 03   10 11 12   19 20 21
04 05 06   13 14 15   22 23 24
07 08 09   16 17 18   25 26 27

The idea is that the finished DIV will be 300px by 450px and show only a single block of 9 images at a time. The user can scroll to the left or right to see different groups of 9 thumbnails. But when I create a DIV with those dimensions and run the script, it just overflows the bottom and I get three columns and 50 rows arranged like this:

01 02 03
04 05 06
07 08 09
10 11 12
13 14 15  and so forth

Can anyone show me a simple way to position the images into the correct pattern as I append them to the DIV?

Answer 1

Use the modulus operator

var paneCount = 1;
for (var i=450; i<601; i++) {
    if ( i % 9 == 0 )
       paneCount ++;
    $(".pane"+paneCount).append(getImageThumb(i)); 
}