title: Show large image when click on small image
body: <p>I am trying to show a large image when clicking on a small image. I have a SQL table in which I store the image, then I display this image in an img control. Now I want this image to open in a bigger size popup, when the user clicks on it.</p>
  
  <p>My code to the retrieve the image from the database and display it in img control is:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $('#image1Large').hide().click(function() {
          $(this).hide();
      });
  
      $('#image1').click(function() {
          $('#image1Large').attr('src', this.src)
              .show()
              .offset({ top: 0, left: 0 });
      });
  &lt;/script&gt;
  
  &lt;img  runat="server" id="image1" alt="" src="" height="100" width="100"/&gt;
  &lt;img  runat="server" id="image1Large" alt=""/&gt;
  
  protected void LoadImage1()
  {
      SqlCommand cmd = new SqlCommand("sps_getimage", con);
      cmd.CommandType = CommandType.StoredProcedure;
      cmd.Parameters.AddWithValue("@flag", 1);
      cmd.Parameters.AddWithValue("@ad_id", ad_id);
      con.Open();
      SqlDataReader reader = cmd.ExecuteReader(System.Data.CommandBehavior.SequentialAccess);
      if (reader.HasRows)
      {
          reader.Read();
          MemoryStream memory = new MemoryStream();
          long startIndex = 0;
          const int ChunkSize = 256;
          while (true)
          {
              byte[] buffer = new byte[ChunkSize];
              long retrievedBytes = reader.GetBytes(0, startIndex, buffer, 0, ChunkSize);
              memory.Write(buffer, 0, (int)retrievedBytes);
              startIndex += retrievedBytes;
              if (retrievedBytes != ChunkSize)
                  break;
          }
  
          byte[] data = memory.ToArray();
          img1 = data;
          memory.Dispose();
          image1.Src = "data:image/png;base64," + Convert.ToBase64String(data);
      }
      con.Close();
  }
  </code></pre>