LightBox Image

Home Articles Downloads Links About

Description:
LightBox Image is a FREE WebControl for ASP.NET Developers.

It uses JavaScript and CSS to display images using modal dialogs.

LightBox Image web control is based on the JavaScripts and CSS of Lightbox project by Lokesh Dhakar.

The effect is that on a Lightbox-enabled page, a user can click an image to have it magnified in a Lightbox window, which resizes itself according to the size of the image using a gliding animation.

Downloads:

LightBoxImage Assembly File

Demo WebSite VS 2005 Project

Screenshot:

Installation Files:

To use the LightBox Image WebControl, it is required only the assembly file: LightBoxImage.dll

How to Use:

 

Setup

  1. Copy the LightBox Image control assembly file (LightBoxImage.dll) in the bin folder of your web site.
  2. Make sure that the referenced images are in Images folder in your web site: prevlabel.gifnextlabel.gif, loading.gif and closelabel.gif
  3. Register the assembly file at the web page on which you will use the control:

    <%@ Register assembly="LightBoxImage" namespace="LightBoxImage" tagprefix="lbimage" %>

Activate

  1. Add a LightBox Image element at your page. For example:
    <lbimage:LightBoxImage ID="LightBoxImage5"
    runat="server" ImageUrl="images/Island_thumb.jpg"
    NavigateUrl
    ="images/Island.jpg" Caption="Nature" />
    Optional: Use the Caption property if you want to show a caption.
  2. If you have a set of related images that you would like to group, set a name for the Group property. For example:
    <lbimage:LightBoxImageID="LightBoxImage5"
    runat="server" ImageUrl="images/Island_thumb.jpg"
    NavigateUrl="images/Island.jpg" Caption="Nature"
    Group="Nature" />
  3. If you what to use LightBox JavaScript and CSS as an external file instead of the version  that is build in the control (Lightbox v2.04), you have to include the LightBox JavaScript and CSS files in the header of your page. Then set the LightBox Image properties RenderClientScript and RenderClientCSS to false. For example:

    <script type="text/javascript" src="js/prototype.js"></script>
    <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
    <script type="text/javascript" src="js/lightbox.js"></script>

    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

    <lbimage:LightBoxImage ID="LightBoxImage5"runat="server"Caption="Plant"
    Group="Plant" ImageUrl="images/thumb-1.jpg" NavigateUrl="images/image-1.jpg"  RenderClientCSS="false" RenderClientScript="false"/>

Release Notes:

The LightBox Image WebControl is FREE for use.

THEREFORE, IT IS PROVIDED ON AN "AS IS" AND "AS AVAILABLE" BASIS. TO THE MAXIMUM EXTENT PERMITTED BY LAW, THE AUTHOR EXPRESSLY DISCLAIMS ALL WARRANTIES AND CONDITIONS OF ANY KIND, WHETHER EXPRESS OR IMPLIED, INCLUDING, BUT NOT LIMITED TO THE IMPLIED WARRANTIES AND CONDITIONS OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT.

Version 1.0.0.0 for .NET Framework 2.0 and Visual Studio 2005

For any other issue you can write to the following email: kralevsoftware@gmail.com


Google Ads