As you can see I’ve put the images in a ul list.
I’ll show you how to do that dynamically with php in later posts.
And there are some wrap divs I’ve used for positioning.
popopen_wrap is the parent div which is displayed with opacity in bg when we click on thumbnail images.
img_holder_bg is div used for backgournd opacity.

In fact this javascript code is not entirely mine, one of my friend have written the basic key storke movement using array in pure javascript.
I’ve ported that into jquery and added dynamic checking of what to display next.

Note here I’m interested in adding ‘>’ symbol for only second level ‘li’ elements which have a ‘ul’ element inside them.
use this jquery algo if your problem matches this logic

$(document).ready(function() {
//on dom ready
$('ul.menu').children().each(function() {
//looping over children of first level ul
$(this).children('ul').children().each(function() {
//looping over children of 2nd level ul
$(this).children('ul').each(function() {
//check for ul child in li element and excecutes the function. each function is added just for the sake of implementing the following function
$(this).before('<p class="lessthan">&gt;</p>');
});
});
});
});