Url : http://www.htmldrive.net/items/show/275/jQuery-awesome-images-Gallery-lightbox
Test Url : http://www.uhoon.co.kr/test/1862/1862.html
소스는 Test 페이지를 확인해주세요.
※ 적용시 script.js에서 좌우 이동 버튼 및 클로즈 등..이미지 경로 변경해주셔야 정상적으로 나옵니다...
* 자주 가는 강추 사이트 http://www.htmldrive.net
자료 정말 많습니다..
임의 이벤트 실행을 하기 위한 방법입니다..
예를 들어 버튼의 클릭 이벤트를 프로그램으로 실행하는 방법..
API Url : http://api.jquery.com/trigger/
Test Url : http://www.uhoon.co.kr/test/1858.html
( 화면 로딩이 완료된 후 첫번째 버튼의 클릭 이벤트를 실행합니다. )
$("button:first").trigger('click');
원본 Url : http://www.xpressengine.com/?mid=download&package_srl=21842038
Test Url : http://www.uhoon.co.kr/test/1183.html
지정된 스크롤 위치 이하로 내려가게 되면
스크롤탑 컨트롤이 나타나서 클릭시 페이지 상단으로 올라갑니다..
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>scrolltop control </title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<style type="text/css">
h1 { font-size: 34px; line-height: 1.2; margin: 0.3em 0 10px; }
#scrolltotop{position:fixed;bottom:0px;right:0px}#scrolltotop
span{width:48px;height:48px;display:block;background:url("/test/1183/top.png") top no-repeat;margin:0px
15px 10px 0;border-radius:3px;-webkit-transition:all 0.2s ease-out;-moz-transition:all 0.2s ease-out;-o-transition:all 0.2s ease-out;-ms-transition:all 0.2s ease-out;transition:all 0.2s ease-out}#scrolltotop a:hover
span{background:url("/test/1183/top.png") bottom no-repeat}
</style>
<script type="text/javascript">
<!--
jQuery(function($){
$('#scrolltotop').hide();
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#scrolltotop').fadeIn();
} else {
$('#scrolltotop').fadeOut();
}
});
$('#scrolltotop a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 1000);
return false;
});
});
});
//-->
</script>
</head>
<body>
<div id="scrolltotop" style="display: block;"><a href="#top"><span></span></a></div>
<div style="height:3200px;">a</div>
</body>
</html>
