I assume you want the actions to occur when they click on parts of the image instead of when they mouseover. If all of your images are the same size, then it's real easy:

HTML:

<div class="lightboxImage" style="background-image:url('IMAGEURL');">
<a href="PERMALINKTOPREVIOUSPHOTO"></a>
<a href="IMAGEURL" rel="lightbox" class="lightboxLink" title="Lightbox Image Caption"></a>
<a href="PERMALINKTONEXTPHOTO"></a>
</div>

replace all the items in ALL CAPS with the actual value.

CSS:

.lightboxImage {
width: 500px; // or whatever the standard image width is
height: 333px; // or whatever the standard image height is
}
.lightboxImage a {
display: block;
width: 33%;
height: 333px; // or whatever the standard image height is
float: left;
}
.lightboxImage a.lightboxLink {
width: 34%;
}

You may want to add a .lightboxImage a:hover style as well and display a background image so the user knows what their click will do.

If your images aren't going to be the same size, then we'll need to get a little more creative to make it work.

It works just perfect. I will put up a test site up soon. However i forgot about one vital thing... all my images are 500px wide, and 333px high. This will be the case with most of the images, however i forgot about the vertical images.

Any ideas?
How complicated is it to have it work with different image sizes?

Thanks for the help so far John.

the way i have it setup is that i just upload the picture, and it works just fine. i don't have to type any code, i just have movabletype insert the file name into the template and everything is good to go.

I am trying to have this as fool proof as possible as this will be a multi-user photolog. the way it works right now is, upload picture, write the image name in the mt excerpt field. write a blurb about the photo and hit publish.

some of the users would have no idea how to write up a class definition.

obviously your way will be the way to go if there's no alternative. but i was hoping for an automated solution. i don't know, an auto height, width solution. thanks though wafflestomper.

i agree with wafflestomper that the best way to handle it is with custom css classes assigned to the DIV depending on if the image's orientation is vertical or horizontal, and you can determine that with PHP's getimagesize function. You can do the same with JavaScript, but I'd go the server-side route in case any users have JavaScript disabled.

Another option is you could set up "vertical image" and "horizontal image" categories in MT, and then use MTEntryCategories to determine which category they selected. If a user forgets to set a category (or if they pick both for some crazy reason), then you can just default to horizontal. You could also add some JavaScript to the Entry Edit page to be sure they select either the "vertical image" or "horizontal image" category before they can submit the form.