개발

[jQuery] 반응형 이미지 슬라이더에 터치 스와이프 가능하게 하기(superslide, touchSwipe)

Superslide.js 코드가 나온지 꽤 오랜시간이 지난것 같은데 Bxslider와 함께 많이 활용하는 코드이다. Superslide은 풀스크린으로 반응형이 지원되서 꽤 활용도가 높은데, 모바일에서 터치가 되지 않아 불편한 점이 있다. 그래서 touchSwipe 코드를 응용해 스와이프하면 슬라이드가 넘어가도록 만들어보았다. Superslide 기본코드 예시 : www.jqueryscript.net/demo/Full-Screen-Slider-Plugin-Superslides/demo/ Superslide + touchSwipe 기존 Superslide에서 클릭시 넘어가도록 하는 애니메이션이 기본적으로 적용되어있는데 이 부분을 활용하였다. superslides('animate', 'next'); super..

[카페24] 컬러칩 탭 기능 / 컬러별로 상품 보여주기

최근 의뢰를 받아 했던 카페24 작업. 왼쪽에서 어느 컬러를 하나 클릭하면 그 컬러 제품만 볼 수 있도록 하는 기능을 작업하였다. 자동으로 분류되는건 아니고 약간의 소스 노가다가 필요한 작업이다. [예시화면] [작동 방식] 상품 등록시, 자체 코드에 컬러명을 영문으로 입력하면 별도의 페이지에서 컬러칩 클릭시 자체코드가 해당 컬러명을 가진 상품만 탭방식으로 show, hide 해주는 방식이다. [작업소스] - 일반페이지를 하나 생성한 후 아래의 소스 추가 - ul.colorchip부분에 쓴 영문명을 자체코드에 동일하게 입력해주면 됨. /pl/item_list.html - 여기서 중요한 점은 상품리스트(li) class에 {$ma_product_code}를 넣어주는것. 해당 컬러를 클래스로 가진 li만 보여..