Shuffle.js Pt. 2

A while back I wrote about how I shuffle the grid of images that make up my design portfolio . Something I wanted to do then, which I hadn’t, was to filter those entries into categories.

I recently wrote some more code that accomplishes that. Now the “Graphics” section of this site has a sub-menu that isolates four different disciplines. I’ve uploaded the work to Github at

I found the Fisher-Yates shuffle method in a Stack Overflow discussion. It works really well and will shuffle the objects in any array.

So I created an array that stores an id, a hex color for rollovers, a thumbnail location, an image location, metadata, a text description, and a category for each image. I just call this array ‘portfolio[ ]‘. Then I wrote a function called showPort( ), that uses the document.write() method to write the shuffled image objects to the page; it runs on overy load and uses Fisher Yates to re-order the images on every refresh. It works, and that’s where I left it last time I worked on this.

Filtering out categories just required a few more basic steps. I created a sub-menu with four links to new pages for my categories. The categories I’m using are Typography, Illustration, Motion, and Photography. So I wrote four new functions similar to showPort(), except before writing the shuffled objects to the page, they extract the objects with that specified category with a for loop, and building a new array for that category using the push method. So there are four new pages identical to my index, except they run a different “show” function when they load. showTyp() for Typography, showIll() for Illustration, etc. I didn’t need any new PHP to accomplish this. Just copied and renamed files.

I think I have some useful code for other people at this point. But my grid is heavily dependent on a stylesheet that specifies my image hover appearance, as well as the text that appears when my users hover over an image, called ‘info’ in my object constructor. It has been a while since I wrote that stylesheet, and I think the last step would be extracting the styles that pertain to the grid from the rest of the site’s elements.

More due credit to Stack Overflow and it’s community: I didn’t know how to push objects into an array from within a function before this. The ‘push’ method was integral to building completely new arrays while parsing an existing array. I learned how to do it here.