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.
- Dowload jQuery LighBox plugin from here.
- In your Cuyahoga installation root browse to js folder and create JQueryLightBox folder under that js folder
- Open jquery.lightbox-0.5.min.js file found in the downloaded package and replace
and save your changes
- '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'
- Copy jquery.js and jquery.lightbox-0.5.min.js files found in the downloaded package to JQueryLightBox folder created in the previous step
- Create a folder named css under your Cuyahoga installation root and create JQueryLightBox folder under that css folder
- Copy jquery.lightbox-0.5.css found under css folder inside the downloaded jQuery LighBox package to JQueryLightBox folder created in the previous step
- 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.
- In your Cuyahoga installation browse to Templates folder and find the ascx file under the current template folder you are using
- In the head section of your ascx file add these lines
- At the end of the ascx file just before the closing of body tag add the following js code
$('a.lightbox').lightBox(); // Select all links with lightbox class
- 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>
- See jQuery LightBox in action