Отображение изображения из Div для управления изображением в Asp.Net

Question

У меня есть несколько объемных изображений внутри тега DIV, и если я щелкну изображение внутри этого тега DIV, мне нужно отобразить этот элемент управления изображением в изображении.

Вот мой ответ, в котором я отображаю все объемные изображения:

<script>
      $('#showfilelist').append("<div id=" + file.id + " class='thumb'><a href='uploads/" + document.getElementById("currentDirectory").value + "/" + file.name + "' target='_blank' rel='gallery'><img src='uploads/" + document.getElementById("currentDirectory").value + "/" + file.name + "' width='50' height='50'/></a></div>");
</script>

Теперь Если я щелкну изображение внутри вышеуказанного DIV, выбранное изображение должно отображаться внутри этого элемента управления изображением

<asp:Image ID="Image1" runat="server" BackColor="#0099CC" BorderStyle="None" 
                                Height="624px" Width="500px" />

Answer 1

Если вы действительно создаете галерею, не изобретайте колесо и используйте проверенный и настоящий плагин. Я рекомендую Lightbox2 .

Answer 2

Я полагаю, вы создаете своего рода приложение для галереи или что-то в этом роде, и AMAIK из вашего поста, вы хотите показать большое изображение, нажав на его миниатюру.

Тогда мое предложениеустановить атрибут src элемента управления Image на стороне клиента, чтобы браузер отправлял HTTP-запрос GET для получения изображения.

Итак, я рекомендую вам выполнить следующие действия:

1. Для каждого эскиза добавьте пользовательский атрибут, например data-large-image-url, и установите его значение для ссылки на большое изображениеминиатюра.
2. Посмотрите, что представляет собой результат визуализации элемента управления Image в ASP.NET, и найдите его с помощью jQuery (вы можете использовать ClientIDMode='Static', чтобы повысить производительность)
3. При нажатии каждого эскизапросто установите для атрибута src значения большого изображения атрибут data-large-image-url.

---

  $('#thumbnails').click(function(){
      $('#large-image').attr('src', $(this).attr('data-large-image-url'));
  });