CODEWITHSUNDEEP
jqueryangularmodal-dialog
DeltaRage123
DeltaRage123

Reputation: 83

Bootstrap Modal Is not Embedding Image inside itself

I have an e-commerce website where I am trying to open an image inside a modal to enlarge it. The product page displays a list of images for a product and when the user clicks the image, it should display it within the modal.

It is an angular project using typescript but I have opted to just embed a simple jQuery function inside the html. The issue is that when the image is clicked, the modal opens just with no image inside it. No errors in the browser console making it difficult to diagnose.

The code is as follows:

//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>

The data-target targets the modal code as follows:

  <!-- 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">&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>

Then the jquery function embedded within the same html page:

<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>

From my understanding this should embed the imageSrc into the <div class="modal-body" id="showImg"> div.

However, when the image is clicked it displays the following on the html page (Empty modal with no image):

Empty Modal

I honestly do not understand whats going on as I have ripped this code from another source and modified it to fit what I need:

fiddle

Im starting to think that its because im looping over the image sources and something is not quite getting pulled through correctly.

I have tried implementing a console.log() into the jquery function just to see if the code gets triggered and i get nothing back in the console which also makes me think the jquery id not working!

Any help would be appreciated!

Upvotes: 0

Views: 81

Answers (1)

DeltaRage123
DeltaRage123

Reputation: 83

I actually resolved this in a much easier and more "angular" way.

I wrote a function which basically captures the src of the image that needs displaying in the modal:

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

It can then simply be embedded into the modal via:

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

Then invoked via:

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

Upvotes: 1

Related Questions