michielpost.nl

Silverlight PhotoBrowser

03-07-2008

I created the Silverlight PhotoBrowser to make it really easy to show your photo's in a gallery on the web.
All you have to do is install this PhotoBrowser ASP.Net solution on your server, and upload your images to the "images" directory. The application will take care of the rest.

 It will generate a list of thumbnail images, and the option to select the image to view it full screen.

This is how it's done:

  1. You - Open the Silverlight PhotoBrowser
  2. PhotoBrowser - Requests RSS feed with Photo's from ImageRSS.ashx
  3. ImageRSS.ashx - Gives an RSS feed of all image file names in the image directory
  4. PhotoBrowser - Calls the thumbnail maker to give thumbnails of the images
  5. CreateThumbnail.ashx - Gives Thumbnail images back to Silverlight PhotoBrowser
  6. PhotoBrowser - Shows thumbnail images

When you click on an image, the Photo Browser will load the full image, located in the image directory.

Why is it done this way?
Silverlight runs client side. So Silverlight does not have permission to find out what images there are in your image directory. The ImageRSS runs server side and has permission to do that.

Why a thumbnail creator?
Loading all the full images in Silverlight takes a lot of bandwith and memory, which makes things very slow. Loading only small thumbnail images is a lot faster.

To view this sample, http://www.michielpost.nl/PhotoBrowser/PhotoBrowserTestPage.aspx

Download the sourcecode: http://www.michielpost.nl/PhotoBrowser/PhotoBrowserWebSource.zip

NOTE: Make sure to open PhotoBrowserTestPage.aspx via the build in visual studio webserver.

The basic layout of this application came from Will Allan's Blog: http://willys-web.blogspot.com/2008/03/creating-silverlight-image-viewer.html

 

Comments


Anthony Grace 06-07-2008
This looks really cool! Quick question: why are we using an RSS feed to get the images?


Michiel Post 11-07-2008
@Anthony Grace | I want to be flexible with the images that are being showed. So I don't want to define them somewhere, just place them in a directory and let it work. To achieve this, I need server side code to give me the content of the directory (on the server). Silverlight runs on the client and does not have the right to list all the files in a directory on the server.


BF 19-08-2008
I see that in the ImageRSS.ashx there are options for title, description, etc... Where do they read from and write to in order to add them to the photo gallery? Thanks, great application!


T.O. 20-08-2008
is there a way to change the background color


Michiel 24-08-2008
@T.O., you can change the background color and other layout elements in the XAML file.


MenS 04-09-2008
I liked your presentation and was trying to run the source it runs without any issues but fails to bring up images. I am on Windows Vista Ultimate, with vs2008 professional. Any Idea why Images cant be seen.


MenS 04-09-2008
Ignore the previous post. The startup parameters were somehow mixed up and a study of GetAbsoluteUrl method (while debugging) resolved my issue. Great Work. This is the first Silverlight Project source I am looking into. Thank you for the same.


Rick 08-09-2008
Very nice sample. I have same issue as 04-09-2008 post "runs without any issues but fails to bring up images." I, however, have not been able to figure the answer. Any help would be appreciated. Thank You.


Michiel 09-09-2008
@Rick | Make sure to open PhotoBrowserTestPage.aspx via the build in visual studio webserver. If that doesn't help, you can test the RSS feed by calling ImageRSS.ashx and test the thumbnail creation by calling: CreateThumbNail.ashx?file=images/Creek.jpg


Rick 11-09-2008
Michiel. That did the trick. Thank you very much. Again, nice app.


Mike 26-09-2008
Could the code be modified to allow a times scroll through of the images?


Michiel 29-09-2008
@Mike | Yes, you can do that. Just add a timer and call the code that is under the Next button.


Rob 09-10-2008
Nice app Michiel. I'm running SL2 RC0 and am having trouble getting this running. Any tips on porting to RC0?


Michiel 10-10-2008
@Rob | I upgraded the source to Silveright RC0 but didn't get any errors while porting. It should run without problems on Silverlight RC0.


Hema 07-11-2008
Hi Michiel, nice app, but im not able to see any images when i open Test.html page, instead when i debug with script editor im getting following error... Microsoft JScript runtime error: Unhandled Error in Silverlight 2 Application [Async_ExceptionOccurred] Arguments: Debugging resource strings are unavailable. Often the key and arguments provide sufficient information to diagnose the problem. See http://go.microsoft.com/fwlink/?linkid=106663&Version=2.0.31005.0&File=System.dll&Key=Async_ExceptionOccurred at System.ComponentModel.AsyncCompletedEventArgs.RaiseExceptionIfNecessary() at System.Net.OpenReadCompletedEventArgs.get_Result() at PhotoBrowser.Page.wc_OpenReadCompleted(Object sender, OpenReadCompletedEventArgs e) at System.Net.WebClient.OnOpenReadCompleted(OpenReadCompletedEventArgs e) at System.Net.WebClient.OpenReadOperationCompleted(Object arg)


Michiel 10-12-2008
@Hema, Make sure to open PhotoBrowserTestPage.aspx via the build in visual studio webserver. Not the local file system! The URL should not be C:\SilverlightPhotoBrowser\etc, that's not going to work.


