Ways to differentiate between a thumbnail image and a detailed image

On my image-heavy gallery page, I am looking to utilize a thumbnail image that is pre-sized with a maximum width of 200px. The images themselves are quite large, often surpassing 2000 pixels on the longest side.

Although I have been using the Bootstrap classes img-responsive img-thumbnail to create the thumbnails, it appears that CSS is still required to generate them and the full set of images must be downloaded. As a result, the page loads very slowly.

I attempted to create actual thumbnail images, but when clicked, they only display the existing thumbnail image instead of the full resolution version.

Is there a way within Bootstrap to display an actual thumbnail image on the main screen, while showing a high-resolution image upon clicking?

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Can a thumbnail image be displayed on the main screen using Bootstrap, but show a high-resolution image when clicked?

To achieve this functionality, you can utilize a Bootstrap modal.

The approach involves using the thumbnail image as a trigger to open a modal, where the high-res image will be displayed.

Check out the example below:

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

For more details, visit the following link:

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

Answer №2

If you want to implement a Bootstrap 4 modal with jQuery in just a few lines, here's how...

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

By using this code snippet, you can update the image source inside the modal with the value from the data-large-src attribute of the thumbnail that triggered the modal display. All it takes is 3 lines of jQuery...

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

Check out the live demo:

This technique allows you to initially load only thumbnails on the page. The full-size images are then loaded when needed, upon opening the modal. Thanks to dynamic updates, one modal is sufficient for all 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>

Side note: In Bootstrap 4, replace img-responsive with img-fluid.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to detect when a CSS background image has finished loading? Does an event trigger upon completion?

I am facing an issue with my sidebar widget where there is an image background in place. On top of this, I have a search input form but I don't want the input to display until the image has fully loaded. Is there a way to add a load event handler to ...

javascriptjquerycssbackground-imagedom-events

The animation in Material UI does not smoothly transition with the webkit scrollbar

I've been experimenting with CSS animations in Material UI's sx property to achieve a webkit scrollbar that eases in and out. However, instead of the desired effect, the scrollbar appears and disappears instantly. Whether I define the keyframes ...

javascriptcssreactjsmaterial-uifrontend

When the window is resized, the div shifts position

I recently added a div to my website with the following code: <div id="div"></div> #div { height: 400px; width: 300px; position: absolute; right: 59%; text-align: left; } Howe ...

htmlcss

angularjs reset file input form

Whenever I click publish, I want to clear my form: $scope.product = {}; $scope.upload = function(user) { var formData = new FormData; $scope.product.owner = user; for (key in $scope.product) { ...

javascriptangularjshtml

How to show specific information for individual items using Angular

In my current project, I am utilizing angular 7 and bootstrap 4. My goal is to display detailed information right below the selected item. The screenshot below shows where I'm currently at: https://i.sstatic.net/su9tI.jpg Here is what I aim to achie ...

angularcssbootstrap-4

How can I remove specific items from a session array when they are selected?

I am seeking a solution that will allow me to remove a specific item from an array when that item is clicked. For example, if I click on "Two", it should disappear. See a demonstration here: CODE: <form method="post"> <input type="text" i ...

phphtmlarrayssessionunset

How can I delete the onmouseover function in HTML?

Is there a way to remove the (onmouseover="mouseoversound.playclip()") function from the following HTML code? <a href="roster.html" onmouseover="mouseoversound.playclip()">Roster</a> Can we instead implement this functionality in a JavaScript ...

javascriptjqueryhtml

Unable to retrieve the DOM element using jQuery

I'm currently facing an issue with fetching a DOM element from a jQuery selector array. var index = $(this).index(); $titleElement = $(".title:not(.small)")[index]; Unfortunately, the code above only gives me the text and not the actual DOM element ...

javascriptjqueryhtmlcssdom

Display the bash script results on an HTML webpage

My bash script fetches device status and packet loss information, slightly adjusted for privacy: #!/bin/bash TSTAMP=$(date +'%Y-%m-%d %H:%M') device1=`ping -c 1 100.1.0.2 | grep packet | awk '{ print $6 " " $7 " " $8 }'` device2=`pin ...

javascripthtmlbash

Updating the text of one option within a selected option using jQuery while iterating through each element in a function

Hey there, I have multiple rooms each with two select dropdowns. My problem is that when I choose the option with a value of 4 in the number of persons dropdown, I only want the text of the next option (the dinner select) to change under the room I selecte ...

javascriptjqueryhtml

What is the process for retrieving the value of a text box using V-Model?

Link to the code snippet <td><input class="input" v-model="user.name" /></td> After accessing the provided link, I noticed a unique input textbox. Is there a way to extract specific text values like a,b,c from this te ...

javascripthtmlvue.js

I'm looking for a more efficient and graceful way to implement jquery .slideToggle on numerous hidden divs. Any suggestions?

If you would like to see a demonstration of what I am working on, here is a link to a live example: https://jsfiddle.net/yfe7ky3x/ My goal is to create a basic portfolio website that showcases various projects. I want to implement a feature where clicking ...

jqueryhtmlreplaceslidetoggle

What is the reason for min-content not being compatible with auto-fill or auto-fit?

My confusion lies in the fact that this code snippet works: .grid { display: grid; grid-template-columns: repeat(4, min-content); } Whereas this one does not: .grid { display: grid; grid-template-columns: repeat(auto-fill, min-content); } I am ...

csscss-gridfluid-layoutcss-multicolumn-layout

Tips for displaying text gradually when hovering over a button

Is there a way to make text appear slowly on hover of a button without it coming from the bottom to the right? I attempted using transition:all 5s;, but encountered the issue of the text moving from the bottom to the right due to improper width. Is there a ...

javascripthtmlcss

Jquery's .text() and .html() methods seem to be malfunctioning

Utilizing a jQuery function: $("#btn1").click(function(){ $("p").text("") } Each time the button is clicked, the .text() field fails to load. When I modify the value of .text to a shorter string, it functions correctly. ...

javascriptjqueryhtmlcss

Turn off link preview feature on Android messages

As a developer, I am looking for a way to disable or hide link previews on Android devices when someone receives a text message with a link to our website. I still want the URL address to be visible, but I prefer to keep the link previews on IOS devices. I ...

javascriptjqueryhtml

The HTML textarea is not updating properly when using jQuery's keypress event

I am facing an issue with my forms on a webpage, each containing an html textarea: <textarea name="Comment" class="inputTextArea">Hello World!</textarea> There is a javascript event handler that automatically submits the fo ...

javascripthtmlformstextarea

Applying CSS to inherit styles

I have a group of divs with a similar style, but each one has different padding and margin settings. Here is an example: <div class="mainStyle" id="cc">CC</div> <div class="mainStyle" id="bb">BB</div> <div class="mainStyle" id=" ...

css

Center align button vertically in Bootstrap and ensure it remains fixed in place

I have successfully implemented a bootstrap button that is vertically aligned in a column on the left side of the screen using the code below: <div class="col-sm-1 align-self-center"> <button class="btn btn-prima ...

htmlcssbootstrap-5

Adjust the color of a specific cell within a table using JavaScript

I am looking to dynamically change the row color based on the content of a <td> tag using only HTML, CSS, or JS within my current application setup that does not support external src. Below is the code snippet: table { width: 750px; border-c ...

javascripthtmlcss