슬라이더와 이미지맵을 이용한 이동

nanati 홈페이지 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

홈페이지 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2016.01.05 12:50:26 6514 (121.♡.♡.146)

답변 3

본문

지난번에 질문 드린..

http://sir.co.kr/qa/102359?sfl=mb_id%2C1&lstx=kshajiny

건에 대해서 나름 작업을 해봤는데요...

대부분 잘 동작하는데, (1~7번을 클릭했을 때의 이동은 OK)

8번 이미지를 클릭하면 8번으로 지정한 사진으로 가지 않고

첫번째 사진으로 가버립니다.

뭘 잘못 입력했는지 모르는 상황이라,

혹시 보시고 아시는 분 계시면 알려주세요...

귀중한 시간 내어주셔서 미리 감사드립니다 ^^

이곳에서 확인해 주세요!

#jquery #javascript

답변 3

thisgun 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2016-01-05 15:24:19 106.♡.♡.28

왜 그런지는 이유는 모르겠습니다 ㅠ

아무래도 자바스트립트로 해결을 봐야 겠네요.

이 부분을


		$('.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;
 
        });

↳ nanati 홈페이지 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2016-01-05 15:32:57121.♡.♡.146

항상 감사하지만 또 감사하고 감사합니다 ^^
딱 원하는대로 되었네요..
언제쯤 제대로 자바스크립트를 만지게 될 날이 올지 허허허.. ㅠㅠ

thisgun 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2016-01-05 13:53:09 106.♡.♡.28

브라우저로 요소검사 해보았습니다.

슬라이더의 경우 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);
			}

↳ nanati 홈페이지 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2016-01-05 14:49:38121.♡.♡.146

감사합니다^^
건님 덕분에 8번 이미지로 이동하는 것이 해결 되었어요!!
근데 이미지맵으로 원하는 이미지로 이동하면, 주소에 #ID가 붙잖아요?
그 상태에서 슬라이드 이미지를 좌우로 이동시켜보니 빈공간이 나옵니다...
왜 그러는지 알 수 있을까요?
시간 있으실 때라도 괜찮습니다..