Free and Open Source Online Photo Gallery in ASP.NET

GalleryNET - Open Source Photo Gallery for ASP.NET

GalleryNET is a free and open source project for creating online Gallery. It’s written in Microsoft © C# and ASP.NET. It provides a certain level of flexibility for the end-users to customize the display style. The most exciting feature is, once the template and style sheet files are done, the end-users can simply upload additional galleries and image files to the web-server via FTP. Without writing any code, the new files will be automatically populated by the control.

GalleryNET borrows the LGW (Lightbox Gone Wild) idea from Kevin Hale. Thanks a lot to his work. I made some modification based on the comments from that page; also, I added a new feature to re-position the popup.

Sample Code

In order to build a gallery, you need only two files. One is used to display the gallery thumbnails and sub-galleries if it has any; another is used to show the image. IC.Web.GalleryNET.Controls provides two web-controls to accomplish the job respectively.

GalleryGrid
Behind the scene, it is a System.Web.UI.WebControls.DataList. It will read the web.config to load the gallery folder then generate HTML code to display its subfolder (if it has any) and all images' thumbnails. If the thumbnail for the image doesn't exist, the control will automatically generate them.

This control will always turn on Footer and Header, unless you disable Paging and sub-gallery display.

To use this control is very easy. First, you need to declare the namespace in your page:
```
<% @ Register Assembly="IC.Web.GalleryNET" Namespace="IC.Web.GalleryNET.Controls" TagPrefix="cc1" %>
```
Second, you need to place the control and specify the properties based on your preference.
```
   1:  <cc1:GalleryGrid BorderStyle="Dashed" ID="galleryGrid" runat="server" RepeatColumns="3" RepeatDirection="Horizontal" SubFolderDisplayMode="Complex" AllowPaging="true" PageSize="9" CellSpacing="0" CellPadding="3" HorizontalAlign="Center" Width="640" PagerMode="NumericPages" ErrorMessageCssClass="errorMessage">
```
```
   2:       <pagerstyle cssclass="pager" />
```
```
   3:       <subfoldertablestyle cssclass="subfolder" />
```
```
   4:  </cc1:GalleryGrid>
```
```
   5:   
```
In the above example, it defines:
- use “Complex” mode to display the subfolders, which means it will display the subfolder name, a random thumbnail, total number of images, etc. It's a fancy outlook compared to the "simple" style
- allow paging
- each page can display maximum 9 thumbnails
- display numeric page indices
- some css classes for different blocks
In the demo application you download, it will look like this when you open the first page:
GalleryImage
GalleryImage is a CompositeControl. It’s a template-based control, but instead of writing a data bound control, I used a different technique to render data. It’s easier to code and buildup the template and probably more efficient (I didn't test the latter assumption though. ^^). The only drawback is the developer cannot use code-insight of VS.NET; however, I don't think that's a big deal.

To use this control, you need to declare the namespace as above in ASP.NET page first. Then you can place it as follows:
```
   1:  <cc1:GalleryImage ID="galleryImage" runat="server" EnableDrag="true" >
```
```
   2:      <InfoTemplate>
```
```
   3:         <img src="&lt;!--ImageUrl-->" alt="Click to close this image." />
```
```
   4:         <br />
```
```
   5:         File Name: 
```
```
   6:         <br />
```
```
   7:         Size: 
```
```
   8:      </InfoTemplate>
```
```
   9:  </cc1:GalleryImage>
```
The above example is a very simple usage. Because GalleryNET uses an AJAX-based lightbox technique, it will display the image in the same page with the grid. Hence, it will be nice that we can drag the popup image block. The EnableDrag attribute will register the javascript to turn on the dragging. As you can see, the display style is contained within the InfoTemplate block. The code will look up the special HTML comment phrase and replace them to the actual data. In the sample code, it will show an image, then underneath the image, it will display the image file name and its file size.

Live Demonstration

Please visit the live demo application or download it now to learn more.