Простой GUI IDE? [закрытый]

$('a .thumb').click(function (e) {   
  //You need to reference the clicked thumbnail, then its parent since the a element has the data-img-url you're looking for.
  //An alternative would be to look for the closest a element up the DOM tree using closest.
  //$('#lgImg').attr('src', $(this).closest("a").attr("data-img-url"));  
  $('#lgImg').attr('src', $(this).parent().attr("data-img-url"));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<!-- The Modal -->
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body text-center">
                <img id="lgImg" class="" src="#"/>
            </div>
            <div class="modal-footer">
                <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
            </div>
        </div>
    </div>
</div>
<a href='#myModal' data-toggle='modal' data-img-url='https://placeimg.com/640/480/any/grayscale.jpg' class='thumb'><img class='img-thumbnail thumb' src='https://placeimg.com/640/480/any/grayscale.jpg' width='20%' height='20%'></a>