슬라이더와 이미지맵을 이용한 이동
본문
지난번에 질문 드린..
http://sir.co.kr/qa/102359?sfl=mb_id%2C1&lstx=kshajiny
건에 대해서 나름 작업을 해봤는데요...
대부분 잘 동작하는데, (1~7번을 클릭했을 때의 이동은 OK)
8번 이미지를 클릭하면 8번으로 지정한 사진으로 가지 않고
첫번째 사진으로 가버립니다.
뭘 잘못 입력했는지 모르는 상황이라,
혹시 보시고 아시는 분 계시면 알려주세요...
귀중한 시간 내어주셔서 미리 감사드립니다 ^^
답변 3
왜 그런지는 이유는 모르겠습니다 ㅠ
아무래도 자바스트립트로 해결을 봐야 겠네요.
이 부분을
$('.bxslider').bxSlider({
pager: false,
captions: true
});
$('img[usemap]').rwdImageMaps();
아래와 같이 바꿔보세요.
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;
});
항상 감사하지만 또 감사하고 감사합니다 ^^
딱 원하는대로 되었네요..
언제쯤 제대로 자바스크립트를 만지게 될 날이 올지 허허허.. ㅠㅠ
브라우저로 요소검사 해보았습니다.
슬라이더의 경우 loop 될려면 element 를 복제 해야합니다.
element를 복제했기 때문에 어트리뷰트 id="pic08" 가 위와 같이 2번 되었는데요.
복제될때 id 없이 복제 하면 되지 않을까 생각되네요.
bxslider의 경우 복제되는 소스 부분이
bxslider.js 에서
// 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);
}
이 부분인데 이것을 아래와 같이 바꿔서 적용시켜 보세요.
// 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);
}
감사합니다^^
건님 덕분에 8번 이미지로 이동하는 것이 해결 되었어요!!
근데 이미지맵으로 원하는 이미지로 이동하면, 주소에 #ID가 붙잖아요?
그 상태에서 슬라이드 이미지를 좌우로 이동시켜보니 빈공간이 나옵니다...
왜 그러는지 알 수 있을까요?
시간 있으실 때라도 괜찮습니다..
수정중이신가봐요 자꾸 바뀌네요
아닌데요... 페이지 안 건드리고 있는데요 ㅠ ㅠ...
