CODEWITHSUNDEEP
jqueryhtml
Breevie
Breevie

Reputation: 95

Trouble loading two images into my modal

I'm creating a site for a client who is a photographer. As of right now he has several photograph categories that after being clicked will load that category's images into a slideshow. If the image is clicked in the slideshow I want a modal to popup showing the clicked image along with another image the clicked images div. Currently, the first picture loads but the second one won't. (I looked at the console and the is in there but it says the src is unknown) Can someone help me do this? 

<div id="myModal" class="modal">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class = "modal-body">
              <!-- Modal Content (The Image) -->
              <img  src="" id = "mimg" class = "modalimg">
              <img  src="" id = "mimg2" class = "modalimg2">
          </div>
        </div>
      </div>
    </div>

<div class = "img1">
                <img src = "http://www.defenders.org/sites/default/files/styles/large/public/tiger-dirk-freder-isp.jpg" class="img-responsive" alt = "BlackProPix Photography" height = "160px" width = "176px">
                <img src = "https://upload.wikimedia.org/wikipedia/commons/7/73/Lion_waiting_in_Namibia.jpg" class="img-responsive" alt = "BlackProPix Photography" height = "160px" width = "176px">
            </div>

$("img").click(function(){
            var sr=$(this).attr('src');
            var parent = $(this).parent();
            var sr2 = $(parent).children('img1').eq(2);
            $('#mimg').attr('src',sr);
            $('#mimg2').attr('src',sr2);
            $("#myModal").modal(); 
        });

Upvotes: 0

Views: 46

Answers (1)

Super User
Super User

Reputation: 9652

You have some mistakes in your script. Just update your script with following snippet.

$("img").click(function(){
    var sr=$(this).attr('src');
    var parent = $(this).parent();
    var sr2 = $(this).siblings('img').attr('src');
    $('#mimg').attr('src',sr);
    $('#mimg2').attr('src',sr2);
    $("#myModal").modal(); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div id="myModal" class="modal">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class = "modal-body">
              <!-- Modal Content (The Image) -->
              <img  src="" id = "mimg" class = "modalimg">
              <img  src="" id = "mimg2" class = "modalimg2">
          </div>
        </div>
      </div>
    </div>

<div class = "img1">
                <img src = "http://www.defenders.org/sites/default/files/styles/large/public/tiger-dirk-freder-isp.jpg" class="img-responsive" alt = "BlackProPix Photography" height = "160px" width = "176px">
                <img src = "https://upload.wikimedia.org/wikipedia/commons/7/73/Lion_waiting_in_Namibia.jpg" class="img-responsive" alt = "BlackProPix Photography" height = "160px" width = "176px">
            </div>

Upvotes: 1

Related Questions