Using jQuery LightBox Plugin with Cuyahoga

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

1. Download jQuery LightBox 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 LightBox 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 under images folder of the downloaded jQuery LightBox 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:

   XML-code:

   <link rel="stylesheet" type="text/css" 
   href="../../css/JQueryLightBox/jquery.lightbox-0.5.css" media="screen" /> 
      <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:

    XML-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:

    XML-code:

     <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

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)