Click here to Skip to main content
Click here to Skip to main content

Photo album browsing control

, 2 Dec 2004
Rate this:
Please Sign up or sign in to vote.
A web control that allows photo album browsing

Introduction

This control allows someone to include a photo album browser on their website with the minimum of fuss. It is implemented as a web control that can be sited within a parent ASP.NET page. It automatically generates a treeview of navigable albums, the album pages themselves and all the navigation elements. New albums can be uploaded by just uploading a directory containing the source images to a specific folder on the server.

To see a live running example go to http://www.codefresh.com/PhotoBrowser.aspx

Background

Previous to writing this web control I was using JAlbum to create static HTML pages for all the photos that I wanted to host on my website. Eventually the number of photos I was putting online was becoming unmanageable and I was finding it a chore to write the HMTL to link all of the albums together. I therefore decided to write an application that allowed me to simply upload the photos to the server and get ASP.NET to do the hard work of producing the pages. My first attempt worked but was a bit clunky due to me not knowing ASP.NET particularly well. What is presented here is my second version which I think is much improved. The control will render the album treeview, which is based on the file structure under a specified ‘photos’ directory. As the user navigates around the photos, the web control produces thumbnail pages for each album. This can be navigated through via the usual forward and back buttons. The user can examine photos in greater detail by clicking on each thumbnail, at which point they are also able to add comments.

Using the code

The code is comprised of three Visual Studio 2003 projects

  • The PhotoBrowser project is an ASP.NET web application that contains the control that renders the HTML.
  • The PhotoBrowserLibrary class project that encapsulates the photo directory file structure.
  • And the squishyTREE project which contains the treeview control that is used to display the album list. Note that this project is copy of the one released by squishyWARE, modified by adding a parent property to the TreeNode class.

In order to use the photo browser in your web application you'll need to perform the following steps:

  1. Import the PhotoBrowser.ascx file and the PhotoBrowserRes directory. PhotoBrowser.ascx is the web control itself and the PhotoBrowserRes directory contains the images it requires.
  2. Add a reference to the PhotoBrowserLibrary DLL and the squishyTREE DLL.
  3. Add the following line to you page, just before the closing </head> tag:.
    <script type="text/javascript" src="PhotoBrowserRes/overlib/overlib.js">
    <!-- overLIB (c) Erik Bosrup --></script>
  4. Add the following line just after the <body> tag.
    <div id="overDiv" style="position:absolute; visibility:hidden; 
    z-index:1000;"></div>
Then simply drag the web control on to your .aspx page, as shown below.

Points of Interest

The treeview is implemented using the excellent squishyTREE control from http://www.squishyweb.com. The comment popups were implemented using the excellent overLib. I used some code from here to help me sort out getting the date the photo was taken from the embedded EXIF data (apologies if this is the wrong link but I can’t honestly remember where it came from).

Popups by overLIB!

Known Issues

The application currently only detects changes in the photos contained within a directory when the number stored in the database and the number on the file system differs. This is for performance reasons. At some point in the future I would like to make this cleverer so that it can detect when an image has been 'touched' (e.g. its size changes). There is also no way to use a hyperlink to externally link to a single album (although you can use a link for individual photos). Lastly, I know there are a number of issues with the attached CSS. This CSS was *obtained* from JAlbum and I haven't had a chance to strip it down to the bare minimum.

I welcome any feedback or comments.

History

  • 1.3 (2 Dec 2004)
    • Implemented the comment popups using overLib.

  • 1.2 (29 Nov 2004)
    • Removed the Tooltip JavaScript includes from the source archive due to not being aware of the licensing restrictions.

  • 1.1 (26 Nov 2004)
    • Updated to handle ampersands in photo filenames and for the source archive to include the squishyTREE control project.

  • 1.0 (24 Nov 2004)
    • Initial release

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

n_1_c_k
Web Developer
United Kingdom United Kingdom
I'm currently working in London working on a variety of technologies.

