This tutorial will show you how to properly set up a Lightbox Gallery which will load automatically when the page is loaded. This can be done with a single lightbox image or with an entire lightbox gallery. Lightbox 2 is the most recent version which comes with many visual enhancements to improve the look of your image gallery.

How to Make A Lightbox Gallery on Pageload

Download the necessary Javascript and CSS files from the Lightbox 2 website here: http://lokeshdhakar.com/projects/lightbox2/

Place these files into the corresponding areas within your website so that we can reference them with the code below.

Insert the code below into your page header (if using DotNetNuke, you can insert this into an HTML module. Note: you may have to disable the 'remove Javascript" option from the HTML module settings).

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script src="/js/jquery-1.7.2.min.js"></script>
<script src="/js/lightbox.js"></script>

This is the script you use to make the lightbox gallery load automatically right when the page is loaded: (Note: #popup is the ID of your a tag, this can be changed to anything you would like as long as they match)

<script type="text/javascript">
//<![CDATA[
<!-- show Lightbox Image Details instantly on page load -->
$(document).ready(function()
{
$('#popup').trigger('click');
});
//]]>
</script>

And finally, you need to activate the lightbox gallery with the code below. 

<a rel="lightbox" href="http://websitename/images/Image1.jpg" id="popup">Image1</a>

rel="lightbox" calls the script for the lightbox. href="YourImage" is the path to the image you want to open. And finally, id="popup" references the script above telling it to open the lightbox image on pageload.