Image gallery in asp.net
There are plenty of solutions to create image gallery in asp.net and here is one of them which I use.
Step 1: create a httpHandler to generate thumbnails on the fly
<%@ WebHandler Language="C#" Class="Thumbnail" %>
using System;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Drawing.Imaging;
using System.IO;
using System.Text.RegularExpressions;
using System.Web;
public class Thumbnail : IHttpHandler {
private Regex _nameValidationExpression = new Regex(@"[^\w/]");
private int _thumbnailSize = 150;
public void ProcessRequest(HttpContext context) {
string photoName = context.Request.QueryString["p"];
//if (_nameValidationExpression.IsMatch(photoName)) {
// throw new HttpException(404, "Invalid photo name.");
//}
string cachePath = Path.Combine(HttpRuntime.CodegenDir, photoName + ".square.png");
if (File.Exists(cachePath)) {
OutputCacheResponse(context, File.GetLastWriteTime(cachePath));
context.Response.WriteFile(cachePath);
return;
}
string photoPath = context.Server.MapPath("~/Files/CBPLibrary/" + photoName );
Bitmap photo;
try {
photo = new Bitmap(photoPath);
}
catch (ArgumentException) {
throw new HttpException(404, "Photo not found.");
}
context.Response.ContentType = "image/png";
int width, height;
if (photo.Width > photo.Height) {
width = _thumbnailSize * photo.Width / photo.Height;
height = _thumbnailSize;
}
else {
width = _thumbnailSize;
height = _thumbnailSize * photo.Height / photo.Width;
}
Bitmap target = new Bitmap(_thumbnailSize, _thumbnailSize);
using (Graphics graphics = Graphics.FromImage(target)) {
graphics.CompositingQuality = CompositingQuality.HighSpeed;
graphics.InterpolationMode = InterpolationMode.HighQualityBicubic;
graphics.CompositingMode = CompositingMode.SourceCopy;
graphics.DrawImage(photo, (_thumbnailSize - width) / 2, (_thumbnailSize - height) / 2, width, height);
using (MemoryStream memoryStream = new MemoryStream()) {
target.Save(memoryStream, ImageFormat.Png);
OutputCacheResponse(context, File.GetLastWriteTime(photoPath));
using (FileStream diskCacheStream = new FileStream(cachePath, FileMode.CreateNew)) {
memoryStream.WriteTo(diskCacheStream);
}
memoryStream.WriteTo(context.Response.OutputStream);
}
}
}
private static void OutputCacheResponse(HttpContext context, DateTime lastModified) {
HttpCachePolicy cachePolicy = context.Response.Cache;
cachePolicy.SetCacheability(HttpCacheability.Public);
cachePolicy.VaryByParams["p"] = true;
cachePolicy.SetOmitVaryStar(true);
cachePolicy.SetExpires(DateTime.Now + TimeSpan.FromDays(365));
cachePolicy.SetValidUntilExpires(true);
cachePolicy.SetLastModified(lastModified);
}
public bool IsReusable {
get {
return true;
}
}
}
The above code creates a thumbnail from image and cache it in asp.net temporary files directory.
Step 2: The next task is to show images and then create a popup that displays the actual image on thumbnail click
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("a[rel=gallery]").fancybox({
'transitionIn': 'elastic',
'transitionOut': 'elastic',
'easingIn': 'easeOutBack',
'easingOut': 'easeInBack'
});
});
</script>
The above script is using the fancy box jquery plugin to display actual image.
Step 3: Create html to show thumbnail images
<a rel=”gallery” href=”../files/cbplibrary/382c3379-1.jpg”>
<img src=”../Thumbnail.ashx?p=382c3379-1.jpg” alt=”" />
</a>
