Soy nuevo en javascript y jquery. ¿Cómo puedo hacer que la imagen principal cambie al hacer clic en la imagen de abajo y también cambiar el título de cada imagen?
Logré hacer que la imagen cambie, pero también quiero agregar estilos que también cambiarán para todo y me quedé atascado con el título.
$('.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>Para cambiar estilos, use addClass y removeClass . Y para el título, simplemente agregue un nuevo atributo que cambiará junto con la imagen.
$('.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>Para agregar el título:
$(".custom-slider__title span").text($(this).children('img').data("title"));Para agregar una clase a la imagen principal
$('.main-image > img').addClass("my-class");Para quitar una clase de la imagen principal
$('.main-image > img').removeClass("my-class");Estos comandos se pueden encadenar. es decir
$('.main-image > img').attr('src', $(this).children('img').attr('src')); }).removeClass("old-class").addClass("new-class");