What is the process for displaying or hiding a large image when clicking on thumbnail images?

How can I toggle the display of a large image by clicking on thumbnails?

This is what I am looking for:

Check out this JSFiddle version http://jsfiddle.net/jitendravyas/Qhdaz/

If not possible with just CSS, then a jQuery solution is acceptable.

Is it okay to use <a href="#"> even if no new page will open in the same or new tab?

Edit:

I also need it to work on iPads

Answer №1

Check out this demonstration:

Avoid preloading

HTML:

<div id="big-image">
    <img src="http://lorempixel.com/400/200/sports/1/">
</div>

<div class="small-images">
    <a href="http://lorempixel.com/400/200/sports/1/"><img src="http://lorempixel.com/100/50/sports/1/"></a>
<a href="http://lorempixel.com/400/200/fashion/1/" class=""><img src="http://lorempixel.com/100/50/fashion/1/"></a>
<a href="http://lorempixel.com/400/200/city/1/"><img src="http://lorempixel.com/100/50/city/1/"></a>
</div>

Javascript (jQuery)

$(function(){
    $(".small-images a").click(function(e){
        var href = $(this).attr("href");
        $("#big-image img").attr("src", href);
        e.preventDefault();
        return false;
    });
});

At the moment, there is only 1 large image; when an A element is clicked, its href attribute is copied as the SRC of the large image.

Live demo: http://jsfiddle.net/Qhdaz/1/

If you want to achieve this without additional DOM manipulation, you can include 3 big images and load them directly. The previous method does not preload the images, but the following function will.

With preloading

HTML:

<div id="big-image">
    <img src="http://lorempixel.com/400/200/sports/1/">
    <img src="http://lorempixel.com/400/200/fashion/1/">
    <img src="http://lorempixel.com/400/200/city/1/">
</div>

<div class="small-images">
    <img src="http://lorempixel.com/100/50/sports/1/">
    <img src="http://lorempixel.com/100/50/fashion/1/">
    <img src="http://lorempixel.com/100/50/city/1/">
</div>

Javascript:

$(function(){
    $("#big-image img:eq(0)").nextAll().hide();
    $(".small-images img").click(function(e){
        var index = $(this).index();
        $("#big-image img").eq(index).show().siblings().hide();
    });
});

http://jsfiddle.net/Qhdaz/2/

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

A guide on parsing a stringified HTML and connecting it to the DOM along with its attributes using Angular

Looking for a solution: "<div style="text-align: center;"><b style="color: rgb(0, 0, 0); font-family: "Open Sans", Arial, sans-serif; text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing e ...

Can a client-side React component or application be hosted on a server-side Express route?

Currently, I have a Node/Express backend that utilizes Pug.js to render various server-side routes for a basic, static website. In React.js, I have developed an interactive "builder" component through CRA, enabling visitors to configure products interacti ...

Using jQuery to Retrieve the HTTP Status Code in the $.ajax.error Function

Currently, I am utilizing jQuery for an AJAX request. Depending on whether the HTTP status code indicates a 400 error or a 500 error, I wish to execute different actions. How can I go about achieving this? $.ajax({ type: 'POST', url: &ap ...

Encountering a CSS syntax error within CodeSandbox when attempting to input code within brackets

Why is it that I don't see syntax errors in VSCode, but always encounter them in CodeSandbox? What could be causing this discrepancy and how can I resolve it? Any advice would be greatly appreciated. Thank you in advance. Here's an example of th ...

Struggling with updating an array in state using setState?

Currently, I am working on a React app that involves taking user input, filtering array data based on that input, and updating another field in the same data. However, I have encountered difficulties when trying to use setState to make these changes. Addit ...

Plugin for creating custom dropdown menus using JQuery

Recently stumbled upon a new JQuery plugin for Dropdown menus, but struggling to figure out how to use it without any documentation provided. Here is the link to check it out: http://code.google.com/p/jqueryselectcombo/ Are there any alternative free plug ...

"Selecting options from a range - Bootstrap multiple

Currently, I am in the process of implementing a multiple-choice tick box for PHP. The code I have so far is as follows: <div class="container"> <div class="row"> <div class="col-lg-6"> <div class="input-group"> <span class="inp ...

Struggling with resizing a webcam feed to fit the dimensions of the iframe container?

I'm facing a challenge embedding a camera feed into a webpage that needs to display manual focus and servo controls. The issue lies in the content scaling within the iframe. Even though the iframe boundary resizes according to the window's width ...

Adding DIV classes and IDs to my stylesheet

This is the code that I added to my Stylesheet: .friend { border:4px dashed 008000; } .enemy { border:2px dashed 008000; } .family { border:2px dashed 008000; } #archnemesis { border:4px solid 008000; } * { border:4px ...

Modify the Google Maps icon based on the type of data within an array dynamically

Being new to the world of JavaScript, I've been given the task of converting an old jVector map to the Google Maps API. Surprisingly, I think I'm making good progress! I've successfully populated the map with the right markers in their assig ...

Optimizing Angular for search engines: step-by-step guide

Regarding Angular SEO, I have a question about setting meta tags in the constructors of .ts files. I have implemented the following code: //To set the page title this.titleServ.setTitle("PAGE TITLE") //To set the meta description this.meta.addTag ...

Styling the Next and Previous Page Links in your WordPress Website

Currently working on developing my own custom Wordpress theme and everything is going well, except for one little detail. I am trying to customize the styling of my next/previous page links so that the next page-link appears on the right side and the previ ...

Creating dynamic dropdown menus within a Rails 3 form using Prototype and incorporating database queries

Recently, I've been on the hunt for a seamless method to create dynamic dropdown menus within a form that can be populated with data from a database based on the selection of a previous dropdown. Unfortunately, my search for a suitable Rails 3/prototy ...

Using React client to accept messages from a Socket.io server: A guide

I have a setup where a Node.js server with Socket.io is used to send messages between React clients. Currently, I can send a message from Client 1 to Client 2, but the recipient must click a button to view the message on their screen. I am trying to make i ...

What is the best way to implement restful instead of query syntax in a $resource factory?

Recently, I set up a $resource factory like this: (function() { 'use strict'; app.factory('WidgetFactory', [ '$resource', function($resource) { return $resource('http://localhost:8282/widget/:widgetId&apo ...

How to effectively compare time duration with a timer in the Laravel framework

I am managing a table that stores various job entries for employees. Each job entry includes a column for duration. I would like to trigger an alert or other event when the duration of a job has ended. My project is built using Laravel and VueJS. Below i ...

React - Anticipated an assignment or invocation of a function

Recently starting my journey with reactjs and encountered a small issue. A pesky error keeps popping up saying: Expect an assignment or function call. It's related to the User function, however, I do call that function when creating a new object. Any ...

Tips for managing the return value of a PHP function in AJAX requests

Looking for some help with inserting HTML form data using PHP and Ajax. Below is the code I've written: <!DOCTYPE HTML> <html lang="en"> <head><title>Ajax Test</title> <meta charset="utf-8" name="viewport" con ...

Responsive Bootstrap 5 table - occupies full width on mobile devices, adjusts automatically on desktop screens

Is there a way to create a table that is full width on mobile using pure bootstrap classes, but only auto width on desktop? I attempted to achieve this with the following code: <table class="table table-bordered w-md-auto w-100 text-start mb-2&quo ...

What causes these images to stack on top of one another rather than align in rows? [HTML][CSS][Bootstrap]

I've implemented Bootstrap's grid system to showcase two rows, each containing two images. Here is the code: <section class="container"> <div class="row"> <figure class="column-sm-6"> <p>floor pl ...