I fiddled around a bit and came up with this: http://jsfiddle.net/S3QpB/
HTML: I moved the box divs for row 4 after and gave them ids so I could test against them in the javascript.
<div class="wrapper">
<div class="gallerybox column1">TEXT for image 1</div>
<div class="photo"><img src="http://goo.gl/VEEw3z"/></div>
<div class="gallerybox column2">TEXT for image 2</div>
<div class="photo"><img src="http://goo.gl/VEEw3z"/></div>
<div class="gallerybox column3">TEXT for image 3</div>
<div class="photo"><img src="http://goo.gl/VEEw3z"/></div>
<div class="photo" id="box-4"><img src="http://goo.gl/VEEw3z"/></div>
<div class="gallerybox column4">TEXT for image 4</div>
<div class="gallerybox column1">TEXT for image 1</div>
<div class="photo"><img src="http://goo.gl/VEEw3z"/></div>
<div class="gallerybox column2">TEXT for image 2</div>
<div class="photo"><img src="http://goo.gl/VEEw3z"/></div>
<div class="gallerybox column3">TEXT for image 3</div>
<div class="photo"><img src="http://goo.gl/VEEw3z"/></div>
<div class="photo" id="box-4-2"><img src="http://goo.gl/VEEw3z"/></div>
<div class="gallerybox column4">TEXT for image 4</div>
<div class="gallerybox column1">TEXT for image 1</div>
<div class="photo"><img src="http://goo.gl/VEEw3z"/></div>
<div class="gallerybox column2">TEXT for image 2</div>
<div class="photo"><img src="http://goo.gl/VEEw3z"/></div>
<div class="gallerybox column3">TEXT for image 3</div>
<div class="photo"><img src="http://goo.gl/VEEw3z"/></div>
<div class="photo" id="box-4-3"><img src="http://goo.gl/VEEw3z"/></div>
<div class="gallerybox column4">TEXT for image 4</div>
JavaScript:
$(".photo").click(function(e) {
if ( ($(this).attr('id') !== "box-4") && ($(this).attr('id') !== "box-4-2") && ($(this).attr('id') !== "box-4-3") ) {
if( $(this).prev().hasClass("open") ) {
$(this).prev().removeClass("open").addClass("closed");
}
else {
// if other menus are open remove open class and add closed
$(this).siblings().prev().removeClass("open").addClass("closed");
$(this).prev().removeClass("closed").addClass("open");
}
if( $(this).hasClass("opaque") ) {
$(this).removeClass("opaque");
}
else {
// if other menus are open remove open class and add closed
$(this).siblings().removeClass("opaque");
$(this).addClass("opaque");
}
} else {
if( $(this).next().hasClass("open") ) {
$(this).next().removeClass("open").addClass("closed");
}
else {
$(this).siblings().next().removeClass("open").addClass("closed");
$(this).next().removeClass("closed").addClass("open");
}
if( $(this).hasClass("opaque") ) {
$(this).removeClass("opaque");
}
else {
// if other menus are open remove open class and add closed
$(this).siblings().removeClass("opaque");
$(this).addClass("opaque");
}
}
});