Switch out the smaller thumbnail image with a more enlarged image

Im pretty new to web programming and im working on a site now. In one part of this site, I have collections of 3 pictures. 1 larger one and two smaller thumbnails below it. The goal is to create a way in which i can click on one of the thumbnails and they swap spots with the one large picture. any idea how I would go about doing this? Heres a snippet of code. Thanks!

<div class = 'picture-container'>
            <div class = 'large-picture' id = 'lp1'>
                <figure style = 'float:left;width:45%;'>
                    <img src = 'close_table_dupontstudios.png' width = '100%' height = '100%' class = 'no-mobile'>
                    <figcaption class = 'red-cap'>Our Set-Up</figcaption>
                </figure>
                <div class = 'picture-content'>
                    <div class = 'picture-title'>BOUTIQUE PRODUCTION STUDIO</div>
                    <div class = 'picture-text'>We built a boutique full service production studio that allows for one, two and three person filmed interviews and conversations. We have studio lights, a three camera set-up and remote monitoring. Additionally, our Infinity Wall creates a clean and professional look that allows the film to be about the message.</div>
                    <!--<div class = 'small-picture'>
                        <img src = 'hair_and_makeup_dupontstudios.png' width = '175' height = '100'>
                    </div>
                    <div class = 'small-picture'>
                        <img src = 'infinity_wall_dupontstudios.png' width = '175' height = '100'>
                    </div>-->
                </div>
                <div class = 'thumbnail-container'>
                    <figure class = 'thumbnail'>
                        <img src = 'infinity_wall_dupontstudios.png' width = '100%' height = '100%'>
                    </figure>
                    <figure class = 'thumbnail'>
                        <img src = 'infinity_wall_dupontstudios.png' width = '100%' height = '100%'>
                    </figure>
                </div>
            </div>
        </div>
javascripthtmlcssthumbnails

Answer №1

There are multiple strategies for resolving this issue. A simple method involves displaying only one image at a time by hiding all other images, both large and small.

In the HTML code, large images are assigned a class of hidden (with the CSS property display: none) except for the first image. The correct large image is then displayed when the corresponding thumbnail is clicked.

Linking the thumbnails to the large images can be achieved by using identifiers. Below is an example of setting the thumbnail link's href to the large image id:

<a href="#lp1">
  <figure class="thumbnail">...</figure>
</a>

Next, the JavaScript (jQuery) code is added:

// Select all large images
var largeImages = $('figure.large');
// Add click handler for thumbnails
$('.thumbnail-container').on('click', 'a', function (e) {
    e.preventDefault();
    var thumbnailLink = $(this),
        selectedLarge = $(thumbnailLink.attr('href'));
    // Hide all large images
    largeImages.addClass('hidden');
    // Show the large image corresponding to the clicked thumbnail
    selectedLarge.removeClass('hidden');
});

While the hide/show method is simple, it may not be the most efficient as it requires all images to be loaded even if they are hidden.

A more efficient approach involves using data- attributes in the thumbnails. In the click handler for the thumbnails, the large content area is updated with data from the clicked thumbnail. To switch the image, simply update the src attribute.

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

Can Hapi-Joi validate a payload consisting of either an Array of objects or a plain Javascript object?

How can I create a schema to validate payloads for a post call that accepts either a single JS object or an array of objects to be saved in the database? JS object { label: 'label', key: 'key', help_text: 'text' } ...

javascriptnode.jshapi.jsjoi

Scroll-triggered animation of SVG paths in React

While achieving this in vanilla Javascript is relatively simple (check out this for an example), I'm encountering difficulties implementing it in React, especially with a library like Framer Motion for animations. Framer Motion's useViewPortScro ...

javascriptreactjssvgframer-motion

Passing a variable through jQuery onClick event to a URL via GET request and subsequently loading the content of

After successfully passing variables through AJAX calls via onClick to a PHP file and loading the results on the initial page, I now face the challenge of passing a variable analogously via onClick to a PHP file but this time I need to either open a new wi ...

javascriptjqueryajax

How to ensure that a div element occupies the entire height of the webpage

After developing a small app in Angular, I'm looking to make the container element expand to the full height of the page, even when the content doesn't fill the entire space. On larger screens, the page doesn't stretch as desired. Here' ...

cssangularjs

The function fails to return a true value

