New Sample Application Available for ASP.NET AJAX – Image Gallery

Friday, February 24, 2012 by ASP.NET AJAX Team | Comments 4

An image gallery is a popular feature in a website, so we decided to demonstrate how easy and quick it is to build a gallery with the RadControls for ASP.NET AJAX and OpenAccess ORM. The finished app is compatible not only with the latest desktop browsers, but also with the major mobile ones.

Image Gallery Main Page 

The list of images on the main page was a perfect opportunity to show off the new client-side data-binding of our RadListView control. To get the data to the browser, we settled on a WCF Web Service. The same approach is used for populating the images in a RadGrid for an alternate view of the gallery.

Image Gallery Grid View 

Details for each image are displayed in a separate page that allows rating and sharing the picture with your friends through the most popular social networks. This is easily done via the RadRating and RadSocialShare controls, which are designed specifically for such scenarios. A RadRotator above the picture provides an intuitive navigation throughout the gallery. All of these features integrate seamlessly with RadAjax for a lightning fast user experience.

Image Gallery Details Page 

You can add your own images to the gallery in no time as well via the RadAsyncUpload control. A client-side preview is implemented on the Upload page so you can easily fill up the picture’s information.before inserting it in the gallery. Open Access ORM provides easy and smooth communication with the stored information in the database throughout the entire application.

Image Gallery Upload Image Page 

We also wanted to show how easily the default appearance of the RadControls can be changed, so we prepared entirely new styles with heavy use of CSS3 to give the Image Gallery a unique and modern look.

Click (or tap :) ) here to see the application online. We hope you will enjoy it! Like all our other samples, the source code is available for download as well - click here to get it.

About the author

Stoyan Stratev

Stoyan Stratev

Stoyan Stratev is the team lead of one of Telerik’s ASP.NET AJAX teams. He joined the company in 2005 as a web developer and ever since he has been specializing in the integration of the Telerik components in third-party solutions, such as DotNetNuke and SharePoint. His main interests are the client side of web development and his team is responsible for the oldest Telerik’s product – the RadEditor.

----

4 Comments

  • Ben Hayat 24 Feb 2012
    This is a very nice sample with some good CSS tricks in it. If you're running 2012 Q1 on your machine, you need to upgrade your OA references to the new library, since the sample is referencing it to 2011 Q3.
    Thank you!
    ..Ben
  • jens lewald 25 Feb 2012
    Hmm,
    you show us samples we see 10 years before.Tell us what is new here
  • Marin Bratanov 27 Feb 2012
    Hello, Ben,
    Thank you for noticing :) We will update the references as soon as possible.
    On your question, Jens,
    This sample shows how easy it is to integrate the RadControls in the site to achieve the desired look and functionality. If you examine the source you will see that there is very little code left for the developer to write and most of it is very straightforward, because the controls work seamlessly together.
    This app also shows new functionality - the client-side binding of the RadListView tha was added in Q1 2012 as well as a sample usage of another relatively new control - the RadSocialShare that was added in Q3 2011.
  • Dover Cab Transfer 06 Mar 2012
    Thank you very much for a lot of good advice. I look forward to reading more about it in the future. Keep up the good work! This blog will be great resource and I love reading.

Add comment

  1. Formatting options
       
     
     
     
     
       
  2. (optional, emails won't be shown on public pages)
  3. (optional)