600x902- Photo Container size
10 px - outline size
8 px - inner dividing line size
72 px - top and bottom outline
I will be creating new layouts each time I create a new container based on the image and look I want to create. I'd like to be able to change the length and location of the inner dividing lines based on the images I use as well as the length of the container. Is that an issue?
Don't worry about the height/length of your container. If marked up correctly your outer container will be as tall as the images inside it. So, you should really be concerned about the width of those dividers.
This won't be easy and I don't have time to work up a solution but it your goal would be to create better markup and use CSS to markup the different types of layouts you plan to have.
To get started implementing the lightbox you need to add a reference to the lightbox css in your page template, preferably inside the HEAD element on your page template:
<link type="text/css" href="/CatalystStyles/lightbox.css" rel="StyleSheet" />
Then, you also need to add a reference to the lightbox script (preferably this goes at the end of your page template just before the closing </body> tag:
Once those CSS and script references are in place you just need to wrap a link tag around your images that link to the URL of the full image. So,
<img alt="" width="292" height="200" src="/url-to-smaller-image.jpg" />
<a href="/url-to-full-image.jpg" onclick="myLightbox.start(this); return false;"><img alt="" width="292" height="200" src="/url-to-smaller-image.jpg" /></a>
That should get your lightbox working. Now, your next goal is to probably figure out different versions of your photo layouts. For example, one instance might be "two images, equal width" and another might be "two images, one takes up 2-thirds of the space, the other 1-third", etc. Once you have some pre-ordained layout situations (instead of completely random, at-will layout situations) you'll be able to style it via CSS to appear how you would like.
You also want to trim down your markup a bit and stop using inline styles. I realize you are using inline styles on the inner images to control their position but you don't really need to do that if you have a few layout classes.
I've come up with a solution for you. Checkout this Fiddle:
For the first image in each block you'll notice that theres a class of "first". We have to markup the first image in each set to make sure the margin is removed from the left side on the first image in a block only. Other than that, it's making sure the images you prep have the same aspect ratio each time.
You'll also notice in the last block I have a class named "tall" added to the ".block" element. In the CSS I saw, when a ".block" is also ".tall" make the height taller. The images sometimes don't evenly get to the same height so you can get it close and adjust the height in the CSS of ".block" and ".block.tall" to a height that works for you. I'm cutting off anything over that height and it gets hidden to look even but you might lose a little on the bottom of some images.
This should get you on the right track. Best of luck.
If you can't make sense of my code then you might want to look into this plugin I found which would probably work for you... it even has a lightbox hooked up to it: http://codecanyon.net/item/jquery-tiles-gallery/2281417