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>
>Solution :
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>