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.
- Download jQuery LightBox 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
- '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 - 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 LightBox package to JQueryLightBox folder created in the previous step
- 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.
- 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:
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>
- 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();
});
</script>
- 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>
- See jQuery LightBox in action
CodeProject