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.
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.
Done generating thumbnails. I’m going to make this a static
WebMethodand 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
I’ve loaded all of the image thumbnails as individual
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
ImageViewerSelectionModeto the viewer’s
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'stag, so switching to the full resolution images is simple.
When viewing a full resolution image, I switch to an
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.