如何制作jquery多图像预览

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="jquery.preview.js"></script>

<div class="image-container">
  <img src="image1.jpg" data-preview="image1.jpg" alt="Image 1">
  <img src="image2.jpg" data-preview="image2.jpg" alt="Image 2">
  <img src="image3.jpg" data-preview="image3.jpg" alt="Image 3">
</div>

.image-container {
  display: flex;
}

.preview-box {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

.preview-box img {
  max-width: 100%;
  max-height: 100%;
}

$(document).ready(function() {
  $('.image-container img').click(function() {
    var imageUrl = $(this).data('preview');
    showPreview(imageUrl);
  });

  function showPreview(imageUrl) {
    var previewBox = $('<div class="preview-box"><img src="' + imageUrl + '"></div>');
    $('body').append(previewBox);
  }

  $(document).on('click', '.preview-box', function() {
    $(this).remove();
  });
});