title: How to show thumbnail from a folder using javascript in asp.net
body: <p>I have uploaded some images using uploadify and saving the original file in "uploads" folder and thumbnails in "uploads\thumbs" folder now what I need is I have a div element on the main.aspx page where I need to show thumbnail image.After clicking the thumbnail I need to give a lightbox effect to it.</p>
  
  <p>1.I have done this way but this is showing me the original image instead of thumbnail.So how do I point to my thumbnail.</p>
  
  <p>2.When Using Lightbox effect how do I manage my two Imagess with the below code.</p>
  
  <p>This is my Handler code:</p>
  
  <pre><code>Public Class UploadVB : Implements IHttpHandler
  
      Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
          Dim postedFile As HttpPostedFile = context.Request.Files("Filedata")
  
          Dim savepath As String = ""
          Dim tempPath As String = ""
          tempPath = System.Configuration.ConfigurationManager.AppSettings("FolderPath")
          savepath = context.Server.MapPath(tempPath)
          Dim filename As String = postedFile.FileName
          If Not Directory.Exists(savepath) Then
              Directory.CreateDirectory(savepath)
          End If
          If Not Directory.Exists(savepath + "\thumbs") Then
              Directory.CreateDirectory(savepath +"\thumbs")
          End If
  
  
          postedFile.SaveAs((savepath &amp; "\") + filename)
          Dim fullImage As System.Drawing.Image = New System.Drawing.Bitmap((savepath &amp; "\") + filename)
  
          Dim newWidth As Integer = 200
          Dim newHeight As Integer = 200
  
          Dim temp As New Bitmap(newWidth, newHeight)
          Dim newImage As Graphics = Graphics.FromImage(temp)
          newImage.DrawImage(fullImage, 0, 0, newWidth, newHeight)
          temp.Save((savepath +"\thumbs"  &amp; "\") + "t_" + filename)
  
          context.Response.Write((tempPath &amp; "/") + filename)
          context.Response.StatusCode = 200
  
  
  
      End Sub
  </code></pre>
  
  <p>Here is my java script code:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(window).load(
  function () {
      $("#Inputfile").fileUpload({
          'uploader': 'scripts/uploader.swf',
          'cancelImg': 'images/cancel.png',
          'buttonText': 'Browse Files',
          'script': 'UploadVB.ashx',
          'folder': 'uploads',
          'fileDesc': 'Image Files',
          'fileExt': '*.jpg;*.jpeg;*.gif;*.png',
          'queueSizeLimit':9999,
          'simUploadLimit': 2,
          'sizeLimit': 4000000,
          'multi': true,
          'auto': true,
          'onComplete': function (event, queueID, fileObj, response, data) {
              $("#Original").append('&lt;img src="' + response + '"/&gt;')
  
          },
  
          'onError': function (event, ID, fileObj, errorObj) {
              alert(errorObj.type + ' Error: ' + errorObj.info);
          }
  
  
      });
  }
  );
  </code></pre>
  
  <p></p>
  
  <p>Here is what I need to show the Images:</p>
  
  <pre><code>&lt;div id="Original"&gt;
  
  &lt;/div&gt;
  </code></pre>