Using jQuery LightBox Plugin with Cuyahoga

There is already a jQuery LighBox Module for Cuyahoga 1.6 but in my case I have a Cuyahoga 1.5.0 installed with some custom modules and can not use that module. Here are the steps you have to perform to use jQuery LighBox Plugin with a Cuyahoga 1.5.x installation.

1. Dowload jQuery LighBox plugin from here.
2. In your Cuyahoga installation root browse to js folder and create JQueryLightBox folder under that js folder
3. Open jquery.lightbox-0.5.min.js file found in the downloaded package and replace
   
   • 'images/lightbox-ico-loading.gif' with '/images/lightbox-ico-loading.gif'
   • 'images/lightbox-btn-prev.gif' with '/images/lightbox-btn-prev.gif'
   • 'images/lightbox-btn-next.gif' with '/images/lightbox-btn-next.gif' 
   • 'images/lightbox-btn-close.gif'with '/images/lightbox-btn-close.gif'
   • 'images/lightbox-blank.gif' with '/images/lightbox-blank.gif'
   and save your changes
4. Copy jquery.js and jquery.lightbox-0.5.min.js files found in the downloaded package to JQueryLightBox folder created in the previous step
5. Create a folder named css under your Cuyahoga installation root and create JQueryLightBox folder under that css folder
6. Copy jquery.lightbox-0.5.css found under css folder inside the downloaded jQuery LighBox package to JQueryLightBox folder created in the previous step
7. In your Cuyahoga installation root browse to Images folder and copy the image files found in under images folder of the downloaded jQuery LighBox package to the Cuyahoga Images folder.
8. In your Cuyahoga installation browse to Templates folder and find the ascx file under the current template folder you are using
9. In the head section of your ascx file add these lines

   <script type="text/javascript" src="../../js/JQueryLightBox/jquery.js"></script>
   <script type="text/javascript" src="../../js/JQueryLightBox/jquery.lightbox-0.5.min.js"></script> 		

10.  At the end of the ascx file just before the closing of body tag add the following js code

<script type="text/javascript">
 $(function() {
     $('a.lightbox').lightBox(); // Select all links with lightbox class
 });
 </script>




11. Add links to your images to enable jQuery LightBox for your images. Here is the template link 

 <a title="Title here" class="lightbox" href="Link to your original image file"><img border="0" alt="" src="Link to the thumbnail image file if you wish to use thumbnails, if not you can remove this img tag" /></a>

 
12. See jQuery LightBox in action

CodeProject