Creating a Lightbox Gallery

I received a question on how to create a lightbox gallery, so I decided to post step-by-step instructions. Before that, let me explain what's a lightbox gallery? A lightbox gallery is a group of pictures uploaded that acts as a slide show when activated. It's a useful tool for photographers/Etsy members who use a lot of images to potray their photos/products. That's why I frequently visit their sites as I've a great respect for them. They're so talented and gifted!!!

Finally, a lightbox gallery is a great solution. It will do the following:-
a- Visually attractive
b- Working inside a frame
c- Easy to organize photos/images and share them with others.

Login to your Dashboard> Layout> Edit Html. Check the Widget Expand Template check box. Copy and paste these lines into your CSS section. The preferred place to add CSS code is right in front of the closing b:skin tag

#myGallery{
width: 200px !important;
height: 100px !important;
overflow: hidden;
}


Then, you need to copy the scripts source code below and paste between the closing b:skin tag and the closing head tag.
<script src='http://x5x5x1xx.googlepages.com/mootools.v1.11.js' type='text/javascript'/>
<script src='http://x5x5x1xx.googlepages.com/jd.gallery.js' type='text/javascript'/>
<link href='http://x5x5x1xx.googlepages.com/jd.gallery.css' media='screen' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true,
showArrows: false,
showCarousel: false
});
}
window.addEvent('domready', startGallery);
</script>


Here comes the tricky part. You need to specify the div properties in your template. Failure to do so, no image will be displayed. For this example, let say we place the code in the sidebar. Copy and paste the following code.
<div id="myGallery">
<div class="imageElement">
<a class="open" href="POST LINK"></a>
<img src="YOUR IMAGE DATA URL" class="full"/> <h3>YOUR IMAGE TITLE</h3>
<p>YOUR IMAGE DESCRIPTION </p>
</div>
</div>

Note - If you would like to add more images, copy and paste the above code repeatedly.