Click here to Skip to main content
14,297,239 members

Image Galleries using ASP.NET

Rate this:
1.33 (32 votes)
Please Sign up or sign in to vote.
1.33 (32 votes)
29 Apr 2003
How to do Image Galleries using ASP.NET

Introduction

This article presents an effective and organized way to display mass amounts of images on websites.

This article assumes:

  • You have experience with ASP.NET

Usage

Many times, with large membership based websites, images are collected and the pages are slow to load or poorly organized. This creates frustration for the users and for the webmaster trying to maintain it. Using thumbnails for selection provides the users with a preview of the image that they may choose to view. Due to the small size of thumbnails, it is quicker to load, than to have all the images full size, to load at once.

Design

The design of the Image Gallery is intuitive. It displays the picture above the selection, and centers it. The design of the Image Gallery is borrowed from Windows XP's "My Pictures" filmstrip view.

Data Storage

The data, image name, category, year, etc., are all stored within an XML file. This prevents the code from searching the directories every time it is accessed. The first table of the XML file is the table that holds all the section/category information. With this Image Gallery, all images are stored in: Images/section_name/type_year/images/. This folder structure organizes all the images into easily manageable sections.

The Code

The code is divided into three major parts: the section selection page, image submission, and display of the images.

Image Submission

The image submission page contains a different form type. Because it is accepting file data, it should be set to multipart/form-data. In addition, the control that allows the user to select files is the input type of file. All of this is shown in the included example file, SubmitImage.aspx. When the user submits the image, a post back is called to the server. The post back calls the proper function and streams the file to the server, which then creates a scaled thumbnail also. If a new section is to be created, the function creates the folder and appends the XML file with the new folder information.

Section Menu

The Image Section menu is generated from the first table of the XML file. This parses the section data out into a DataTable, which is bound to a DataGrid.

Image Gallery

The Image Gallery accepts query strings, which tell it what table the data is located. This sets the main image as an asp:Image, and creates a Panel, generated by a MetaBuilders control. This also gives members with administrative roles, the ability to remove images.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

(Steven Hicks)n+1
Web Developer
United States United States
A VC++ programmer for 4 years. He also has experence in Basic, C#, ASP.net, HTML, and javascript. Also the webmaster of 404Browser.com and Ltpb.8m.com. He also likes refering to himself in the third person perspective.

Comments and Discussions

 
GeneralMy vote of 1 Pin
anilozay11-Dec-08 4:15
memberanilozay11-Dec-08 4:15 
GeneralDatagrid thumbnail images Pin
skyair29-Jun-08 15:35
memberskyair29-Jun-08 15:35 
GeneralGood effort, but don't download it Pin
JCollum28-Mar-05 10:22
memberJCollum28-Mar-05 10:22 
GeneralI got it to work. Pin
sheppe7-Aug-04 11:45
membersheppe7-Aug-04 11:45 
GeneralYou dork! Pin
shadmoss30-Mar-04 10:54
membershadmoss30-Mar-04 10:54 
GeneralRe: You dork! Pin
(Steven Hicks)n+130-Mar-04 11:07
member(Steven Hicks)n+130-Mar-04 11:07 
GeneralRe: You dork! Pin
[echo]28-Sep-04 21:28
suss[echo]28-Sep-04 21:28 
GeneralRe: You dork! Pin
Christian Graus30-Mar-04 11:21
protectorChristian Graus30-Mar-04 11:21 
GeneralDon't submit sh*t like this Pin
anilvny1-Oct-03 4:15
memberanilvny1-Oct-03 4:15 
GeneralRe: Don't submit sh*t like this Pin
(Steven Hicks)n+11-Oct-03 13:09
member(Steven Hicks)n+11-Oct-03 13:09 
GeneralRe: Don't submit sh*t like this Pin
dbld4-Jan-04 19:02
memberdbld4-Jan-04 19:02 
GeneralRe: Don't submit sh*t like this Pin
(Steven Hicks)n+15-Jan-04 2:40
member(Steven Hicks)n+15-Jan-04 2:40 
GeneralRe: Don't submit sh*t like this Pin
dbld5-Jan-04 2:57
memberdbld5-Jan-04 2:57 
General; Pin
Anonymous16-Sep-03 10:31
memberAnonymous16-Sep-03 10:31 
Generalscript execution error Pin
tyounsi20-May-03 1:48
membertyounsi20-May-03 1:48 
GeneralRe: script execution error Pin
Andy Smith6-Jun-03 13:12
memberAndy Smith6-Jun-03 13:12 
GeneralMissing Things Pin
MikeS1-May-03 6:17
memberMikeS1-May-03 6:17 
GeneralRe: Missing Things Pin
(Steven Hicks)n+13-May-03 9:11
member(Steven Hicks)n+13-May-03 9:11 
GeneralRe: Missing Things Pin
MikeS4-May-03 10:36
memberMikeS4-May-03 10:36 
GeneralRe: Missing Things Pin
(Steven Hicks)n+14-May-03 14:07
member(Steven Hicks)n+14-May-03 14:07 
GeneralScreenshot... Pin
Carl Mercier1-May-03 5:04
memberCarl Mercier1-May-03 5:04 
GeneralYeah Thats right where are the screenshot! Pin
Anonymous6-May-03 17:42
memberAnonymous6-May-03 17:42 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Article
Posted 29 Apr 2003

Stats

182.8K views
4.7K downloads
47 bookmarked