지난번에 질문 드린..
http://sir.co.kr/qa/102359?sfl=mb_id%2C1&lstx=kshajiny
건에 대해서 나름 작업을 해봤는데요...
대부분 잘 동작하는데, (1~7번을 클릭했을 때의 이동은 OK)
8번 이미지를 클릭하면 8번으로 지정한 사진으로 가지 않고
첫번째 사진으로 가버립니다.
뭘 잘못 입력했는지 모르는 상황이라,
혹시 보시고 아시는 분 계시면 알려주세요...
귀중한 시간 내어주셔서 미리 감사드립니다 ^^
답변 3개 / 댓글 3개
채택된 답변
+20 포인트
thisgun왜 그런지는 이유는 모르겠습니다 ㅠ
아무래도 자바스트립트로 해결을 봐야 겠네요.
이 부분을
Copy
$('.bxslider').bxSlider({ pager: false, captions: true }); $('img[usemap]').rwdImageMaps();
아래와 같이 바꿔보세요.
Copy
var bxSlider = $('.bxslider').bxSlider({ pager: false, captions: true }); $('img[usemap]').rwdImageMaps(); $("#dayMap").on("click", "area", function(e){ e.preventDefault(); //클릭 이벤트를 무료화합니다. var hash_val = this.href.split("#")[1]; //해시값을 구한다. if( hash_val ){ var $selector = $("#"+hash_val); if ($selector.length ) { $("html, body").animate({ scrollTop: $selector.offset().top }, 200); //해당 셀렉터로 이동 var $el_sling = $("#"+hash_val).siblings().not(".bx-clone"), index = $selector.parent().children(":not(.bx-clone)").index($selector); //index를 구합니다. bxSlider.goToSlide(index); //해당 인덱스로 이동 } } return false; });답변에 대한 댓글 1개
nanati
10년 전
thisgun브라우저로 요소검사 해보았습니다.
슬라이더의 경우 loop 될려면 element 를 복제 해야합니다.
element를 복제했기 때문에 어트리뷰트 id="pic08" 가 위와 같이 2번 되었는데요.
복제될때 id 없이 복제 하면 되지 않을까 생각되네요.
bxslider의 경우 복제되는 소스 부분이
bxslider.js 에서
Copy
// if infinite loop, prepare additional slides if(slider.settings.infiniteLoop && slider.settings.mode != 'fade' && !slider.settings.ticker){ var slice = slider.settings.mode == 'vertical' ? slider.settings.minSlides : slider.settings.maxSlides; var sliceAppend = slider.children.slice(0, slice).clone().addClass('bx-clone'); var slicePrepend = slider.children.slice(-slice).clone().addClass('bx-clone'); el.append(sliceAppend).prepend(slicePrepend); }
이 부분인데 이것을 아래와 같이 바꿔서 적용시켜 보세요.
Copy
// if infinite loop, prepare additional slides if(slider.settings.infiniteLoop && slider.settings.mode != 'fade' && !slider.settings.ticker){ var slice = slider.settings.mode == 'vertical' ? slider.settings.minSlides : slider.settings.maxSlides; var sliceAppend = slider.children.slice(0, slice).clone().addClass('bx-clone').removeAttr("id"); var slicePrepend = slider.children.slice(-slice).clone().addClass('bx-clone').removeAttr("id"); el.append(sliceAppend).prepend(slicePrepend); }답변에 대한 댓글 1개
nanati
10년 전
감사합니다^^
건님 덕분에 8번 이미지로 이동하는 것이 해결 되었어요!!
근데 이미지맵으로 원하는 이미지로 이동하면, 주소에 #ID가 붙잖아요?
그 상태에서 슬라이드 이미지를 좌우로 이동시켜보니 빈공간이 나옵니다...
왜 그러는지 알 수 있을까요?
시간 있으실 때라도 괜찮습니다..
건님 덕분에 8번 이미지로 이동하는 것이 해결 되었어요!!
근데 이미지맵으로 원하는 이미지로 이동하면, 주소에 #ID가 붙잖아요?
그 상태에서 슬라이드 이미지를 좌우로 이동시켜보니 빈공간이 나옵니다...
왜 그러는지 알 수 있을까요?
시간 있으실 때라도 괜찮습니다..
BlueAngel
10년 전
수정중이신가봐요 자꾸 바뀌네요
답변에 대한 댓글 1개
답변을 작성하려면 로그인이 필요합니다.
딱 원하는대로 되었네요..
언제쯤 제대로 자바스크립트를 만지게 될 날이 올지 허허허.. ㅠㅠ