listview with imagebutton thumbnails in asp.net

Question

I am trying to implement an image gallery in ASP.NET./c#

I am displaying 6 thumbnails on my page. To display this I have decided to use ListView with an ItemTemplate containing an ImageButton control in it for each thumbnail that I would be displaying. I have a few questions:

1. Am I choosing the right controls? (there are options like DataList, repeater, etc)
2. I am reading from a sql server 2008 database that has image as varbinary type field. If I want to display this binary data as images in my thumnails then how should I go about this?
3. Ultimately I want to be able to display a large image when a thumbnail is clicked upon. How will I copy the URL of the thumbnail that is clicked?
4. Does anyone have a reference/demo/sample that I could use as a guide?

PLEASE remember that images are "binary" data in sql server and NOT files on a file system.

I can write the sql logic to pick the correct images in my sqldatareader or may be use a dataset instead. I want to proceed with my asp.net controls and its code behind where I am having these initial design issues like what controls to be used, how to add dynamically, etc.

Thanks.

Answer 1

1. You may also use Repeater but ListView is more flexible from layout perspective (not to mention paging support). However, ImageButton for displaying thumbnail is not a good choice, I will suggest using image control (or img tag) embedded in hyperlink (or achor tag) for the same.

2. You have to save image data from database to file system and then give those as URLs. Or you can write an http handler (aspx/ashx) that will stream image data from database and you will use handler path as URL for images. In either approach, you should use cache headers for better performance. From all things considered, I would tend to go with first approach for its simplicity.

3. Generally, you use markup such as

    <a href="actual image URL" target="_blank" class="aLink">
      <img src="thumbnail URL" alt="Click to see image" />
    </a>
   

   So anchor tag has path to actual Image url. Now, you have lot of java-script libraries (collectively called as lightbox) that you can use to show image gallary - see http://leandrovieira.com/projects/jquery/lightbox/, http://colorpowered.com/colorbox/, http://fancybox.net/ etc.

4. Above libraries will have demo/examples for generating gallery from client side. All you have to do from server side is to generate mark-up (html) illustrated in example - which is really simple using repeater/listview and data-binding syntax.