Subscribe by Email

Interactive jQuery Wall

This is a little jQuery experiment I put together, just for kicks! Here is a list of things I wanted the wall to do, and things you’ll be learning to do:

Simple HTML without need for much editing

Group these divs depending on the width of the page, into divs that change as you resize the window

When resizing the window the image rows should change to display the maximum number of images, so it’ll work on the maximum number of screens.

On hover they should expand and become bigger, they might also be linked. (possibly optional depending on your needs)

If a row is incomplete, images should be added to the end to fill a row, so it looks like a continuous block.

Doesn’t sound too hard!

You’d be surprised. It actually turned out to be more difficult than I assumed! First things first, lets set up what our image holder is going to look like. So what I did was create a bunch of s each with an ID (its important you get these in the right order!), with a linked image inside.

Thats really it for the HTML. I wanted to keep it as simple as possible incase you wanted to add more images, or take some away. Next we need to add a tiny amount of CSS just to make everything look right at the end. If you were getting images from a database, this is where you’d pull the images to.

Lets take a look at the imageNumber() function first. To start, lets define some variables.

var windowWidth = $(window).width(); /* The current width of the window */
var numberOfImages = ($("#images span").length); /* The total number of images */
var imagesPerRow = Math.ceil(windowWidth / imageWidth); /* The number of images that should be on each row */

Next we want to work out if every row has the same number of images. If they don’t we want to add some images to the end. So we start by checking if there’s a remainder when we divide the number of images by the number of images that should be on each row.

if(numberOfImages % imagesPerRow != 0) {

Then we want to set two variables. One will be the number of images we need to add, and the other will be a variable for using in a while loop. Then we’ll run the while loop and clone the images until we’ve filled the row. The math for numberOnRow looks pretty complicated, but all we’re doing is getting the remainder, which is the percent we have, then taking it away from 1 to get the percent we need, and then multiplying it by the images in each row. Then we round it, because there’s no guarantee it’ll be an even number.

var numberOnRow = Math.round((1 - (numberOfImages/imagesPerRow % 1)) * imagesPerRow);
var number = 0;
while(numberThe cloning was set to true so hover will work on new elements. We also added an appended class, so we can target these elements! So lets create two more variables, so we can add an ID to each of the new appended elements.
1 var nuAppended = $('.appended').length; var nextA = parseFloat(numberOfImages)+1; while(nuAppended > 0) {
$('.appended').each(function() {
$(this).attr('id', 'i'+nextA);
++nextA;
--nuAppended;
});
}
}
}

This gets the last image ID (i21 or something) and adds one to it. Then for each appended item we add a new ID to each.

Now that each of the divs have an ID we can add a wrapper round each row, using the number of images per row variable we added earlier.

Now we have a problem! On resize its going to keep adding all of this stuff, and your computer is gonna freeze. So how do we fix this? The easiest way is to remove everything we’ve added at the start. So go back to the very start of the function and add this: