jquery 大图展示

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery 大图展示</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
  #largeImage {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 90%;
    max-height: 90%;
    z-index: 1000;
  }
</style>
</head>
<body>

<img src="thumbnail.jpg" alt="Thumbnail" id="thumbnail">
<div id="largeImage"></div>

<script>
$(document).ready(function(){
  $('#thumbnail').click(function(){
    var imgSrc = $(this).attr('src').replace('thumbnail', 'large');
    $('#largeImage').html('<img src="' + imgSrc + '">').show();
  });

  $(document).click(function(event){
    if (!$(event.target).closest('#thumbnail, #largeImage').length) {
      $('#largeImage').hide();
    }
  });
});
</script>

</body>
</html>