John Mendez

I learned about this jquery lightbox called ColorBox via SitePoint's "jquery Novice to Ninja" e-book. I created just a small sample on how you can go about integrating it into an asp.net application.

Note: thanks SitePoint for the free e-book because of the world cup.

Anyway, this sample simply uses a DataList to create the elements needed for ColorBox to function properly.  This example provides a thumbnail preview of images before the user clicks on one to start navigating through them via ColorBox.

Note: this code is for demo only and other things could be done to clean it up and style the datalist better.

The concept is that you are filling an object such as a DataSet with the fields you need to make this happen. I will post the manual code I used to test this out in the code behind

First, here is a screenshot of the my Visual Studio solution.  I chose to contain all of the ColorBox files in a folder named ColorBox....go figure right?

Because I did this I had to edit the CSS file to point to the correct path for all images. In my case one of the lines looked like this:

#cboxOverlay{background:url(/ColorBox/images/overlay.png) 0 0 repeat;}

Notice the path in the url(). You will need to change all lines in the CSS file to their respective image paths as needed.

Second, here is the result from the code in the browser.

Next, here is the markup from the ASPX page.

Finally, here is the code behind to manually create the test data

DataSet ds = new DataSet();

protected void Page_Load(object sender, EventArgs e)
{
    BuildDataSet();
    BuildPhotoList();
}

private void BuildDataSet()
{
    ds.Tables.Add("Photos");
    ds.Tables[0].Columns.Add("ImageUrl");
    ds.Tables[0].Columns.Add("Description");

    DataRow dr1 = ds.Tables[0].NewRow();
    dr1["ImageUrl"] = "~/Images/homer.jpg";
    dr1["Description"] = "Your Description Here";            

    DataRow dr2 = ds.Tables[0].NewRow();
    dr2["ImageUrl"] = "~/Images/marylou.jpg";
    dr2["Description"] = "Your Description Here";

    DataRow dr3 = ds.Tables[0].NewRow();
    dr3["ImageUrl"] = "~/Images/ohoopee1.jpg";
    dr3["Description"] = "Your Description Here";

    DataRow dr4 = ds.Tables[0].NewRow();
    dr4["ImageUrl"] = "~/Images/ohoopee2.jpg";
    dr4["Description"] = "Your Description Here";

    DataRow dr5 = ds.Tables[0].NewRow();
    dr5["ImageUrl"] = "~/Images/ohoopee3.jpg";
    dr5["Description"] = "Your Description Here";

    DataRow dr6 = ds.Tables[0].NewRow();
    dr6["ImageUrl"] = "~/Images/homer.jpg";
    dr6["Description"] = "Your Description Here";

    DataRow dr7 = ds.Tables[0].NewRow();
    dr7["ImageUrl"] = "~/Images/marylou.jpg";
    dr7["Description"] = "Your Description Here";

    DataRow dr8 = ds.Tables[0].NewRow();
    dr8["ImageUrl"] = "~/Images/ohoopee1.jpg";
    dr8["Description"] = "Your Description Here";

    DataRow dr9 = ds.Tables[0].NewRow();
    dr9["ImageUrl"] = "~/Images/ohoopee2.jpg";
    dr9["Description"] = "Your Description Here";

    ds.Tables[0].Rows.Add(dr1);
    ds.Tables[0].Rows.Add(dr2);
    ds.Tables[0].Rows.Add(dr3);
    ds.Tables[0].Rows.Add(dr4);
    ds.Tables[0].Rows.Add(dr5);
    ds.Tables[0].Rows.Add(dr6);
    ds.Tables[0].Rows.Add(dr7);
    ds.Tables[0].Rows.Add(dr8);
    ds.Tables[0].Rows.Add(dr9);
}

private void BuildPhotoList()
{
    dlColorBox.DataSource = ds;
    dlColorBox.DataBind();
}

And that's about it. This should get you started with using ColorBox in an asp.net application without having to statically have all of the elements on the page at design time.

Happy Coding!

ASP.NET