Я пытаюсь показать большое изображение при нажатии на маленькое изображение. У меня есть таблица SQL, в которой я храню изображение, затем я отображаю это изображение в элементе управления img. Теперь я хочу, чтобы это изображение открывалось во всплывающем окне большего размера, когда пользователь нажимает на него.
Мой код для извлечения изображения из базы данных и отображения его в img control:
<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();
}
Это не проблема С# или 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 и т.д.), Но эта идея.