gem 'lightbox2-rails'

//= require lightbox

document.addEventListener('DOMContentLoaded', function() {
  var modalOverlay = document.createElement('div');
  modalOverlay.className = 'modal-overlay';
  document.body.appendChild(modalOverlay);

  var modalImage = document.createElement('img');
  modalImage.className = 'modal-image';
  modalOverlay.appendChild(modalImage);

  var images = document.querySelectorAll('.img-zoom');

  images.forEach(function(img) {
    img.addEventListener('click', function() {
      var imgSrc = img.getAttribute('src');
      modalImage.src = imgSrc;
      modalOverlay.style.display = 'block';
    }); 
  }); 

  modalOverlay.addEventListener('click', function() {
    modalOverlay.style.display = 'none';
  }); 
});

/*
 *= require lightbox
*/ 

/* 基础图片样式 */
.img-zoom {
  width: 150px; /* 初始宽度 */
  transition: transform 0.5s ease; /* 平滑过渡效果 */
  border: 1px solid #ddd; /* 边框样式 */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 阴影效果 */
  border-radius: 4px; /* 圆角边框 */
  display: block; /* 确保图片独占一行 */
  cursor: pointer; /* 显示可点击的指针样式 */
}

/* 模态框样式 */
.modal-overlay {
  display: none; /* 默认不显示 */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1000;
  cursor: pointer;
}

/* 模态框中的图片样式 */
.modal-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 90%;
  max-height: 90%;
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  cursor: zoom-out; /* 显示缩小的指针样式 */
}

<img src="your_image.jpg" class="img-zoom"/>