I am new to javascript and jquery. How can I make the main image change when clicking on the image below, and also change the title for each image?

I managed to make the picture change, but I also want to add styles that will also change for everything and got stuck with the title

$('.img-to-select__item').click(function () {
  $('.main-image > img').attr('src', $(this).children('img').attr('src'));
});

.custom-slider {
  text-align: center;
}
.main-image > img {
  margin-top: 5px;
  width: 50px;
  border-radius: 100px;
  box-shadow: 0 0 0 3px pink, 0 0 13px #333;
}
.img-to-select > .img-to-select__item > img {
  width: 30px;
  border-radius: 100px;
  height: 100%;
}
.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 {
   height: 100%;
   border-radius: 100px;
   border: 3px solid pink; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div >
  <div >
    <div >
      <div >
        <span>Title
        </span>
      </div>
      <div >
        <img src="https://i.picsum.photos/id/973/200/300.jpg?hmac=gFjS6R63ZUmM9pkLFyPxuEmsxvZ_e8VJxB3mcXpvTUQ">
      </div>
      <div >
        <div >
          <img src="https://i.picsum.photos/id/973/200/300.jpg?hmac=gFjS6R63ZUmM9pkLFyPxuEmsxvZ_e8VJxB3mcXpvTUQ">
        </div>
        <div >
          <img src="https://i.picsum.photos/id/732/200/300.jpg?hmac=mBueuWVJ8LlL-R7Yt9w1ONAFVayQPH5DzVSO-lPyI9w">
        </div>
        <div >
          <img src="https://i.picsum.photos/id/230/200/300.jpg?hmac=pyhlpgJN2oBeEzhJbnJYrCsLoJM6MKd_NUQGIQhVx5k">
        </div>
        <div >
          <img src="https://i.picsum.photos/id/377/200/300.jpg?hmac=veEWg3ApI7rkKqMF6MuaWBmxPgnEe-Ar9eDdMG3q-kk">
        </div>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

To change styles, use addClass and removeClass. And for the title, just add a new attribute that will change along with the picture

$('.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-slider__title > span').html($(this).children('img').attr('data-title'));
});

.custom-slider {
  text-align: center;
}
.main-image > img {
  margin-top: 5px;
  width: 50px;
  border-radius: 100px;
  box-shadow: 0 0 0 3px pink, 0 0 13px #333;
}
.img-to-select > .img-to-select__item > img {
  width: 30px;
  border-radius: 100px;
  height: 100%;
}
.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 {
   height: 100%;
   border-radius: 100px;
   border: 3px solid pink; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div >
  <div >
    <div >
      <div >
        <span>Title 1
        </span>
      </div>
      <div >
        <img src="https://i.picsum.photos/id/973/200/300.jpg?hmac=gFjS6R63ZUmM9pkLFyPxuEmsxvZ_e8VJxB3mcXpvTUQ" data-title="Title 1">
      </div>
      <div >
        <div >
          <img src="https://i.picsum.photos/id/973/200/300.jpg?hmac=gFjS6R63ZUmM9pkLFyPxuEmsxvZ_e8VJxB3mcXpvTUQ" data-title="Title 1">
        </div>
        <div >
          <img src="https://i.picsum.photos/id/732/200/300.jpg?hmac=mBueuWVJ8LlL-R7Yt9w1ONAFVayQPH5DzVSO-lPyI9w" data-title="Title 2">
        </div>
        <div >
          <img src="https://i.picsum.photos/id/230/200/300.jpg?hmac=pyhlpgJN2oBeEzhJbnJYrCsLoJM6MKd_NUQGIQhVx5k" data-title="Title 3">
        </div>
        <div >
          <img src="https://i.picsum.photos/id/377/200/300.jpg?hmac=veEWg3ApI7rkKqMF6MuaWBmxPgnEe-Ar9eDdMG3q-kk" data-title="Title 4">
        </div>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

For Adding the Title:

$(".custom-slider__title span").text($(this).children('img').data("title"));

To Add a Class to the main image

$('.main-image > img').addClass("my-class");

To Remove a Class from the main image

$('.main-image > img').removeClass("my-class");

These commands can be chained. i.e.

$('.main-image > img').attr('src', $(this).children('img').attr('src')); }).removeClass("old-class").addClass("new-class");