Firstly many thanks to Lokesh Dhakar - http://www.huddletogether.com for creating this.
In this example I have used Lightbox v2.02, I have just checked and the current version is 2.03.3.
(I will update my version and this example when I have had a chance to try it out.)

You could download the Lightbox files yourself but I found that I needed to edit the lightbox.js and lightbox.css files for them to work correctly on DotNetNuke.
I have attached my modified version of the complete Lightbox source code for your use.

Step 1

Unzip the attached lightbox.zip to the root of your DNN installation ensuring that you use folder names.
Mine is /DotNetNuke on my development laptop so the zip extract end up as:
/DotNetNuke/lightbox
/DotNetNuke/lightbox/css
/DotNetNuke/lightbox/images

On my hosted solution DNN is installed in my root folder so the path to lightbox becomes:
/lightbox
/lightbox/css
/lightbox/images

For the sake of this article we will use the setup from my development pc.

The files I mentioned earlier have been modified to use this folder structure,
if yours differs then do a global search and replace on the two files replacing DotNetNuke
with whatever your root DNN folder is called.

Step 2

Lightbox 2 uses the Prototype Framework and Scriptaculous Effects Library. You will need to include these three Javascript files in your header. You also need to include the Lightbox CSS file.

Take your List View template which displays your photos/images and make the following modifications and add the following scriptblock at the top of your template:

<xmod:scriptblock blocktype="HeadScript" registeronce="true" scriptid="logicscript" />
<link rel="stylesheet" href="/dotnetnuke/lightbox/css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="/dotnetnuke/lightbox/js/prototype.js"></script>
<script type="text/javascript" src="/dotnetnuke/lightbox/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="/dotnetnuke/lightbox/js/lightbox.js"></script>
<link rel="stylesheet" href="/dotnetnuke/hoverbox.css" type="text/css" media="screen, projection" />
</xmod:scriptblock>

Step 3

Then in your template where you specify the IMG tag to display your images you must change this be a link, in my example the list view displays the thumbnail and links to the full size image.

<column header="Image"><img alt="your image" src="{XMOD_UploadDirectory}thm_<xmod:field name="FileUpload" />" /></column>

Becomes

<column header="Image"><a href="{XMOD_UploadDirectory}<xmod:field name="FileUpload" />" ><img alt="click image to display" src="{XMOD_UploadDirectory}thm_<xmod:field name="FileUpload" />" /></a></column>

Then simply add a rel="lightbox" attribute to the link tag to activate the lightbox.

<column header="Image"><a href="{XMOD_UploadDirectory}<xmod:field name="FileUpload" />" rel="lightbox"><img alt="click image to display" src="{XMOD_UploadDirectory}thm_<xmod:field name="FileUpload" />" /></a></column>

Optional: Use the title attribute if you want to show a caption in the bottom white border.

<column header="Image"><a href="{XMOD_UploadDirectory}<xmod:field name="FileUpload" />" rel="lightbox" title="<xmod:field name="txtMessage" />"><img alt="click image to display" src="{XMOD_UploadDirectory}thm_<xmod:field name="FileUpload" />" /></a></column>

If you have a set of related images that you would like to group (i.e. enable the prev & next functionality), include a group name between square brackets in the rel attribute.
e.g.
<column header="Image"><a href="{XMOD_UploadDirectory}<xmod:field name="FileUpload" />" rel="lightbox[group]" title="<xmod:field name="txtMessage" />"><img alt="click image to display" src="{XMOD_UploadDirectory}thm_<xmod:field name="FileUpload" />" /></a></column>

There you go a simple install and a couple of script changes and hey presto XMod and Lightbox in perfect harmony.

You can see a demo here