Creating the thumbnail image and displaying the full image is done by the same HttpHandler implementation we have used in Part 1. Creating Thumbnail Image For reference purpose, we will have the HttpHandler implementation here also. For description of the code refer Part 1. Thumbnail.ashx public void ProcessRequest (HttpContext context) { string imageid = context.Request.QueryString["ImID"]; if (imageid == null || imageid == "") { //Set a default imageID imageid = "1"; } SqlConnection connection = new SqlConnection(ConfigurationManager.ConnectionStrings["connectionString"].ConnectionString); connection.Open(); SqlCommand command = new SqlCommand("select Image from Image where ImageID="+imageid, connection); SqlDataReader dr = command.ExecuteReader(); dr.Read(); Stream str = new MemoryStream((Byte[])dr[0]); Bitmap loBMP = new Bitmap(str); Bitmap bmpOut = new Bitmap(100, 100); Graphics g = Graphics.FromImage(bmpOut); g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic; g.FillRectangle(Brushes.White, 0, 0, 100, 100); g.DrawImage(loBMP, 0, 0, 100, 100); MemoryStream ms = new MemoryStream(); bmpOut.Save(ms, System.Drawing.Imaging.ImageFormat.Png); byte[] bmpBytes = ms.GetBuffer(); bmpOut.Dispose(); ms.Close(); context.Response.BinaryWrite(bmpBytes); connection.Close(); context.Response.End(); } Displaying the Original Image FullImage.ashx public void ProcessRequest (HttpContext context) { string imageid = context.Request.QueryString["ImID"]; if (imageid == null || imageid == "") { //Set a default imageID imageid = "1"; } SqlConnection connection = new SqlConnection(ConfigurationManager.ConnectionStrings["connectionString"].ConnectionString); connection.Open(); SqlCommand command = new SqlCommand("select Image from Image where ImageID="+imageid, connection); SqlDataReader dr = command.ExecuteReader(); dr.Read(); context.Response.BinaryWrite((Byte[])dr[0]); connection.Close(); context.Response.End(); } Note I have given only the ProcessRequest() method in the above code. Refer the source code attachment for the full code. I have set default imageID, make sure you are giving an existing imageId in database for the code to work without any errors. Using DIV Tag to display the full image To implement this, we will declare a DIV tag in the ASPX page with display property set to none. This indicates that the DIV tag will not be visible by default when the page is loaded. Declare a tag inside this DIV tag to display the full image. When the user clicks the thumbnail image, we can enable the DIV tag through a javascript function and pass the ImID of the image to call the FullImage.ashx HttpHandler for displaying the full image in the tag. Also, we will have a button called Close inside the DIV tag to close the display of full image i.e. on click of this button we will again make the DIV tag’s display property to none. Refer the below Jscript code, |