Question

我有一个图像重的图库页面，我想要使用预先调整大小为200px的最大宽度的缩略图。每幅图像的实际尺寸非常大，最长边常常超过2000像素。

我一直在使用Bootstrap类img-responsive img-thumbnail来设置缩略图，但似乎是使用CSS来生成缩略图，而且它仍然需要下载整个图像集。这导致页面加载速度非常慢。

我已经尝试生成实际的缩略图，但是当我们点击它们以查看完整版本时，我们只是获取现有的缩略图而不是完整的分辨率。

在Bootstrap中，有没有办法在主屏幕上使用实际的缩略图，但点击时会显示高分辨率图像？

Answer 1

在引导程序中，有没有办法在主屏幕上使用实际的缩略图图像，但在点击时会显示高分辨率图像？

您可以使用Bootstrap模式。

使用缩略图图像作为打开模态的触发器，然后在模态中显示高分辨率图像。

以下是一个例子：

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<h5>Click:</h5>
<button type="button" class="btn bg-transparent p-0" data-toggle="modal" data-target="#highres1">
    <img src="https://placeimg.com/200/200/animals" class="img-thumbnail">
</button>

<div id="highres1" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <img class="img-responsive" src="https://placeimg.com/940/400/animals">
        </div>
    </div>
</div>

＆＃13;

参考：

https://getbootstrap.com/docs/4.0/components/modal/

Answer 2

使用几行jQuery和Bootstrap 4模态很容易......

<div class="col-sm-4">
     <a href="#galleryModal" data-large-src="(fullsizeimageurl)" data-toggle="modal">
         <img src="(thumbnailurl)" class="img-fluid">
     </a>
</div>

当显示模态时，使用存储在触发模态/灯箱的图像中的src属性中存储的值更新模态内的img的data-large-src。仅需要3行jQuery ...

$('#galleryModal').on('show.bs.modal', function (e) {
   $('#galleryImage').attr("src",$(e.relatedTarget).data("large-src"));
});

演示：https://www.codeply.com/go/uW3sjBYzbE

使用此方法，仅在页面加载时加载缩略图。然后在打开模态时按需加载较大的图像。由于模态是动态更新的，因此只需要1个模态用于所有缩略图。

<div id="galleryModal" class="modal fade">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-body">
                <img src="" id="galleryImage" class="img-fluid">
            </div>
        </div>
    </div>
</div>

旁注：img-responsive现在在Bootstrap 4.0.0中img-fluid

如何使用与细节图像不同的缩略图图像

2 个答案: