Click here to Skip to main content
Click here to Skip to main content
Technical Blog

Tagged as

Using jQuery LightBox Plugin with Cuyahoga

, 12 Oct 2009 CPOL
Rate this:
Please Sign up or sign in to vote.
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.

  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

License

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

Share

About the Author

Ali Ozgur
Team Leader PragmaTouch
Turkey Turkey
- Software developer
- Has BS degree in Computer Engineering
- Has MBA degree
- Programmed with C, C++, Delphi, T-SQL and recently C#
- Little educational experience with Prolog
- Feel enthusiasm about NHibernate and LINQ
- Love to develop on Cuyahoga Web Framework
- Developer of PragmaSQL Editor
(Code Project Members Choice Winner for 2009 and 2010)
- Developed JiraTouch and MoodleTouch for iPhone
- PragmaTouch Lead (www.pragmatouch.com)
Follow on   Twitter

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.141223.1 | Last Updated 13 Oct 2009
Article Copyright 2009 by Ali Ozgur
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid