How to use thumbnail image different than detail image


Keywords:html 


Question: 

I have an image heavy gallery page where I'm wanting to use a thumbnail image that is pre-sized to be a maximum width of 200px. The actual size of each image is very large, often exceeding 2000 pixels on the longest side.

I've been using the Bootstrap class img-responsive img-thumbnail in order to set the thumbnails, but it seems to be using CSS to generate the thumbnails and it's still having to download the entire set of images. This is causing the page to load very slowly.

I've tried generating actual thumbnail images, but when we click on them to see the full version, we just get the existing thumbnail image and not the full res.

Is there a way, in Bootstrap, to use an actual thumbnail image on the main screen, but have high res image show when clicking?


2 Answers: 

Is there a way, in bootstrap, to use an actual thumbnail image on the main screen, but have high res image show when clicking?

You can use a Bootstrap modal for that.

Use the thumbnail image as a trigger for opening a modal and then show the high res image in the modal.

Here's an example:

<link rel="stylesheet" href="" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="" 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="" 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="">
        </div>
    </div>
</div>


It's easy using a few lines of jQuery along with Bootstrap 4 modal...

<div class="col-sm-4">
     <a href="" data-large-src="" data-toggle="modal">
         <img src="" class="img-fluid">
     </a>
</div>

When the modal is shown, update the src of the img inside the modal with the value stored in the data-large-src attribute put in the image that triggered the modal/lightbox. Only 3 lines of jQuery are needed...

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

Demo:

With this method, only the thumbnails are loaded on page load. Then the larger images are loaded on-demand when the modal is opened. Since the modal is updated dynamically, you just need 1 modal for all of the thumbnails.

<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>

Sidenote: img-responsive is now img-fluid in Bootstrap 4.0.0