Using jQuery LightBox Plugin with Cuyahoga
Here are the steps you have to perform to use jQuery LighBox Plugin with a Cuyahoga 1.5.x installation.
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'
- 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(); // Select all links with lightbox class }); </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