[jquery]썸네일과 네이게이션버튼을 이미지로 연결하기

카페 24 모바일에는 없는 기능이라 강제로 기존에 존재하던 슬라이드버튼을

또 다른 슬라이드로 만들어 준 뒤 적절히 배치 해서 썸네일에 있는 이미지를 

네비게이션 이미지로 가져오도록 하는 작업을 함.

 

카페 24가 아니었으면 하드코딩으로 금방 가능할 내용이지만

그래도 이왕 해본 거 기록해봄

 

function thumbnail_navi(){

  //클래스 때려넣어서 슬라이드 만들기

  $('.typeSwipe').addClass('swiper');

  $('.typeSwipe').addClass('thumb-slider');

  $('#xans-product-mobileimage-swipe-button-0').addClass('swiper-wrapper');

  $('.circle').addClass('swiper-slide');

var optionswiper = new Swiper(".thumb-slider", {

  slidesPerView: 3.5,

  spaceBetween: 10,

  loop: false,

});

//썸네일 - 네비게이션 버튼 이미지 연결

$('.xans-product-mobileimage>ul>li').each(function(index,el){

  let thumbnailImg = $('.xans-product-mobileimage>ul>li:eq('+(index + 1)+') .ThumbImage').attr('src');

  //각 썸네일 이미지 주소 가져오기

  $('.circle:eq('+(index + 1)+')').css('background-image','url('+ thumbnailImg + ')');

  //슬라이드 버튼 배경이미지에 가져온 썸네일 이미지 주소 차례대로 넣어줌

  //1을 더한 이유는 이상하게도 카페24에 가장 대표 썸네일이 처음에 무조건 보여지기 때문에 이건 건너뛰고 싶어서

});

$('.ec-product-button.ec-product-preview li').each(function(index,el){

  let optionName = $('.ec-product-button.ec-product-preview li:eq('+index+') a span').text();

  $('.circle:eq('+(index + 1)+')').prepend(`<span class='option_name'>${optionName}</span>`)

})

//옵션명도 따로 가져와봄 역시 대표섬네일은 적용하지 않기 위해 1을 더해줌

}

 

결과적으론 대략 이런 모양으로 완성됨

원래 옵션 선택 썸네일이 있었지만 그냥 옵션명만 가져오는 용도로 사용하고

display:none; 처리함.