Image switch on click through thumbnails

I'm currently learning how to create a basic image gallery.

The setup consists of a main large image in the center with two smaller thumbnails, one positioned at the top left corner and the other at the bottom right corner.

<div class="images_gallery">
    <div class="small_top_left thumbnail"> <a href="#triggerlarge"></a><img src="small_top_A.jpg"/></div>

        <div class="large middle visible"><img src="large_imageC.jpg"></div>
        <div class="large middle hidden"><img src="large_imageA.jpg"></div>
        <div class="large middle hidden"><img src="large_imageB.jpg"></div>

    <div class="small_bottom_right thumbnail"> <a href="#triggerlarge"></a><img src="small_bottom_B.jpg"/></div>    
</div>

From my understanding, there are three larger images in total, with one displayed as visible while the other two remain hidden. Clicking on a thumbnail will reveal its corresponding larger version and switch places with the previous large image.

Thank you for any guidance provided.

jquerycssimage

Answer №1

Just a tip: It's always recommended to use IDs on elements you wish to refer to in jQuery for significant improvement in performance.

Regarding your inquiry, here is how I would approach it:

Here is the markup:

<div id="images_gallery">
  <div class="small_top_left thumbnail"><img src="small_A.jpg" data-image='A'/></div>

    <div class="large middle"><img src="large_imageC.jpg" data-image='C'></div>
 <div class="small_bottom_right thumbnail"> <img src="small_B.jpg" data-image='B'/></div>
 </div>

Next, the JavaScript part:

 $(document).ready(function() {

     $("#images_gallery .thumbnail img").click(function() {

          var next_data = $("#images_gallery .large img").attr('data-image');
          var next_thumb = "small_" + next_data + ".jpg";

          var large_data = $(this).attr("data-image");
          var large = "large_image"+ large_data +".jpg";

          $("#images_gallery .large img").attr('src', large).attr('data-image', large_data);
          $(this).attr('src', next_thumb).attr('data-image', next_data); 
     });


});

Ultimately, name your images small_A.jpg, small_B.jpg, small_C.jpg, and large_image_A.jpg...

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

What is the best way to create a responsive grid layout for my form using Bootstrap?

I have designed a form using bootstrap 5 with 1 row containing 4 columns (1 dropdown menu and 3 buttons). While it looks fine on my desktop, the problem arises when I view the page on a mobile device. The buttons shrink and remain on the same row instead o ...

htmlcssbootstrap-5

Combining and consolidating JSON attributes

I am working with a JSON object that has multiple instances of the email property, like so: accounts": [ { "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="61120e0c04030e051821050e0c">[email protected]</a& ...

javascriptjqueryjsongrouping

Toggle Class Based on Scroll Movement

I am currently designing an HTML page that includes a small navigation bar located halfway down the page. I am aiming to have this navigation bar stick to the top of the page (become fixed) once it reaches the top. Here is the code I have tried: The scrip ...

javascriptjqueryhtmlcss

sending JSON information to a Spring MVC handler

I'm looking to send a JSON string to my Spring MVC controller without any form bindings. I just want to send plain JSON data directly to the Controller class. Currently, I am using a jQuery AJAX call with the following code snippet: $.ajax ({ url ...

jsonjqueryspring-mvccontroller

Search for specific phrases within one div and display a span if those phrases match text in another div using jQuery and JavaScript

I want to display the quantity in stock of a product even when there is an out of stock message associated with it: <div class="OutOfStockMessage">Sorry, Avocado is not available in the quantity that you selected. Please select a lower quantity to b ...

jquerytextmatchpartial

How to customize the color of Navbar pills in Bootstrap 4 to fill the entire height

Is there a way to ensure that the background of nav-items is completely filled with color rather than just partially? I attempted to use Bootstrap pills, but it did not achieve the desired effect. I also experimented with my own CSS, but encountered simil ...

javascripthtmlcssbootstrap-4twitter-bootstrap-4

What is the best way to ensure a sidebar's height matches the height of the content in a two-column table using div elements?

