Change image style and title

Question

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 class="custom-slider-section"> <div class="custom-container"> <div class="custom-slider"> <div class="custom-slider__title"> <span>Title </span> </div> <div class="main-image"> <img src="https://i.picsum.photos/id/973/200/300.jpg?hmac=gFjS6R63ZUmM9pkLFyPxuEmsxvZ_e8VJxB3mcXpvTUQ"> </div> <div class="img-to-select"> <div class="img-to-select__item selected"> <img src="https://i.picsum.photos/id/973/200/300.jpg?hmac=gFjS6R63ZUmM9pkLFyPxuEmsxvZ_e8VJxB3mcXpvTUQ"> </div> <div class="img-to-select__item"> <img src="https://i.picsum.photos/id/732/200/300.jpg?hmac=mBueuWVJ8LlL-R7Yt9w1ONAFVayQPH5DzVSO-lPyI9w"> </div> <div class="img-to-select__item"> <img src="https://i.picsum.photos/id/230/200/300.jpg?hmac=pyhlpgJN2oBeEzhJbnJYrCsLoJM6MKd_NUQGIQhVx5k"> </div> <div class="img-to-select__item"> <img src="https://i.picsum.photos/id/377/200/300.jpg?hmac=veEWg3ApI7rkKqMF6MuaWBmxPgnEe-Ar9eDdMG3q-kk"> </div> </div> </div> </div> </div>

Answer 1

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 class="custom-slider-section"> <div class="custom-container"> <div class="custom-slider"> <div class="custom-slider__title"> <span>Title 1 </span> </div> <div class="main-image"> <img src="https://i.picsum.photos/id/973/200/300.jpg?hmac=gFjS6R63ZUmM9pkLFyPxuEmsxvZ_e8VJxB3mcXpvTUQ" data-title="Title 1"> </div> <div class="img-to-select"> <div class="img-to-select__item selected"> <img src="https://i.picsum.photos/id/973/200/300.jpg?hmac=gFjS6R63ZUmM9pkLFyPxuEmsxvZ_e8VJxB3mcXpvTUQ" data-title="Title 1"> </div> <div class="img-to-select__item"> <img src="https://i.picsum.photos/id/732/200/300.jpg?hmac=mBueuWVJ8LlL-R7Yt9w1ONAFVayQPH5DzVSO-lPyI9w" data-title="Title 2"> </div> <div class="img-to-select__item"> <img src="https://i.picsum.photos/id/230/200/300.jpg?hmac=pyhlpgJN2oBeEzhJbnJYrCsLoJM6MKd_NUQGIQhVx5k" data-title="Title 3"> </div> <div class="img-to-select__item"> <img src="https://i.picsum.photos/id/377/200/300.jpg?hmac=veEWg3ApI7rkKqMF6MuaWBmxPgnEe-Ar9eDdMG3q-kk" data-title="Title 4"> </div> </div> </div> </div> </div>

Answer 2

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. ie

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