Question

好的，所以我现在设置部分的方式是我在容器中有一个图像。单击该图像时，会弹出一个模式，其中包含该相同图像的预览，以及其下方相同图像的较小预览以及该图像旁边的另一个预览图像。我试图让较大的预览图像下面的每个较小的预览图像充当按钮，根据点击的图像更改其上方的较大预览图像。我希望我能清楚地解释这一点，但如果没有，请告诉我。我也不确定我是否正确设置。这些是较大预览图像下方的两个较小的预览图像。

<div class="col-sm-6 modal3ImgPrev">
      <img class="img-responsiveModal" src='/CMS_Static/Uploads/313864614C6F6F/DJI_0019-Recovered.jpg'/>
</div>

这是我上面的主要预览图片，我希望它可以互换，具体取决于点击它下面的较小图像

.mDialogPhoto {
  width: 95%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.modal-body {
  padding: 0px;
}

.modal-backdrop.in {
  opacity: 0.8;
}

.modal-content {
  background-color: white;
}

.img-responsiveModal {
  margin-top: 20px;
  margin-bottom: 20px;
  display: block;
  width: 100%;
  height: auto;
}

.modal-dialog {
  margin-top: 50px;
}

这是我的整段代码，以及一些css。

<section class="contentThree">
  <div class="container-fluid custom">
    <div class="row">
      <div class="col-md-12 hidden-xs hidden-sm">
        <h2 class="text-center photographyTitle">Shop</h2>
      </div>

      <!-- Modal -->
      <div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog mDialogPhoto" role="document">
          <div class="modal-content">
            <div class="modal-body">
              <div class="container-fluid">
                <div class="row">
                  <div class="col-sm-6 modal3ImgPrev">
                    <img class="img-responsiveModal" src='/CMS_Static/Uploads/313864614C6F6F/DJI_0019-Recovered.jpg' />
                  </div>
                </div>
                <div class="row">
                  <a type="button" data-toggle="" data-target=""></a><img class="lighthouseImg col-sm-3 col-xs-6" src='/CMS_Static/Uploads/313864614C6F6F/DJI_0019-Recovered.jpg' />
                  <a type="button" data-toggle="" data-target=""></a><img class="preview1 col-sm-3 col-xs-6" src='/CMS_Static/Uploads/313864614C6F6F/DJI_0073-Recovered-1.jpg' />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-8 col-sm-offset-2 col-md-offset-0 col-md-4 photoBG">
          <a type="button" data-toggle="modal" data-target="#myModal3"><img class="img-responsive center-block" src='/CMS_Static/Uploads/313864614C6F6F/DJI_0019-Recovered.jpg' /></a>
        </div>
      </div>
      <div class="col-md-4 col-md-offset-4 hidden-xs hidden-sm">
        <a class="btn defaultBtn btn-block" href="/videography#photography">View More</a>
      </div>
    </div>
  </div>
</section>

[
    {
        "_id": "5a548b7c025cfcffdd286e0f",
        "createdAt": "2018-01-09T09:29:32.515Z",
        "updatedAt": "2018-01-09T10:59:49.159Z",
        "subject": "Hello buddy.",
        "body": "i am good and fine.",
        "category": "email service",
        "category_id": "232",
        "author": "5a5485834c2274ce5d5e54f8",
        "__v": 0,
        "images": [
            "https://google.com"
        ],
        "email content": [
            {
                "_id": "5a549dcb80a16b2e822357ae",
                "createdAt": "2018-01-09T10:47:39.883Z",
                "updatedAt": "2018-01-09T10:47:39.883Z",
                "body": "my first comment",
                "name": "asdf"
                "password":"312312"
                "__v": 0,
                "photos": []
            }
        ]
}]

Answer 1

为什么使用锚点数据切换来更改图像？我并不是100％熟悉您可以使用bootstrap数据切换所做的一切，但它似乎并不适合这一点。我建议使用＆lt; button＆gt;标记并使用onclick事件来更新正在查看的图像。

无法显示不同的图像预览

1 个答案: