如何在Lightbox中实现图片右侧展示+左侧选项表单的左右布局？

作为刚入门CSS/HTML/JS的初学者，咱们一步步来搞定这个功能，其实并不复杂～

首先，你用的是Lightbox（看起来是Lightbox2，因为代码里用了data-lightbox属性），它本身支持自定义回调函数，我们可以利用这些回调在弹窗打开时插入表单，再用CSS调整布局让图片和表单左右排列。

步骤1：配置Lightbox的回调函数 #

Lightbox提供了onOpenCallback（弹窗打开时触发）和onCloseCallback（弹窗关闭时触发），我们可以用这两个函数来动态添加和移除表单：

// 先配置Lightbox的选项
lightbox.option({
  // 弹窗打开时执行
  'onOpenCallback': function() {
    // 找到Lightbox的内容容器
    const lightboxContainer = document.querySelector('.lb-container');
    // 创建表单的容器div
    const formContainer = document.createElement('div');
    formContainer.className = 'lightbox-form';
    // 写入表单的HTML内容，你可以根据需求修改选项
    formContainer.innerHTML = `
      <h3>选择产品参数</h3>
      <div class="form-item">
        <label>尺寸:</label>
        <select>
          <option value="xs">XS</option>
          <option value="s">S</option>
          <option value="m">M</option>
          <option value="l">L</option>
          <option value="xl">XL</option>
        </select>
      </div>
      <div class="form-item">
        <label>颜色:</label>
        <div class="color-options">
          <button class="color-btn" style="background: #ff0000;"></button>
          <button class="color-btn" style="background: #00ff00;"></button>
          <button class="color-btn" style="background: #0000ff;"></button>
        </div>
      </div>
      <button class="action-btn">加入购物车</button>
    `;
    // 把表单插入到Lightbox容器的最前面（左侧）
    lightboxContainer.insertBefore(formContainer, lightboxContainer.firstChild);
  },
  // 弹窗关闭时移除表单，避免下次打开重复添加
  'onCloseCallback': function() {
    const formContainer = document.querySelector('.lightbox-form');
    if (formContainer) {
      formContainer.remove();
    }
  }
});

// 你原来的图片生成函数保持不变
var placeImage = function(x) { 
  var img=""; 
  for (var counter = 0; counter <= x; counter++ ) { 
    img += '<a href="https://source.unsplash.com/1000x80'+counter+'.jpg" data-lightbox="roadtrip"><img class="img-responsive gallery__img" src="https://source.unsplash.com/1000x80'+counter+'.jpg" alt="" /></a>'; 
  } 
  document.getElementById("placing_img").innerHTML = img; 
}; 
placeImage(10);

步骤2：添加CSS调整布局 #

默认Lightbox是居中显示图片，我们需要用CSS把容器改成弹性布局，让表单和图片左右并排，同时美化表单样式：

/* 修改Lightbox容器为弹性布局，实现左右排列 */
.lb-container {
  display: flex;
  align-items: center;
  gap: 25px;
  padding: 30px;
}

/* 表单容器样式 */
.lightbox-form {
  background: white;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 3px 12px rgba(0,0,0,0.15);
  width: 320px;
}

.lightbox-form h3 {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 1.2rem;
}

.form-item {
  margin-bottom: 20px;
}

.form-item label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
}

.form-item select {
  width: 100%;
  padding: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
}

.color-options {
  display: flex;
  gap: 10px;
}

.color-btn {
  width: 35px;
  height: 35px;
  border: 2px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  transition: border-color 0.2s;
}

.color-btn:hover, .color-btn.active {
  border-color: #333;
}

.action-btn {
  width: 100%;
  padding: 12px;
  background: #2563eb;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s;
}

.action-btn:hover {
  background: #1d4ed8;
}

/* 调整图片的最大宽度，避免占满整个弹窗 */
.lb-image {
  max-width: calc(100% - 370px); /* 减去表单宽度和间距 */
}

/* 小屏幕适配：让表单和图片堆叠显示 */
@media (max-width: 768px) {
  .lb-container {
    flex-direction: column;
    gap: 20px;
  }
  .lb-image {
    max-width: 100%;
  }
  .lightbox-form {
    width: 100%;
  }
}

注意事项 #

1. 确保你已经正确引入了Lightbox2的CSS和JS文件（如果还没引入，要先加到你的HTML里，比如在<head>里加CSS，<body>末尾加JS）；
2. 你可以根据自己的需求修改表单里的选项，比如添加更多尺寸、颜色，或者更换按钮文本；
3. 如果不同图片对应不同的选项，可以利用onSlideChangeCallback回调，在切换图片时更新表单内容（这个可以等你熟悉基础后再尝试）。

这样修改后，点击图片打开Lightbox时，左侧就会显示带选项和按钮的白色表单，右侧显示图片啦～

内容的提问来源于stack exchange，提问作者aleffaso