HTML5 Image Gallery: 25 Projects in 25 Days

As part of the LEAD Technologies 25th anniversary, we are creating 25 projects in 25 days to celebrate LEAD’s depth of features and ease of use. Today’s project comes from Justin.

What it Does

This ASP.NET C# application will display a thumbnail image gallery using LEADTOOLS Version 19.

Features Used

• HTML5 Viewer

Development Progress Journal

Hi, my name is Justin and I’m going to write a simple image gallery application in ASP.NET.  I’ve never created an ASP.NET application from scratch before.

I’ll create thumbnails for a directory of images in code-behind C#. Then, I’ll display them in an HTML5 viewer.

I’ll start with the back end. I’ll be generating image thumbnails with RasterImage.CreateThumbnail. I’ll just need to loop over images in a folder.

Documentation: RasterImage.CreateThumbnail

Done generating thumbnails. I’m going to make this a static WebMethod and call it on app startup. This took about 15 minutes. On to the front end…

I’ll just start with a basic viewer <div> in my markup and then clean up the UI later. For the gallery view, I’ll l be using an ImageViewerVerticalViewLayout:

Documentation: ImageViewerVerticalViewLayout

I’ve loaded all of the image thumbnails as individual ImageViewerItems. With ImageViewerVerticalViewLayout.Columns = 0, the gallery grid is automatically dynamic based on the window width. Sweet!

When I click on a thumbnail, I want to open the full resolution image that corresponds to the item clicked. To do so, I’ll add an ImageViewerSelectionMode to the viewer’s InteractiveModes collection.

I’ve added a handler for item selection. In each thumbnail’s ImageViewerItem, I add the URL to the full resolution image as the ImageViewerItem's tag, so switching to the full resolution images is simple.

When viewing a full resolution image, I switch to an ImageViewerSingleViewLayout. Easy!

Now to clean up the UI: Adding a header and footer, along with a back button to go back from the full resolution image. I’ll need some window calculation boilerplate because of this new footer. Grr.

All done. In all, this only took 5 hours to get a nice looking gallery going. With how finicky CSS can be, making such a dynamic UI from scratch would’ve taken much longer.

Download the Project

The source code for this sample project can be downloaded from here.