Introduction

This tutorial will go over how to add a ASPNET lightbox effect to your image gallery using the Telerik Controls toolset. The Telerik RadControl toolset comes loaded with presets for additional functionality to your site and ASP.NET library. It’s very easy to set up and deploy within Visual Studios and can help easily reduce your project workflow time.

We will recreate the image below using some old and new ASP controls to demonstrate how easy it is.

ASP.NET lightbox

Create The Project

First, start by downloading a free trial of the Telerik Toolset and install it on your computer. You can download a free trial at Telerik’s web site.

Once you have the Telerik Toolset downloaded and installed. You can now access all the features using Visual Studios. To use the Telerik framework and tools, open Visual Studio. Instead of starting a new Visual Basic project, locate the Telerik option in the left sidebar. Click on Web, then on C# RadControls Web Site. Keep it simple by naming your site LightBox. Click OK.

Now you’ll be directed through the Telerik start wizard. To keep it simple, we will not worry about the default settings and will not need to change them at this time.

The Code

Visual Studios will generate your new Telerik project along with the Default.aspx. Click on the Default.aspx and you will find the coding framework along with the necessary Telerik controls which are noted as <telerik: …..>

At first this may seem very new and overwhelming but by reading the names of the Telerik Controls (ex. ScriptReference, ScriptManager, RadAjaxManager etc.) They are pretty self explanatory what their functions are and what they are referencing to. Next lets add the HTML which will include the standard Image Controls and Checkbox Controls along with the Telerik DropDownList and LightboxItem Controls. Place this code within the <div>…..</div> that is located right before the end of the </form> tag.

As you can see, the controls operate just like any other ASP.NET controls but has it’s own set of styles that can be changed to get the desired functionality and theme you are looking for.

Additional Coding

Now that we have the markup set, we will now place some additional styling along with some added functionality (side checkboxes) using javascript.

Here is the additional CSS styles. You will need to add this between the <style> tags

Now we will add the additional Javascript code to make the checkboxes functional so you can see the flexibility of the Telerik Controls. Add this code between the <script> tags.

Wrapping It Up

The Telerik controls make it easier to create functional websites quickly while still keeping modern UI/UX in mind. It is a great toolset to have in your palette and can open up creative options in your workflow. With over 70+ controls for ASP.NET, It’s hard to pass using such a great tool. If you would like the complete documentation on how to use all the included controls, you can find them at their website at http://www.telerik.com/help/aspnet-ajax/introduction.html