Search - Articles
DevASP.NET for ASP.NET, VB.NET, XML and C# (C-Sharp) Developers Tuesday, March 03, 2009
Dev Articles
Search Directory
ASP.NET
VB.Net
C-Sharp
SQL Server
 

How to use jQuery Lightbox in ASP.NET

Author: Rachel Nicole
Download Source Code : 1416_LightBoxJQuery.zip

I will show how to use jQuery Lightbox plugin in this article.

 

 
jQuery is the JavaScript library that is designed to simplify client side scripting. It has many exciting features to make websites attractive, enjoyable and easy to use. Lightbox is one of the cool features available in jQuery. It is very simple and elegant feature that makes our website very attractive. Lightbox is very popular and important addition in jQuery. It can transfer any simple image gallery to a very attractive gallery. Lightbox is a plugin and we don’t need to write extra code to implement its functionality. However you can define your own style sheet instead of using style sheet available with Lightbox plugin. You can use Lightbox with any link tag by applying lightbox as class attribute. You have to include jQuery, jQuery Lightbox and jQuery Lightbox css files to implement all Lightbox plugin functionality.

 

  1. Open Visual Studio 2010
  2. File > New > Web Site
  3. Visual Basic or Visual C# > ASP.NET Empty Web Site
  4. Right click on web site > Add New Item > Web Form
  5. Right click on website > New Folder (Name the folder as “Scripts”). Download jQuery and jQuery lightbox plug-in and include below files in this folder.

    jquery-1.7.2.min.js
    jquery.lightbox-0.5.min.js
     
  6. When you download jQuery lightbox, it includes “images” and “css” folders. Copy these folders in your website.
  7. Right click on website > New Folder (Name the folder as “MyImages”). Include images in this folder. No limit for number of images.
  8. Add <script> tags in between <head> tag of Default.aspx page. You have to give reference for jQuery and jQuery lightbox plug-in as below.

    <script type="text/javascript" src="Scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="Scripts/jquery.lightbox-0.5.min.js"></script>
     
  9. Add a <link> tag in between <head> tag and give reference for css file as below.

    <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
     
  10. Add another <script> tag in between <head> tag and write code below in it.

    <script type="text/javascript">
        $(function () {
            $('#images a').lightBox();
        });
    </script>
     
  11. Write code below in between <form> tag

    <div id="images">
        <a href="MyImages/Hydrangeas.jpg" class="lightbox" rel="group">
        <img src="MyImages/Hydrangeas.jpg" width="150" height="150" alt="" />
        </a>
        <a href="MyImages/Lighthouse.jpg" class="lightbox" rel="group">
        <img src="MyImages/Lighthouse.jpg" width="150" height="150" alt="" />
        </a>
        <a href="MyImages/Tulips.jpg" class="lightbox" rel="group">
        <img src="MyImages/Tulips.jpg" width="150" height="150" alt="" />
        </a>
    </div>

    I have provided path of my images in “href” attribute of anchor tags and “src” attribute of image tags. We must have to provide “class” attribute as “lightbox” to implement jQuery lightbox. We have to add “rel” attribute to create relationship in anchor tags and lightbox.

  12. Now you can see it in your browser.
   
Add Article Comment:
Name :
Email Address :
   
Comments :
 
   
<< How to implement Remember Me option in login page in ASP.NET

Disclaimer - Privacy
© 2002-2017 DevASP.net