On click, the current image should be replaced with the thumbnail image

Question

On click, the current image should be replaced with the thumbnail image

I have been working on a project and came across a codepen link https://codepen.io/robgolbeck/pen/bVGmop that is similar to what I need. However, I am trying to achieve a specific functionality where clicking on a thumbs image replaces the large image with the clicked one and removes it from the thumbs list. I want only 5 images in rotation, but currently there are 6 (5 + 1 repeated in thumbs). I've attempted to modify the JS code without success. Can anyone provide guidance on this issue? I've been stuck on it all morning. Thank you in advance.

JS

$('#thumbs img').click(function(){
  $('#largeImage').attr('src', $(this).attr('src').replace('thumb','large'));
  $(this).attr('src',$('#largeImage').attr('src').replace('large','thumb'));
});

javascript jquery html css image

Answer 1

Answer №1

When handling the click event for #thumbs img, start by displaying all images and then hiding the current one. You can begin by simulating a click on the first image.

$('#thumbs img').click(function(){
  $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
  $('#description').html($(this).attr('alt'));
  $('#thumbs img').show();
  $(this).hide();
});
$('#thumbs img').first().trigger('click');

Answer 2

When handling the click event for #thumbs img, start by displaying all images and then hiding the current one. You can begin by simulating a click on the first image.

$('#thumbs img').click(function(){
  $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
  $('#description').html($(this).attr('alt'));
  $('#thumbs img').show();
  $(this).hide();
});
$('#thumbs img').first().trigger('click');

Answer 3

Answer №2

You can easily utilize jQuery's show() and hide() functions. Begin by displaying all child elements of #thumbs, then hide the currently selected element using $(this).hide();.

To start with hiding the initial image, you can employ

$('#thumbs').children().first().hide();

$('#thumbs').children().first().hide();
$('#thumbs img').click(function() {
  $('#largeImage').attr('src', $(this).attr('src').replace('thumb', 'large'));
  $('#description').html($(this).attr('alt'));
  $('#thumbs').children().show();
  $(this).hide();
});

#thumbs {
  padding-top: 10px;
  overflow: hidden;
}

#thumbs img,
#largeImage {
  border: 1px solid gray;
  padding: 4px;
  background-color: white;
  cursor: pointer;
}

#thumbs img {
  float: left;
  margin-right: 6px;
}

#description {
  background: black;
  color: white;
  position: absolute;
  bottom: 0;
  padding: 10px 20px;
  width: 525px;
  margin: 5px;
}

#panel {
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="gallery">
  <div id="panel">
    <img id="largeImage" src="http://robgolbeck.com/demos/image-swap/image_01_large.jpg" />
  </div>
  <div id="thumbs">
    <img src="http://robgolbeck.com/demos/image-swap/image_01_thumb.jpg" alt="1st image description" />
    <img src="http://robgolbeck.com/demos/image-swap/image_02_thumb.jpg" alt="2nd image description" />
    <img src="http://robgolbeck.com/demos/image-swap/image_03_thumb.jpg" alt="3rd image description" />
    <img src="http://robgolbeck.com/demos/image-swap/image_04_thumb.jpg" alt="4th image description" />
    <img src="http://robgolbeck.com/demos/image-swap/image_05_thumb.jpg" alt="5th image description" />
  </div>
</div>

Answer 4

You can easily utilize jQuery's show() and hide() functions. Begin by displaying all child elements of #thumbs, then hide the currently selected element using $(this).hide();.

To start with hiding the initial image, you can employ

$('#thumbs').children().first().hide();

$('#thumbs').children().first().hide();
$('#thumbs img').click(function() {
  $('#largeImage').attr('src', $(this).attr('src').replace('thumb', 'large'));
  $('#description').html($(this).attr('alt'));
  $('#thumbs').children().show();
  $(this).hide();
});

#thumbs {
  padding-top: 10px;
  overflow: hidden;
}

#thumbs img,
#largeImage {
  border: 1px solid gray;
  padding: 4px;
  background-color: white;
  cursor: pointer;
}

#thumbs img {
  float: left;
  margin-right: 6px;
}

#description {
  background: black;
  color: white;
  position: absolute;
  bottom: 0;
  padding: 10px 20px;
  width: 525px;
  margin: 5px;
}

#panel {
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="gallery">
  <div id="panel">
    <img id="largeImage" src="http://robgolbeck.com/demos/image-swap/image_01_large.jpg" />
  </div>
  <div id="thumbs">
    <img src="http://robgolbeck.com/demos/image-swap/image_01_thumb.jpg" alt="1st image description" />
    <img src="http://robgolbeck.com/demos/image-swap/image_02_thumb.jpg" alt="2nd image description" />
    <img src="http://robgolbeck.com/demos/image-swap/image_03_thumb.jpg" alt="3rd image description" />
    <img src="http://robgolbeck.com/demos/image-swap/image_04_thumb.jpg" alt="4th image description" />
    <img src="http://robgolbeck.com/demos/image-swap/image_05_thumb.jpg" alt="5th image description" />
  </div>
</div>

Answer 5

Answer №3

It seems like the attr method from jQuery is causing a problem. I recommend using the prop method instead, which can be seen in the code snippet below:

$('#thumbs img').click(function(){
   $('#largeImage').prop('src',$(this).prop('src').replace('thumb','large'));;
    $('#description').html($(this).prop('alt'));
});

Answer 6

It seems like the attr method from jQuery is causing a problem. I recommend using the prop method instead, which can be seen in the code snippet below:

$('#thumbs img').click(function(){
   $('#largeImage').prop('src',$(this).prop('src').replace('thumb','large'));;
    $('#description').html($(this).prop('alt'));
});

Answer 7

Answer №4

$('.thumbnail').on('click', function(){
    
    $(".thumbnail").each(function(){$(this).show();});
    $('#mainImage').attr('src',$(this).attr('src').replace('small','large'));
    $('#details').html($(this).attr('alt'));

    $(this).hide();
});

Answer 8

$('.thumbnail').on('click', function(){
    
    $(".thumbnail").each(function(){$(this).show();});
    $('#mainImage').attr('src',$(this).attr('src').replace('small','large'));
    $('#details').html($(this).attr('alt'));

    $(this).hide();
});

On click, the current image should be replaced with the thumbnail image

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Achieve a Smooth Transition: Utilizing Bootstrap 3 to Create an Alert Box that Fades In upon Click and Fades Out

Is it possible to achieve a fade effect in material-ui that truly hides the component instead of just disabling its visibility? If so, how can this be accomplished?

Is it possible to prevent the text from appearing in the text box when a button is

A lengthy string of characters within a continuous paragraph without any interruptions

JavaScript Page Search - Error in Finding Single Result

How can you easily center content vertically on a web page?

Implementing a Toggle Class Feature in a Function

unable to view the contents of the template using the directive

From where was this color of the navigation bar derived?

Discover the power of EJS embedded within HTML attributes!

Ways to obtain a full number with a leading zero

Identifying when a fetch operation has completed in vue.js can be accomplished by utilizing promises

Maintain dropdown menu visibility while navigating

I am facing an issue where the data is not being populated in my form even though I am using ng

Tips for consistently implementing focusVisible design on a targeted Material-UI Button element:

Stopping all animations with JQuery animate()

Using Primeng to implement pagination and lazy loading in a dataView

Extract Content from an Element Using Selenium in Python

What could be the reason that str_replace is failing to replace this particular string?

Experiencing challenges working with the offset class in Bootstrap 4