Comments and Discussions

 
GeneralMy vote of 2 PinmemberMd. Touhidul Alam Shuvo29-Jun-11 18:19 
GeneralNice Article Pinmembertempsh10-Mar-11 7:54 
GeneralLong time user... applying a thin film of silver Pinmemberdigger695-Nov-09 15:07 
Questionwhy i get two error when run this project?? PinmemberCampbell071918-May-09 7:36 
GeneralPerformance Solution - Use the 'modified' file attribute to the thumbnail image file name. Pinmemberwashdi19-Jul-08 7:43 
GeneralPhoto Album Pinmemberyaip2-Oct-07 14:45 
GeneralHELP PinmemberKKK7111-Jun-07 5:44 
GeneralProblems in IE Pinmembermelonhed33-Feb-07 15:19 
QuestionAdding references Pinmemberbschune9-Jan-07 6:42 
GeneralCould not use ''; file already in use. Error [modified] Pinmembermetalguy907-Dec-06 4:56 
GeneralRe: Could not use ''; file already in use. Error Pinmembern_1_c_k7-Dec-06 5:01 
GeneralRe: Could not use ''; file already in use. Error [modified] Pinmembermetalguy907-Dec-06 5:55 
GeneralRe: Could not use ''; file already in use. Error Pinmembermetalguy907-Dec-06 8:25 
QuestionNo Display on my Screen PinmemberMichram3-Oct-06 6:17 
GeneralDatabase permission Problem Pinmemberejazan2-May-06 8:17 
When ever I try to access the Photo Album, I got the following problem:
 
Error Message:
 
Server Error in '/PhotoBrowser' Application.
Could not use ''; file already in use ( By '' means PhotoServer.mdb file).
Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.
 
Exception Details: System.Data.OleDb.OleDbException: Could not use ''; file already in use.
 
Source Error:
 
Line 87: string mappedPhotosPath = request.MapPath(photosPath) + "photos";
Line 88:
Line 89: dirBrowser = new DirectoryBrowser(mappedPhotosPath);
Line 90:
Line 91: }
 

Source File: c:\inetpub\wwwroot\photobrowser\photobrowser.ascx.cs Line: 89
 
Stack Trace:
 
[OleDbException (0x80004005): Could not use ''; file already in use.]
System.Data.OleDb.OleDbConnection.ProcessResults(Int32 hr)
System.Data.OleDb.OleDbConnection.InitializeProvider()
System.Data.OleDb.OleDbConnection.Open()
Codefresh.PhotoBrowserLibrary.DirectoryBrowser.OpenDatabaseConnection(String photosPhysicalPath)
Codefresh.PhotoBrowserLibrary.DirectoryBrowser..ctor(String photosPhysicalPath)
Codefresh.PhotosBrowser.PhotoBrowser.Page_Load(Object sender, EventArgs e) in c:\inetpub\wwwroot\photobrowser\photobrowser.ascx.cs:89
System.Web.UI.Control.OnLoad(EventArgs e)
System.Web.UI.Control.LoadRecursive()
System.Web.UI.Control.LoadRecursive()
System.Web.UI.Control.LoadRecursive()
System.Web.UI.Page.ProcessRequestMain()
 
Error Message End:
 
I think it is due to fact that Connection is open only once and not closed and when other user try to access it, Photoalbum throws error that data is already in use.
 
Please help me out of this problem
 
Thanks.
Ejaz
 

-- modified at 20:27 Tuesday 2nd May, 2006
GeneralPhotobrowser doesn't start Pinmemberfrans.douven24-Mar-06 3:25 
GeneralRe: Photobrowser doesn't start Pinmembern_1_c_k24-Mar-06 3:32 
GeneralRe: Photobrowser doesn't start Pinmemberfrans.douven24-Mar-06 4:21 
AnswerRe: Problem in the casting Pinmembern_1_c_k22-Mar-06 8:58 
QuestionHow to use this in ASP.NET 2.0 Pinmemberyaip23-Jan-06 11:12 
AnswerRe: How to use this in ASP.NET 2.0 Pinmemberepf197525-Jan-06 8:26 
AnswerRe: How to use this in ASP.NET 2.0 Pinmembern_1_c_k30-Jan-06 10:13 
GeneralRe: How to use this in ASP.NET 2.0 Pinmemberepf19752-Feb-06 17:33 
GeneralRe: How to use this in ASP.NET 2.0 Pinmembern_1_c_k23-Feb-06 10:33 
GeneralVery Good. PinmemberBrian.Xue3-Jan-06 16:00 

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.141220.1 | Last Updated 2 Dec 2004
Article Copyright 2004 by n_1_c_k
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid