How do i display image in bootstrap modal with Javascript

Question

am having trouble getting my photos to display in modal using javascript. All i get when i click on a photo is a blank modal popping up. I believe this is because am still learning javascript and related questions haven't helped much. Would appreciate all the help i get

Modal html code

<!-- photos -->
<div class="container">
    <div class="row">
        <div class="col-lg-3 col-md-4 col-xs-6">
            <a href="#" class="thumbnail img-responsive" data-toggle="modal" data-caption="test caption text" data-image="images/image1.jpg" data-target="#trslphotos"><img src="images/image1.jpg" alt="recent photo"></a>
        </div>
        <div class="col-lg-3 col-md-4 col-xs-6">
            <a href="#" class="thumbnail img-responsive" data-toggle="modal" data-caption="test caption text" data-image="images/image2.jpg" data-target="#trslphotos"><img src="images/image2.jpg" alt="recent photo"></a>
        </div>
        <div class="col-lg-3 col-md-4 col-xs-6">
            <a href="#" class="thumbnail img-responsive" data-toggle="modal" data-caption="test caption text" data-image="images/image3.jpg" data-target="#trslphotos"><img src="images/image3.jpg" alt="recent photo"></a>
        </div>
        <div class="col-lg-3 col-md-4 col-xs-6">
            <a href="#" class="thumbnail img-responsive" data-toggle="modal" data-caption="test caption text" data-image="images/image4.jpg" data-target="#trslphotos"><img src="images/image4.jpg" alt="recent photo"></a>
        </div>
        <div class="col-lg-3 col-md-4 col-xs-6">
            <a href="#" class="thumbnail img-responsive" data-toggle="modal" data-caption="test caption text" data-image="images/image5.jpg" data-target="#trslphotos"><img src="images/image5.jpg" alt="recent photo"></a>
        </div>
        <div class="col-lg-3 col-md-4 col-xs-6">
            <a href="#" class="thumbnail img-responsive" data-toggle="modal" data-caption="test caption text" data-image="images/image6.jpg" data-target="#trslphotos"><img src="images/image6.jpg" alt="recent photo"></a>
        </div>
    </div>
</div>
<!-- ./photos -->

<!-- modal -->
<div class="modal fade" id="trslphotos" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <h4 class="modal-title"></h4>
            </div>
            <div class="modal-body"><img src="" class="img-responsive"></div>
            <div class="modal-footer">
                <a class="carousel-control left" href="#recent-photos" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
                <a class="carousel-control right" href="#recent-photos" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
            </div>
        </div>
    </div>
</div>
<!-- ./modal -->

This is the javascript am using to call the image

function displayPhotos(url) {
 //this should load photos
 $('.modal-body img').attr('src',url);
 //show modal
 $('#trslphotos').modal();
}

Answer 1

Here is the solution for you. I've simply called your displayPhotos() function on modal shown.

Fiddle

$('#trslphotos').on('shown.bs.modal', function (a, b,c) {
 var clickedImageUrl = a.relatedTarget.childNodes[0].src;
  displayPhotos(clickedImageUrl);
})

function displayPhotos(url) {
 console.log(url);
 $('.modal-body img').attr('src',url);
 $('#trslphotos').modal();
}

Now it will work just fine with your code. Hope it helps u.

Answer 2

I don't know what your problem, may be this help you a little. Try to listen on click in trslphotos.

$(function() {
  $('#trslphotos').on('show.bs.modal', function() {
    $('.modal-body img').attr('src', "https://i.sstatic.net/nukKn.jpg");
    //$('#trslphotos').modal('show');
  });
  $('#trslphotos').on('click', function() {
    //$('.modal-body img').attr('src', "https://i.sstatic.net/nukKn.jpg");
    $('#trslphotos').modal('show');
  });
});

<link href="https://bootswatch.com/united/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-lg-3 col-md-4 col-xs-6">
      <a href="#" class="thumbnail img-responsive" data-toggle="modal" data-caption="test caption text" data-image="images/image1.jpg" data-target="#trslphotos">
        <img src="images/image1.jpg" alt="recent photo">
      </a>
    </div>
    <div class="col-lg-3 col-md-4 col-xs-6">
      <a href="#" class="thumbnail img-responsive" data-toggle="modal" data-caption="test caption text" data-image="images/image2.jpg" data-target="#trslphotos">
        <img src="images/image2.jpg" alt="recent photo">
      </a>
    </div>
    <div class="col-lg-3 col-md-4 col-xs-6">
      <a href="#" class="thumbnail img-responsive" data-toggle="modal" data-caption="test caption text" data-image="images/image3.jpg" data-target="#trslphotos">
        <img src="images/image3.jpg" alt="recent photo">
      </a>
    </div>
    <div class="col-lg-3 col-md-4 col-xs-6">
      <a href="#" class="thumbnail img-responsive" data-toggle="modal" data-caption="test caption text" data-image="images/image4.jpg" data-target="#trslphotos">
        <img src="images/image4.jpg" alt="recent photo">
      </a>
    </div>
    <div class="col-lg-3 col-md-4 col-xs-6">
      <a href="#" class="thumbnail img-responsive" data-toggle="modal" data-caption="test caption text" data-image="images/image5.jpg" data-target="#trslphotos">
        <img src="images/image5.jpg" alt="recent photo">
      </a>
    </div>
    <div class="col-lg-3 col-md-4 col-xs-6">
      <a href="#" class="thumbnail img-responsive" data-toggle="modal" data-caption="test caption text" data-image="images/image6.jpg" data-target="#trslphotos">
        <img src="images/image6.jpg" alt="recent photo">
      </a>
    </div>
  </div>
</div>
<!-- ./photos -->

<!-- modal -->
<div class="modal fade" id="trslphotos" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
        <h4 class="modal-title"></h4>
      </div>
      <div class="modal-body">
        <img src="" class="img-responsive">
      </div>
      <div class="modal-footer">
        <a class="carousel-control left" href="#recent-photos" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
        <a class="carousel-control right" href="#recent-photos" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
      </div>
    </div>
  </div>
</div>