Home > OS >  Change different pictures on click
Change different pictures on click

Time:11-19

I have a block where the main picture changes when clicked

$('.img-to-select__item').click(function () {
  $('.img-to-select__item').removeClass('selected');
  $(this).addClass('selected');
  $('.main-image > img').attr('src', $(this).children('img').attr('src'));
  $('.custom-carousel__title > span').html($(this).children('img').attr('data-title'));
});
.custom-carousel {
  text-align: center;
}
.main-image > img {
  width:50px;
}
.img-to-select > .img-to-select__item > img {
  heigh:30px;
  width: 30px;
}
.img-to-select {
  overflow: hidden; 
  display: flex; 
  justify-content:space-around;
}
.img-to-select > .img-to-select__item {
   display: flex; 
   justify-content:space-around;
}

.img-to-select > .img-to-select__item.selected {
   border: 2px solid red;
}
 <div class="custom-carousel-section">
  <div class="custom-container">
    <div class="custom-carousel">
      <div class="custom-carousel__title">
        <span>Title
        </span>
      </div>
      <div class="main-image">
        <img src="https://i.picsum.photos/id/939/200/300.jpg?hmac=cj4OIUh8I6eW-hwT25m1_dCA6ZsAmSYixKCgsbZZmXk" alt="" data-title="image-a">
      </div>
      <div class="img-to-select">
        <div class="img-to-select__item selected">
          <img src="https://i.picsum.photos/id/939/200/300.jpg?hmac=cj4OIUh8I6eW-hwT25m1_dCA6ZsAmSYixKCgsbZZmXk" alt="" data-title="image-a">
        </div>
        <div class="img-to-select__item">
          <img src="https://i.picsum.photos/id/309/200/300.jpg?hmac=gmsts4-400Ihde9dfkfZtd2pQnbZorV4nBKlLOhbuMs" alt="" data-title="image-b">
        </div>
        <div class="img-to-select__item">
          <img src="https://i.picsum.photos/id/220/200/300.jpg?hmac=XQWeukbBSi6WSlgZllfOJjG8AQQXS9dYI8IqvKpE1ss" alt="" data-title="image-c">
        </div>
        <div class="img-to-select__item">
          <img src="https://i.picsum.photos/id/494/200/300.jpg?hmac=YdLwRbrTAzFXaAJcsj854mgNuS5jqYM8bcjCzSrSDRM" alt="" data-title="image-d">
        </div>
      </div>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Now everything works so when you click on img-to-select it becomes main-image. But can it be done a little differently?

Let's say there are two fields main_image and preview_image, they will be exactly the same, the only size is different

Suppose we have one main-test.jpg picture, it is in the main-image class, and exactly the same picture, only with a smaller size preview-test.jpg in class img-to-select

And there are several such pictures

main-test-1.jpg and preview-test-1.jpg
main-test-2.jpg and preview-test-2.jpg
main-test-3.jpg and preview-test-3.jpg
main-test-4.jpg and preview-test-4.jpg

The code will now look like this

<div class="main-image">
   <img src="main-test-1.jpg" alt="" data-title="image-a">
   //The rest of the pictures are there but will be hidden until we select the desired one
   <img src="main-test-2.jpg" alt="" data-title="image-a">
   <img src="main-test-3.jpg" alt="" data-title="image-a">
   <img src="main-test-4.jpg" alt="" data-title="image-a">

</div>
<div >
   <div >
      <img src="preview-test-1.jpg" alt="" data-title="image-a">
   </div>
   <div >
      <img src="preview-test-2.jpg" alt="" data-title="image-a">
   </div>
   <div >
      <img src="preview-test-3.jpg" alt="" data-title="image-a">
   </div>
   <div >
      <img src="preview-test-4.jpg" alt="" data-title="image-a">
   </div>

And now when we click on preview-test-1.jpg we display main-test-1.jpg, when we click on preview-test-2.jpg we display main-test-2.jpg and so on

Can this be done?

CodePudding user response:

Similar to how you're handling the data-title, you can add another data attribute to the img tag that defines its "main" image, while the src remains the "preview" image.

<img src="https://www.previewimage.com/" data-main-src="https://placekitten.com/201/301">

Then in JS, instead of pulling the src of the img, read the data-main-src value and set that as the main src:

$('.main-image > img').attr('src', $(this).children('img').data('main-src'));

$('.img-to-select__item').click(function () {
  $('.img-to-select__item').removeClass('selected');
  $(this).addClass('selected');
  $('.main-image > img').attr('src', $(this).children('img').data('main-src'));
  $('.custom-carousel__title > span').html($(this).children('img').attr('data-title'));
});

// trigger this on page load so the "main" image is displayed instead of the preview.
$('.img-to-select__item.selected').click();
.custom-carousel {
  text-align: center;
}
.main-image > img {
  width:50px;
}
.img-to-select > .img-to-select__item > img {
  heigh:30px;
  width: 30px;
}
.img-to-select {
  overflow: hidden; 
  display: flex; 
  justify-content:space-around;
}
.img-to-select > .img-to-select__item {
   display: flex; 
   justify-content:space-around;
}

.img-to-select > .img-to-select__item.selected {
   border: 2px solid red;
}
<div class="custom-carousel-section">
  <div class="custom-container">
    <div class="custom-carousel">
      <div class="custom-carousel__title">
        <span>Title
        </span>
      </div>
      <div class="main-image">
        <img src="" alt="" data-title="">
      </div>
      <div class="img-to-select">
        <div class="img-to-select__item selected">
          <img src="https://i.picsum.photos/id/939/200/300.jpg?hmac=cj4OIUh8I6eW-hwT25m1_dCA6ZsAmSYixKCgsbZZmXk" alt="" data-title="image-a" data-main-src="https://placekitten.com/200/300">
        </div>
        <div class="img-to-select__item">
          <img src="https://i.picsum.photos/id/309/200/300.jpg?hmac=gmsts4-400Ihde9dfkfZtd2pQnbZorV4nBKlLOhbuMs" alt="" data-title="image-b" data-main-src="https://placekitten.com/201/301">
        </div>
        <div class="img-to-select__item">
          <img src="https://i.picsum.photos/id/220/200/300.jpg?hmac=XQWeukbBSi6WSlgZllfOJjG8AQQXS9dYI8IqvKpE1ss" alt="" data-title="image-c" data-main-src="https://placekitten.com/202/302">
        </div>
        <div class="img-to-select__item">
          <img src="https://i.picsum.photos/id/494/200/300.jpg?hmac=YdLwRbrTAzFXaAJcsj854mgNuS5jqYM8bcjCzSrSDRM" alt="" data-title="image-d" data-main-src="https://placekitten.com/203/303">
        </div>
      </div>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

  • Related