Just finished setting up a 2-column layout with a content div, sidebar div, header, and footer. You can check out the live example here. Any tips on how to make the sidebar's height match the content height (like a 2-column table)? Utilizing jquery ...

csslayouthtml

Issue with detaching Ember and jQuery plugins

I have encountered an issue in my Ember app while attempting to update the DOM by detaching an element and appending it elsewhere. var comp = Ember.$(this.element).detach(); Ember.$("#some-sec").append(comp); After performing this operation, the previous ...

javascriptjqueryember.js

Creating a grid layout: Is there a way to instruct the renderer to disregard any additional tags in between

I have been setting up a grid layout with some divs, following this structure: CSS .grid { width: 300px; display: grid; grid-template-columns: 50% 50%; } HTML <div class="grid"> <div>First cell</div> <div>Second cell&l ...

htmlangularcssgrid-layout

Creating a JSON schema in JavaScript using an already established JSON framework

I have a json structure stored in a variable called "data" that looks like this: { "SearchWithMasterDataDIdAndScandefinitionDAO": [ { "dateDm_id": 20120602, "issueValue": "ELTDIWKZ", "scanName": "Company Stored as Person (Give ...

javascriptjqueryjson

When aligning divs at the center, they may not all be perfectly in a straight

My goal is to align 4 div boxes in a vertical line using the translate method typically used for centering objects on a webpage. Here is the code snippet I have utilized: link .body-component { position: relative; margin: 10px; color: #000; disp ...

htmlcss

Tips on transferring a Rails variable to Ajax

Struggling to integrate a progress bar (Javascript) into my Ruby on Rails application, I am facing difficulties in passing values from the controller to JS for updating the bar. In my initial attempt, I used a basic global variable ($count), but it remain ...

javascriptjqueryruby-on-railsrubyajax

Populate the div with the URL parameter only when another span element is empty after a specified time interval using setTimeout

When displaying a person's name on a page, there are two different methods to consider. It can be extracted from the URL or retrieved from an email form in the CMS used. However, these two approaches sometimes conflict with each other. Currently, I h ...

javascriptjqueryhtmlcss

Having difficulty populating a selection box through an ajax request in Django

I am facing an issue with creating cascading select boxes in my project (backend Django), although I believe most of the backend work has been completed. The JavaScript code I'm using is adapted from a solution found on a stackoverflow post. $(docume ...

javascriptjqueryajax

Instructions for submitting three different forms from three separate pages simultaneously

I am facing a challenge where I have 3 forms spread across 3 different pages, with the submit button located on the 3rd page. Is there a way to submit all 3 forms simultaneously by clicking on the submit button? Are there any solutions available in javascr ...

javascriptjqueryajaxhtml

The customized cursor image fails to load after switching the application URL from http to https

After implementing a redirect from http to https in my application, I encountered an issue with custom cursor images not displaying as intended. Prior to the redirect, the custom cursor images worked fine and were visible on the page. The URL for these cur ...

javascriptjquerycsshttpscustom-cursor

The strict use of `use strict` can result in an undefined

I've been working on organizing my JavaScript file and decided to use a module pattern as suggested. However, I encountered an issue when using "use strict" in this pattern where a function is declared as undefined. Surprisingly, without the "use stri ...

jqueryfunctionundefineduse-strict

Responsive Menu Design with Bootstrap 3.x

In my web design, I have utilized Bootstrap 3.3.7 and it works flawlessly on mobile, desktop, and laptop devices. However, I have noticed that the three-bar menu does not appear on tablets when using the default Bootstrap navbar: <nav class="navbar nav ...

csstwitter-bootstrap

Dividing the sentences inputted into a text area into an array and determining which sentence has been altered upon keyup

One of my current tasks involves handling the content within a textarea element: <textarea id="text"> Hello! Who am I? This is the third sentence. This, is another sentence. </textarea> Given that a textarea can be focused, I am seeking a met ...

javascriptjquerysplit

Creating round corners for images with jQuery

To achieve rounded corners on multiple blocks using a single image above, I am opting for the use of images instead of plugins for maximum compatibility. This involves creating wrappers around the blocks to apply the corner images: <div class="wrapper- ...

jqueryhtmlcssrounded-corners