Показать крупную иллюминацию Когда нажимайте на маленькое изображение

Question

Я пытаюсь показать большое изображение, когда нажимаю на маленькое изображение. У меня есть таблица sql, в которой я храню изображение, тогда я показываю это изображение в элементе управления img, но теперь я хочу, когда пользователь нажимает на это изображение будет открываться в всплывающем окне большего размера.

Мой код извлечь изображение из базы данных и отображения в контроле IMG является

<script type="text/javascript"> 
    $('#image1Large').hide().click(function() { 
     $(this).hide(); 
    }); 

    $('#image1').click(function() { 
     $('#image1Large').attr('src', this.src) 
      .show() 
      .offset({ top: 0, left: 0 }); 
    }); 
</script> 

<img runat="server" id="image1" alt="" src="" height="100" width="100"/> 
<img runat="server" id="image1Large" alt=""/> 

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(); 
} 

Answer 1

Это на самом деле не C# или проблема SQL, а на стороне клиента. Поскольку вы уже извлекли изображение и только изменили его размер с помощью атрибутов height="100" width="100", все, что вам нужно сделать, это отобразить одно и то же изображение в исходном размере. Там вы много способов сделать это, вот основная один:

Добавить еще один элемент изображения для хранения большего размера:

<img runat="server" id="image1" alt="" src="" height="100" width="100"/> 
<img runat="server" id="image1Large" /> 

И добавить этот код изначально скрыть увеличенное изображение и показать его по щелчку :

$('#image1Large').hide().click(function(){ 
    $(this).hide();  
}) 


$('#image1').click(function(){ 
    $('#image1Large').attr('src', this.src) 
        .show() 
        .offset({top:0,left:0});  
}) 

Вот демо: http://jsfiddle.net/QH5a8/

в сценарии реальной жизни, вы должны отрегулируйте это (возможно, дополнительное форматирование и позиционирование большего изображения, возможно, показывая его внутри контейнера DIV и т. д.), но это идея.