julian munford 04-01-2009
I've been trying to debug this project but whenever I try I always get the exception: {System.NotSupportedException: The URI prefix is not recognized. at System.Net.WebRequest.Create(Uri requestUri) at System.Net.WebClient.GetWebRequest(Uri address) at System.Net.WebClient.OpenReadAsync(Uri address, Object userToken)} on the line: wc.OpenReadAsync(new Uri(GetAbsoluteUrl("ImageRSS.ashx"), UriKind.Absolute)); Can anyone give me any pointers as to where I'm going wrong please? Cheers Jules


Michiel 08-01-2009
@julian munford, also for you, make sure to open the ASPX page using the build in webserver, not the local file system! The URL should not be C:\SilverlightPhotoBrowser\etc, that's not going to work.


Richard Jones 24-01-2009
When I load PhotoBrowser in VS 2008 and run file PhotoBrowserTestPage.aspx I get this error. Server Error in NewPhotoBrowser Application. Configuration Error Description: An error occurred during the processing of a configuration file required to service this request. Please review the specific error details below and modify your configuration file appropriately. Parser Error Message: It is an error to use a section registered as allowDefinition MachineToApplication' beyond application level. This error can be caused by a virtual directory not being configured as an application in IIS. Source Error: Line 44: ASP.NET to identify an incoming user. Line 45: --> Line 46: <authentication mode="Windows"/> Line 47: <!-- Line 48: The <customErrors> section enables configuration Source File: D:\Documents and Settings\Richard\Desktop\NewPhotoBrowser\photobrowserwebsource\photobrowserweb\web.config Line: 46 How Do I fix it?


David 01-03-2009
Michiel, Excellant job. Everything worked effortlessly. One quick question regarding background color. What is the name of XAML file and where is it located. Thanks


David 01-03-2009
Michiel, Disregard my previous message i found the XAML file :). Thanks


Ron Rogers 29-03-2009
Hey Michael, thanks for posting this. How do you install it on your server? I have a site and I would like to position this on one of the pages in the site. Please help. Ron


Michiel 31-03-2009
@Ron Rogers, you can easily integrate this in an existing ASP.NET application. Just upload the files to IIS. First test your solution in Visual Studio :)


Nicholas Sadowy 17-05-2009
Excellent app. Any thoughts on enhancing it to be able to read subfolders as albums, and select which album you are viewing? Nick


Jim M 20-05-2009
Hi Michiel, This is really nice. I want to add a Silverlight Photo Browser to my ASP.NET web site in a new page on the site. I have tested several of them and yours is the only one that does not give me an error. I added ScriptManager and Silverlight controls to the page and first tested with a really basic Silverlight application and it displays correctly but it is not looking for jpg files. My menu control still works so I can still navigate even though I have a page with Silverlight. When I test your PhotoBrowser before adding it to my web I can view all the pictures correctly. It works perfectly. But when I add it to my ASP.NET page it displays ok except the pictures are not visible. I would like to fully test it before uploading to my server if possible. I added the pictures to my images folder in my web site but this doesn’t work. Is there a way to get the pictures visible in a test prior to uploading to my server? I looked through your code and there might be a minor modification that might solve this problem. Maybe to point to the images in my ASP.NET web app. I’m also thinking that using the images folder could be a problem since I have other stuff in there. I could easily put my other stuff in another folder or perhaps the following will work. In InagesRSS.aslx change to ‘string _directory = “images2/”; and create an images2 folder for my pictures. Thanks for sharing this excellent Silverlight project. Jim


fergc 07-06-2009
Hi Michiel, When I try to run it I get a TargetInvocationException in the wc_OpenReadCompleted method (Result 'e.Result' threw an exception of type 'System.Reflection.TargetInvocationException') I'm new to this, can you help me?


Martin Maat 01-07-2009
fergc wrote: "When I try to run it I get a TargetInvocationException in the wc_OpenReadCompleted method (Result 'e.Result' threw an exception of type 'System.Reflection.TargetInvocationException')" Me too. I can put return at the beginning of the method and then it runs without error (showing an empty surface since no thumbnails are created). I have Silverlight 2.0 SDK and tools installed, VS2008.


Srdjan 10-10-2009
Great app Michael.


Koen 12-01-2010
nice application, clear & clean code, I like it, thanks a lot! :-)


peter 03-02-2010
Great app, thanks. I did find a couple of issues when trying to deploy to IIS on W2K3. For the web site in IIS: 1. Make sure ASP 2 is set 2. Add a MIME type of .xap application/x-silverlight-app.


Marc 17-04-2010
Hi Michiel, Any thoughts about the sub directories? I can't seem to find a way to solve this. I'm not a programmer but I can do some writing in visual basic but unfortunatly this isn't in VSB. A bit of help would be nice if possible. /Regards Marc


Richard McSharry 01-04-2011
Hi Michiel, I upgraded your solution to SL4 and posted about it if you want to update your code: http://www.electricscribes.com/blog/post/2011/04/01/Silverlight-Slideshow.aspx Thanks for a great sample! Regards Richard


Raj 25-04-2011
How to display first image without click? or How to display any random image in top image control. Thanks for great sample! Regards Raj


New Comment

Name
E-mail (not published)
Comment
Enter the code shown: