How to integrate jQuery lightbox plugin with Atomic CMS

Lightbox is a very popular jQuery plugin for easy display images in your website. Atomic CMS contains lightbox plugin, and to use it you only need to modify your skin master page to include reference to lightbox css file and reference to lightbox plugin (javascript file).

Reference files

you can include css file this way

<link rel="stylesheet" href="~/content/lightbox/jquery.lightbox-0.5.css" type="text/css" />

and javascript file this way

<script type="text/javascript" 
src="<%=Url.Content("~/scripts/jquery.lightbox-0.5.min.js") %>"></script>

do not forget to include jQuery before lightbox plugin. I prefere to use CDN (content delivery network) from Microsoft.

<script type="text/javascript" 
src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.1.min.js">
</script>

Using lightbox plugin

According to documentation of lightbox, you have to add this javascript code in you page
 $('a.lightbox').lightBox();
 to initialize plugin. Here I prefere to use 'a.lightbox' selector and add class 'lightbox' to all my images.
 
 You can add this initialization line in the master page, and it will be available for all pages in your website, or you can put it in only one page, for example it can be gallery page.
 
In this example I demonstrate how to use it only in one page. Add this code to your page source code editor

<script type="text/javascript">// <![CDATA[
        $(document).ready(function() {
            $('a.lightbox').lightBox();
        });
// ]]></script>

<p><a class="lightbox" href="/uploads/image3.jpg"><img src="/uploads/image3.jpg"
 alt="" width="92" height="69" /></a></p>
<p><a class="lightbox" href="/uploads/image5.jpg"><img src="/uploads/image5.jpg" 
alt="" width="92" height="69" /></a></p>
<p><a class="lightbox" href="/uploads/image3.jpg"><img src="/uploads/image3.jpg" 
alt="" width="92" height="69" /></a></p>

than save page and open this page in browser, you will see than it works.