Why is true never returned even when the given name exists in the array rows and the if(rows[i].userName == name) condition is met? function checkIfUserExists(name){ var isUserExists = false; OOTW.MYSQL.query('SELECT * FROM Time',functio ...

javascriptnode.jsfunctionreturn

What is the best method for inserting space between two divs?

I need to create more space between the last two cards and the image at the bottom, but this spacing should increase as I resize the browser window. Can anyone help me with this? https://i.stack.imgur.com/rq9t2.png https://i.stack.imgur.com/tOikx.png Th ...

htmlcssimageresponsive-design

The carousel indicators in Bootstrap 4 are not responding to the CSS styles

I'm having trouble customizing the bootstrap 4 carousel indicators to look like the example image below. https://i.sstatic.net/Xdmim.png .carousel-indicators { width: auto; padding: 8px 18px; background-color: rgba(96,107,114,.8); ...

htmlcsstwitter-bootstrapbootstrap-4

The Bootstrap row does not display divs in a stacked formation when viewed on smaller screens

My layout is using bootstrap rows for two divs. I want them to be side by side on large devices, but stacked on small devices. However, Bootstrap is not stacking them on small devices and they are still both sitting at 50%. The specific divs I am talking ...

htmlcsstwitter-bootstrap

Using vue-select: In VueJs, how to pass an option slot from a grandparent component

Utilizing a custom dropdown component called 'vue-select', there is an option to customize the options view using slots as detailed in this documentation -> https://vue-select.org/guide/slots.html I am aiming to achieve a similar customizatio ...

javascriptvue.jsvuejs2vue-select

Ways to determine the height of a row within a flexbox

Is it possible to obtain the height of each row within a flexbox container using JavaScript? For instance, if there are 3 rows in the container, can I retrieve the height of the second row specifically? ...

javascripthtmlcssflexboxrow

Tips for utilizing import alongside require in Javascript/Typescript

In my file named index.ts, I have the following code snippet: const start = () => {...} Now, in another file called app.ts, the code is as follows: const dotenv = require('dotenv'); dotenv.config(); const express = require('express' ...

javascriptnode.jstypescriptexpress

The FormControlLabel radio button within the RadioGroup is experiencing difficulty in becoming selected

Utilizing a RadioGroup component to showcase a dynamic list of Radio options using FormControlLabel. The dynamic radio choices are appearing correctly on the screen and I can obtain the selected radio option through onChange in RadioGroup. However, after s ...

javascriptreactjsmaterial-ui

Utilize a function on specific attribute values

I have a function in JavaScript that is designed to convert all relative URLs into absolute URLs. function rel2Abs(_relPath, _base); //_relPath represents the relative path //_base indicates the base URL Now, my objective is to implement this function on ...

javascriptjqueryajaxregexurl

Struggling to make the fgetcsv file function seamlessly with my MySQL database

I have been attempting to use the fgetcsv function to import all rows of a CSV file into my database. This functionality should be straightforward, but for some reason it is not working as expected. Below is the code I am using: <?php $file = $_FILES[ ...

phphtmlmysqlcsvfgetcsv

Is Vercel deploying an incorrect version?

After working on a project for a potential employer and fixing all errors, I deployed it using Vercel. However, upon deployment, the version that was sent to me was displayed instead of the completed one I see when running npm start locally. I would great ...

javascriptreactjsnpmgoogle-cloud-firestorevercel

In what way can I incorporate additional functions or multiple functions within an Express route to modify database information?

Currently, I am working on a project that involves Express and MySQL. One of the challenges I am facing is retrieving data from a connection.query and then utilizing that data in other functions within the same route. My goal is to use the array created in ...

javascriptmysqlnode.jsexpress

Sending a parameter to a confidential npm module

I've developed a custom npm module that can be used in my applications by including this code snippet in the HTML: <app-header-name></app-header-name> Here is the TypeScript code inside the npm package: import { Component, OnInit } from & ...

javascriptnode.jsangulartypescriptnpm

Sending various FormData instances to Node Express

I am facing a challenge where I need to submit three forms with just one click. The data collected from these forms should then create three separate rows in the database through an API, triggering a POST request. How can I effectively pass all this data ( ...

javascriptnode.jsformsexpressmultipartform-data

Adjustable image within a div based on the length of the title when viewed in Edge browser

I am facing an issue with a div element. Here is the code snippet: <div fxLayout="column" fxLayoutGap="20px"> <h1 class="mat-display-1">Welcome to $TITLE$</h1> <img *ngIf="logoData" [src]="logoData" class="logo" alt="logo"/> &l ...

htmlcssangular

`Optimizing Performance using jQuery Functions and AJAX`

As someone exploring ajax for the first time, I'm eager to learn how to write jQuery code that ensures my simple functions like slideshows and overlays still work smoothly when a page is loaded via ajax. Currently, I am implementing the following met ...

javascriptjqueryajax