Introduction

In this tutorial, we will go over how to add an image gallery with a lightbox effect to view larger images. We will use be using a really great toolset known as the Telerik RadControl that comes loaded with presets to add functionality to your site. All controls come with the proper files and easy to setup projects so you can start using the tools and complete your projects faster than ever.

Here is an example of what we will be making along with Dynamic controls to adjust how your lightbox is viewed.

ASP.NET lightbox

Create The Project

For this project we’re using the Telerik RadControls toolset. You can download a free trial at Telerik’s web site.

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

Starting

Now you’ll be directed through the Telerik start wizard. All of the default settings are fine for the purpose of this tutorial, so don’t worry about changing any of them.

The Code

Visual Studios will generate your new Telerik project along with the Default.aspx. Click on the Default.aspx and you will find your site’s beginning code 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