a blog for those who code

Saturday 23 August 2014

Integrate Colorbox in Asp Net Web Application

In this post we will show you, how to integrate Colorbox in your Asp.Net application. What is Colorbox? Colorbox is a lighweight customizable lightbox plugin for jQuery.

Features of Colorbox
1. Supports photos, grouping, slideshow, ajax, inline, and iframed content.
2. Lightweight (10KB of javascript)
3. Appearance is controlled through CSS so it can be restyled
4. Preloads upcoming images in a photo group.

Download latest version of Colorbox from their website and add colorbox folder to the newly created Web Application. You only need images folder, colorbox.css and jquery.colorbox.js file. We have also added Images folder and Scripts folder in my Web Application as shown below.
Add a new page (ColorboxExample.aspx) and add the below code into it

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ColorboxExample.aspx.cs" Inherits="ColorBoxInAspNet.ColorboxExample" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Color Box Example in ASP.NET</title>

    <%--Adding colorbox.css link--%>
    <link href="ColorBox/colorbox.css" rel="stylesheet" type="text/css" />

    <%--Adding jQuery Script--%>
    <script src="Scripts/jquery-2.1.1.min.js" type="text/javascript" ></script>

    <%--Adding Colorbox Script--%>
    <script src="ColorBox/jquery.colorbox.js" type="text/javascript" ></script>

    <%--All the Hyperlinks having rel=example is been sent to colorbox, when clicked SlideShow will start with the popup window width and height as 500px--%>

    <script type="text/javascript">
        $(document).ready(function () {
            $("a[rel='example1']").colorbox({ slideshow: true, width: 500, height: 500 });
    <form id="form1" runat="server">

Add the below code into code behind file (ColorboxExample.aspx.cs)

using System;
using System.IO;
using System.Linq;
using System.Web.UI.WebControls;

namespace ColorBoxInAspNet
    public partial class ColorboxExample : System.Web.UI.Page
        /*In this example we will show single HyperLink, when it is clicked a slideshow will start with all the images in the specified directory*/

        protected void Page_Load(object sender, EventArgs e)
            //Getting all the files from the Directory Images
            string[] filesindirectory = Directory.GetFiles(Server.MapPath("~/Images/"));

            bool firstTime = true; // is used to check if it is first image or not
            var count = 1; // for giving id to hyperlink

            //looping through all the images in the specified directory
            foreach (string item in filesindirectory)
                //Getting the image URL
                string imageUrl = String.Format("~/Images/{0}", System.IO.Path.GetFileName(item));

                //creating new HyperLink
                HyperLink link = new HyperLink();
                link.ID = "hyperLink" + count;
                link.NavigateUrl = imageUrl;

                //Adding rel=example1 attribute to HyperLink
                link.Attributes.Add("rel", "example1");

                /*if it is for the firsttime show the link by giving Text to the link otherwise keep it blank*/

                if (firstTime)
                    link.Text = "View As Slideshow";
                    link.Text = "";

                //Adding HyperLink to the Page Control
                firstTime = false;

In the above code we are taking all the images from a directory and creating HyperLink for all the images. For Slideshow to work you need a collection, and thats why we are adding rel attribute to all the HyperLinks. Now we need to show only single HyperLink in our web page, so at first we are checking that it is for the first time or not. If it is for the first time, we are assigning "Text=View as Slideshow" otherwise we are keeping it blank.
We have used VS 2012 to create the demo project. Source Code : ColorBoxInAspNet.

Please Like and Share the Blog, if you find it interesting and helpful.

No comments:

Post a Comment