Показать большое изображение при нажатии на маленькое изображение

0

Я пытаюсь показать большое изображение при нажатии на маленькое изображение. У меня есть таблица 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();
}
  • 0
    Где находится код JQuery?
  • 0
    @raj эта ссылка может быть полезна для вас stackoverflow.com/questions/2063199/…
Показать ещё 1 комментарий

1 ответ

0

Это не проблема С# или 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 и т.д.), Но эта идея.

  • 0
    в вашей демонстрации это работает хорошо, но когда я подаю заявку, это не работает. я редактирую вопрос, пожалуйста, проверьте его.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню