반응형

jquery 로 슬라이드배너를 만들때 주로 bxslider 를 사용하는데

고쳐져야할 오류가 몇가지 보이네요..

 

 

일단 처음 페이지에 접속 했을때 이미지들이 쭉 나열 되면서 페이지 레이아웃이 깨져서 보이는 부분인데..

이부분은 먼저 레이아웃을 잡기전엔 슬라이더 영역을 안보이게 하고, 로딩이 완료 된 후에 보이게 하는 방식으로

처리를 하면 된다.

<div id="edd" style="visibility:hidden;opacity:0">
	<ul class="bxslider">
	  <li><img src="/image/banner/main_banner_01.jpg"/></li>
	  <li><img src="/image/banner/main_banner_01.jpg"/></li>
	  <li><img src="/image/banner/main_banner_01.jpg"/></li>
	</ul>
</div>

위와 같이 bxslider를 둘러싸고 있는 div 를 하나 만드신 후 style="visibility:hidden" 을 주시고

새로고침 해보시면 해당 영역은 잡혀 있는데 이미지는 보이지 않으실 겁니다.

 

그럼 이제 bxslider이 완료 되면 해당 부분을 다시 보이게 처리 해야 합니다.


<script type="text/javascript">
$(document).ready(function() {
	$('.bxslider').bxSlider({
		mode: 'vertical',
		slideMargin: 5,
		pager:false,
		onSliderLoad: function(){
			$("#edd").css("visibility", "visible").animate({opacity:1});
		}
	});
});
</script>

 

위와 같이 onSliderLoad 부분을 넣으시면 슬라이더 로딩이 완료 되면 #edd 의 visibility 를 visible 로 변경 해라 이런 뜻입니다.

이렇게 처리하면 따로 잡힌 영역이 깨지지 않고 레이아웃이 잡히고, bxslider 가 로딩이 완료 된 후에 해당 영역에 출력이 됩니다.

 

 

다른 이슈는 ie에서 무한으로 이미지로딩만 출력 되는 현상인데 이부분은 다음에 다시 올리도록 하겠습니다.

반응형

'기타' 카테고리의 다른 글

css, js , 이미지 캐시 방지  (0) 2017.09.20
회사 퇴사 시 퇴직금, 임금 체불 시 노동부에 진정 신청 방법  (0) 2014.02.10
홈페이지 제작해 드립니다.  (0) 2013.01.11
고도몰 커스터마이징 작업  (0) 2013.01.11
인코딩 설정, 메타태그  (0) 2010.10.28
반응형

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<style type="text/css">
		#diva {
			height:2500px;
		}
		#scrollBtn1,#scrollBtn2 {
			cursor:pointer;
		}
	</style>
	<script type="text/javascript">
		$(document).ready(function(){

			$("#scrollBtn1").click(function(){
				//divb의 top의 위치 값으로 이동
				var pos=$("#divb").position().top;
				$("html, body").animate({scrollTop:pos},'slow');
			});

			$("#scrollBtn2").click(function(){
				$("html, body").animate({scrollTop:0},'slow');
			});
		});
	</script>
</head>
<body>
	<div id="diva"> 
		맨위
		<p id="scrollBtn1">[맨아래로 이동]</p>
	</div>
	<div id="divb">
		맨 아래 
		<p id="scrollBtn2">[맨위로 이동]</p>
	</div>
</body>
</html>

dd
해당 페이지 맨위와 divb(맨 아래)로 애니메이션 이동

확인:http://azit4u.phps.kr/jquery/scrollTop.html
반응형
저작자표시 비영리 변경금지

'jQuery' 카테고리의 다른 글

jQuery preventDefault();  (0) 2011.10.17
jQuery hover(), toggleClass(), toggle()  (0) 2011.10.14
jQuery css  (0) 2011.10.14
jQuery 마우스 이벤트(클릭한 버튼, 클릭한 위치) event.button, event.screenX, event.screenY  (0) 2011.10.14
jQuery bind(), unbind(), trigger()  (0) 2011.10.14
반응형
hover(마우스오버시 이벤트,마우스아웃시 이벤트)

$("#button").hover(
	function() {
		$(this).addClass("hover");
	},
	function() {
		$(this).removeClass("hover");
	}
);



$("#button").hover(function(){
	$("#button").toggleClass("hover");
});

위 두 소스는 같은 결과를 출력

toggleClass() - 선택한 엘리먼트에 클래스가 이미 적용되어 있으면 해당 클래스를 제거 하고 그렇지 않으면
                       해당 클래스를 적용 한다.

toggle(handler0,handler1) - 선택한 엘리먼트에 두개 이벤트 연결 한번 실행 마다 0,1 의 핸들러 함수 실행


$("#button").toggle(
	function(){
		$(this).removeClass("hover2");
		$(this).addClass("hover");
	},
	function(){
		$(this).removeClass("hover");
		$(this).addClass("hover2");
	}
);
반응형
저작자표시 비영리 변경금지

'jQuery' 카테고리의 다른 글

jquery scrollTop(), position()  (0) 2011.10.27
jQuery preventDefault();  (0) 2011.10.17
jQuery css  (0) 2011.10.14
jQuery 마우스 이벤트(클릭한 버튼, 클릭한 위치) event.button, event.screenX, event.screenY  (0) 2011.10.14
jQuery bind(), unbind(), trigger()  (0) 2011.10.14

+ Recent posts

티스토리툴바