Блог

У меня есть веб-сайт электронной коммерции, где я пытаюсь открыть изображение внутри модального, чтобы увеличить его. На странице продукта отображается список изображений для продукта, и когда пользователь нажимает на изображение, оно должно отображаться в модальном.

Это угловой проект с использованием typescript, но я решил просто встроить простую функцию jQuery в html. Проблема в том, что при нажатии на изображение открывается модальное изображение без изображения внутри него. В консоли браузера нет ошибок, затрудняющих диагностику.

Код выглядит следующим образом:

 //loop over the images associated with the product
<div class="container" style="border-color: #1111110d; border-style: solid; border-radius: 50px; width: 80%; padding-bottom:40px;">
        <div class="image-row">
          <div class="image-column" *ngFor="let image of product.productImageList; let i = index">
            <a href="#" id="{{image.imageId}}" data-toggle="modal" data-target="#myModal">
              <img src="{{image.imageUrl}}" id="{{image.imageId}}" class="img-responsive" width="250px" >
            </a>
          </div>
        </div>
      </div>
  

data-target Модальный код нацелен следующим образом:

   <!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog modal-lg">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">amp;times;</button>
        <h4 class="modal-title">Image</h4>
      </div>
      <div class="modal-body" id="showImg">
        <!-- here we create the image dynamically -->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
  

Затем функция jquery встроена в ту же HTML-страницу:

 <script type="text/javascript">
  $(document).ready(function() {
  $('img').on('click', function() {
    console.log('Clicked...');
      $("#showImg").empty();
      var image = $(this).attr("src");
      $("#showImg").append("<img class='img-responsive' src='"   image   "' />")
  });
});
</script> 
  

Насколько я понимаю, это должно встроить imageSrc в <div class="modal-body" id="showImg"> div.

Однако при нажатии на изображение на HTML-странице отображается следующее (пустой модальный файл без изображения):

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

скрипка

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

Я попытался внедрить a console.log() в функцию jquery, просто чтобы посмотреть, запускается ли код, и я ничего не получаю обратно в консоль, что также заставляет меня думать, что идентификатор jquery не работает!

Любая помощь будет оценена!

На самом деле я решил это гораздо проще и более «угловатым» способом.

Я написал функцию, которая в основном фиксирует src изображения, которое необходимо отобразить в модальном:

 loadImageInModal(imgSrc) {
  this.imageSrc = imgSrc;
}
  

Затем его можно просто встроить в модальный с помощью:

 <img src="{{imageSrc}}" class="img-responsive" >
  

Затем вызывается через:

 <img src="{{image.imageUrl}}" (click)="loadImageInModal(image.imageUrl)" id="{{image.imageId}}" class="img-responsive" width="250px" >