jQuery Zoom - 이미지 줌 제어 ( 휠 , 클릭 , 오버 )

Open API/Jquery|2016. 11. 10. 09:11
반응형



간편하게 적용할 수 있는 줌 관련 기능 플러그인입니다.



Plugin Url : http://www.jacklmoore.com/zoom/ 


미리보기 : http://www.uhoon.co.kr/test/548.html



줌기능을 아래의 경우에 적용할 수 있습니다.


- 마우스 오버 시 

- 클릭시 토글

- 클릭하고 있는 동안

- 클릭한 부분 줌

- 휠 밀고 당기고 


샘플코드 다운로드 :  548.zip


<!DOCTYPE html>
<html>
<head>
	<meta charset='utf-8'/>
	<title>jQuery Zoom Demo</title>
	<style>
		/* styles unrelated to zoom */
		* { border:0; margin:0; padding:0; }
		p { position:absolute; top:3px; right:28px; color:#555; font:bold 13px/1 sans-serif;}

		/* these styles are for the demo, but are not required for the plugin */
		.zoom {
			display:inline-block;
			position: relative;
		}

		/* magnifying glass icon */
		.zoom:after {
			content:'';
			display:block;
			width:33px;
			height:33px;
			position:absolute;
			top:0;
			right:0;
			background:url(icon.png);
		}

		.zoom img {
			display: block;
		}
		.zoom img::selection { background-color: transparent; }

		#ex2 img:hover { cursor: url("./548/grab.cur"), default; }
		#ex2 img:active { cursor: url("./548/grabbed.cur"), default; }
	</style>
	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script src='./548/jquery.zoom.js'></script>
	<script src='./548/jquery.Wheelzoom.js'></script>
	<script>
		$(document).ready(function(){
			$('#ex1').zoom();
			$('#ex2').zoom({ on:'grab' });
			$('#ex3').zoom({ on:'click' });
			$('#ex4').zoom({ on:'toggle' });
			$('#ex5').wheelzoom();
//			$('#ex5').wheelzoom({zoom:0.05});
//			$('#ex5').trigger('wheelzoom.reset')
		});
	</script>
</head>
<body>
	<div>
		<div class='zoom' id='ex1'>
			<img src='548/daisy.jpg' id='jack' width='555' height='320' alt='Daisy on the Ohoopee'/>
			<p>마우스 올려보세요</p>
		</div>
	</div>
	<div>
		<div class='zoom' id='ex2'>
			<img src='548/roxy.jpg' width='290' height='320' alt='Roxy on the Ohoopee'/>
			<p>클릭된 동안 땡겨짐</p>
		</div>
	</div>
	<div>
		<div class='zoom' id='ex3'>
			<img src='548/daisy.jpg' width='555' height='320' alt='Daisy on the Ohoopee'/>
			<p>클릭하면 줌 작동 토글</p>
		</div>
	</div>
	<div>
		<div class='zoom' id='ex4'>
			<img src='548/roxy.jpg' width='290' height='320' alt='Roxy on the Ohoopee'/>
			<p>클릭한 부분 땡겨짐 토글</p>
		</div>
	</div>
	<div>
		<div class='zoom' >
			<img id='ex5' src='548/daisy.jpg' width='290' height='320' alt='Roxy on the Ohoopee'/>
			<p>휠땡기고 밀고</p>
		</div>
	</div>
</body>
</html>


저작자표시

댓글()

jQuery fancyBox - 레이어팝업

Open API/Jquery|2016. 11. 1. 10:14
반응형




plugin Url & Download : http://fancybox.net/


샘플코드 다운로드 :  521.zip



라이센스.

http://fancyapps.com/fancybox/#license  2016.11.01 일 기준.


fancyBox licensed under Creative Commons Attribution-NonCommercial 3.0 license. 

You are free to use fancyBox for your personal or non-profit website projects. 

You can get the author's permission to use fancyBox for commercial websites by paying a fee.

----

개인 혹은 비영리사이트만 공짜...

이점 유의 (싱글 도메인 $19 / 멀티 도메인 $89)


- swf , iframe , image , youtube , Googlemap 등 팝업 플러그인.


 
NameDescription
paddingSpace inside fancyBox around content. Can be set as array - [top, right, bottom, left].
Integer, Array; Default value: 15
marginMinimum space between viewport and fancyBox. Can be set as array - [top, right, bottom, left]. Right and bottom margins are ignored if content dimensions exceeds viewport
Integer, Array; Default value: 20
widthDefault width for 'iframe' and 'swf' content. Also for 'inline', 'ajax' and 'html' if 'autoSize' is set to 'false'. Can be numeric or 'auto'.
Number, String; Default value: 800
heightDefault height for 'iframe' and 'swf' content. Also for 'inline', 'ajax' and 'html' if 'autoSize' is set to 'false'. Can be numeric or 'auto'
Number, String; Default value: 600
minWidthMinimum width fancyBox should be allowed to resize to
Number; Default value: 100
minHeightMinimum height fancyBox should be allowed to resize to
Number; Default value: 100
maxWidthMaximum width fancyBox should be allowed to resize to
Number; Default value: 9999
maxHeightMaximum height fancyBox should be allowed to resize to
Number; Default value: 9999
autoSizeIf true, then sets both autoHeight and autoWidth to true
Boolean; Default value: true
autoHeightIf set to true, for 'inline', 'ajax' and 'html' type content width is auto determined. If no dimensions set this may give unexpected results
Boolean; Default value: false
autoWidthIf set to true, for 'inline', 'ajax' and 'html' type content height is auto determined. If no dimensions set this may give unexpected results
Boolean; Default value: false
autoResizeIf set to true, the content will be resized after window resize event
Boolean; Default value: !isTouch
autoCenterIf set to true, the content will always be centered
Boolean; Default value: !isTouch
fitToViewIf set to true, fancyBox is resized to fit inside viewport before opening
Boolean; Default value: true
aspectRatioIf set to true, resizing is constrained by the original aspect ratio (images always keep ratio)
Boolean; Default value: false
topRatioTop space ratio for vertical centering. If set to 0.5, then vertical and bottom space will be equal. If 0 - fancyBox will be at the viewport top
Number; Default value: 0.5
leftRatioLeft space ratio for horizontal centering. If set to 0.5, then left and right space will be equal. If 0 - fancyBox will be at the viewport left
Number; Default value: 0.5
scrollingSet the overflow CSS property to create or hide scrollbars. Can be set to 'auto', 'yes', 'no' or 'visible'
String; Default value: 'auto'
wrapCSSCustomizable CSS class for wrapping element (useful for custom styling)
string; Default value:
arrowsIf set to true, navigation arrows will be displayed
Boolean; Default value: true
closeBtnIf set to true, close button will be displayed
Boolean; Default value: true
closeClickIf set to true, fancyBox will be closed when user clicks the content
Boolean; Default value: false
nextClickIf set to true, will navigate to next gallery item when user clicks the content
Boolean; Default value: false
mouseWheelIf set to true, you will be able to navigate gallery using the mouse wheel
Boolean; Default value: true
autoPlayIf set to true, slideshow will start after opening the first gallery item
Boolean; Default value: false
playSpeedSlideshow speed in milliseconds
Integer; Default value: 3000
preloadNumber of gallery images to preload
Integer; Default value: 3
modalIf set to true, will disable navigation and closing
Boolean; Default value: false
loopIf set to true, enables cyclic navigation. This means, if you click "next" after you reach the last element, first element will be displayed (and vice versa).
Boolean; Default value: true
ajaxOptions for ajax request
Object; Default value:
{
	dataType : 'html',
	headers  : { 'X-fancyBox': true }
}
iframeOptions for content type "iframe"
Object; Default value:
{
	scrolling : 'auto',
	preload   : true
}
swfOptions for content type "swf"
Object; Default value:
{
	wmode: 'transparent',
	allowfullscreen   : 'true',
	allowscriptaccess : 'always'
}
keysDefine keyboard keys for gallery navigation, closing and slideshow
Object; Default value:
{
	next : {
		13 : 'left', // enter
		34 : 'up',   // page down
		39 : 'left', // right arrow
		40 : 'up'    // down arrow
	},
	prev : {
		8  : 'right',  // backspace
		33 : 'down',   // page up
		37 : 'right',  // left arrow
		38 : 'down'    // up arrow
	},
	close  : [27], // escape key
	play   : [32], // space - start/stop slideshow
	toggle : [70]  // letter "f" - toggle fullscreen
}
directionDefault navigation direction (for navigation arrows, too)
Object; Default value:
{
	{
		next : 'left',
		prev : 'right'
	}
}
scrollOutsideIf true, the script will try to avoid horizontal scrolling for iframes and html content
Boolean; Default value: true
indexOverrides group start index
Integer; Default value: 0
typeOverrides type for content. Supported types are 'image', 'inline', 'ajax', 'iframe', 'swf' and 'html'
String; Default value: null
hrefOverrides content source link
String; Default value: null
contentOverrides content to be displayed
String; Default value: null
titleOverrides title content, accepts any HTML
String; Default value: null
tplObject containing various templates
Object; Default value:
{
	wrap     : '<div class="fancybox-wrap" tabIndex="-1"><div class="fancybox-skin"><div class="fancybox-outer"><div class="fancybox-inner"></div></div></div></div>',
	image    : '<img class="fancybox-image" src="{href}" alt="" />',
	iframe   : '<iframe id="fancybox-frame{rnd}" name="fancybox-frame{rnd}" class="fancybox-iframe" frameborder="0" vspace="0" hspace="0"' + ($.browser.msie ? ' allowtransparency="true"' : '') + '></iframe>',
	error    : '<p class="fancybox-error">The requested content cannot be loaded.<br/>Please try again later.</p>',
	closeBtn : '<a title="Close" class="fancybox-item fancybox-close" href="javascript:;"></a>',
	next     : '<a title="Next" class="fancybox-nav fancybox-next" href="javascript:;"><span></span></a>',
	prev     : '<a title="Previous" class="fancybox-nav fancybox-prev" href="javascript:;"><span></span></a>'
}
openEffect / closeEffect / nextEffect / prevEffectAnimation effect ('elastic', 'fade' or 'none') for each transition type
String; Default value: 'fade', 'fade', 'elastic', 'elastic'
openSpeed / closeSpeed / nextSpeed / prevSpeedThe time it takes (in ms, or "slow", "normal", "fast") to complete transition
Integer; Default value: 250
openEasing / closeEasing / nextEasing / prevEasingEasing method for each transition type. You have numerous choices if easing plugin is included
String; Default value: 'swing'
openOpacity / closeOpacityIf set to true, transparency is changed for elastic transitions
Boolean; Default value: true
openMethod / closeMethod / nextMethod / prevMethodMethod from $.fancybox.transitions() that handles transition (you can add custom effects there)
String; Default value: 'zoomIn' / 'zoomOut' / 'changeIn' / 'changeOut'
helpersObject containing enabled helpers and options for each of them
Object; Default value:
{
	overlay : {
		closeClick : true,  // if true, fancyBox will be closed when user clicks on the overlay
		speedOut   : 200,   // duration of fadeOut animation
		showEarly  : true,  // indicates if should be opened immediately or wait until the content is ready
		css        : {},    // custom CSS properties
		locked     : true   // if true, the content will be locked into overlay
	},
	title : {
		type : 'float' // 'float', 'inside', 'outside' or 'over'
	}
}
liveIf set to true, fancyBox uses "live" to assign click event. Set to "false", if you need to apply only to current collection, e.g., if using something like -
$("#page").children().filter('a').eq(0).fancybox();

Boolean; Default value: true
parentParent element of the container. This is useful for ASP.NET where the top element is "form" -
$(".fancybox").fancybox({
    parent: "form:first" // jQuery selector
});

String; Default value: body

 
NameDescription
open

$.fancybox.open( [group], [options] )

Launch fancyBox, the same as $.fancybox([group], [options]) 
First parameter can be in various types, examples: 
$.fancybox([ {href : 'img1.jpg', title : 'Title'}, {href : 'img2.jpg', title : 'Title'} ]); - array containing objects 
$.fancybox( {href : 'image.jpg', title : 'Lorem lipsum'} ); - single object 
$.fancybox( ['image.jpg', 'image.jpg'] ); - array containing links as strings
$.fancybox( 'image.jpg' ); - string as source link 
$.fancybox( [jQuery object] ); 
$.fancybox( '<h1>Lorem lipsum</h1>' );
cancel

$.fancybox.cancel()

Cancel loading image or abort ajax request
close

$.fancybox.close( [force] )

If fancyBox is fully opened (open animation has ended) then start closing animation. If not or closing is forced (e.g. called like $.fancybox.close( true )) than fancyBox is removed immediatly
play

$.fancybox.play()

Start or stop (if already running) slideshow
next

$.fancybox.next()

Navigate to next gallery item
prev

$.fancybox.prev()

Navigate to previous gallery item
jumpto

$.fancybox.jumpto( [index] )

Navigate to gallery item by index. Item counting starts from 0, e.g. $.fancybox.jumpto( 0 ); will open the first, e.g. $.fancybox.jumpto( 1 ); will second, etc
reposition

$.fancybox.reposition()

Will center fancyBox inside viewport and toggle position type to fixed or absolute if needed
update

$.fancybox.update()

Auto-sizes fancyBox height to match height of content
toggle

$.fancybox.toggle()

If content is resized to fit inside viewport than it will be expanded to full size (and vice verse)
showLoading

$.fancybox.showLoading()

Shows loading animation
hideLoading

$.fancybox.hideLoading()

Hides loading animation


 
NameDescription
onCancelCalled after user triggers canceling. 
Note: If false is returned by the callback, the canceling will be halted
beforeLoadCalled before starting to load content. 
Note: If false is returned by the callback, the loading will be halted
afterLoadCalled after content is loaded. Receives two arguments - upcoming and current object - http://jsfiddle.net/xW5gs/ 
Note: If false is returned by the callback, the content will not be shown.
beforeShowCalled right before open animations has started
afterShowCalled after open animations has ended
beforeCloseCalled right after closing has been triggered but not yet started 
Note: If false is returned by the callback, the closing will be halted.
afterCloseCalled after closing animation has ended
onUpdateCalled after window resize, scroll or orientation change events are triggered
onPlayStartCalled after slideshdow has started
onPlayEndCalled after slideshdow has stoped




 


 







저작자표시

댓글()

jQuery Tiptip - 툴팁 ( tooltip )

Open API/Jquery|2016. 11. 1. 10:07
반응형



툴팁에 대한  플러그인 입니다.


툴팁이란 ?   

말풍선 또는 툴팁(tooltip)은 공통 그래픽 사용자 인터페이스 요소이다. 마우스 포인터라 불리는 커서와 함께 동작한다. 사용자가 커서에 항목을 클릭하지 않고 가리키면 조그마한 상자가 항목 위에 나타나서 보충 설명을 보여 준다.




API Url : http://code.drewwilson.com/entry/tiptip-jquery-plugin



샘플코드 다운로드 : 454.7z


옵션 값.

activation: string ("hover" by default) - jQuery method TipTip is activated with. Can be set to: "hover", "focus" or "click".
keepAlive: true of false (false by default) - When set to true the TipTip will only fadeout when you hover over the actual TipTip and then hover off of it.
maxWidth: string ("200px" by default) - CSS max-width property for the TipTip element. This is a string so you can apply a percentage rule or 'auto'.
edgeOffset: number (3 by default) - Distances the TipTip popup from the element with TipTip applied to it by the number of pixels specified.
defaultPosition: string ("bottom" by default) - Default orientation TipTip should show up as. You can set it to: "top", "bottom", "left" or "right".
delay: number (400 by default) - Number of milliseconds to delay before showing the TipTip popup after you mouseover an element with TipTip applied to it.
fadeIn: number (200 by default) - Speed at which the TipTip popup will fade into view.
fadeOut: number (200 by default) - Speed at which the TipTip popup will fade out of view.
attribute: string ("title" by default) - HTML attribute that TipTip should pull it's content from.
content: string (false by default) - HTML or String to use as the content for TipTip. Will overwrite content from any HTML attribute.
enter: callback function - Custom function that is run each time you mouseoveran element with TipTip applied to it.
exit: callback function - Custom function that is run each time you mouseout of an element with TipTip applied to it.






<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Mangled date examples</title> 
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="/test/454/jquery.tipTip.js"></script>  
<link rel="stylesheet" type="text/css" href="/test/454/tiptip.css"/>
<script type="text/javascript">
	$(function(){
		$(".someClass").tipTip();
	});
</script> 
<style type="text/css">
	.sample {padding-bottom:20px;}
</style>
</head>
<body>
<div class="sample">
	<a href="#" class="someClass" title="요거이 Text">텍스트</a>에다가 타이틀로 넣으면 되구요.
</div> 
<div class="sample">
	<img src="/files/attach/images/106/893/b0183fae643bfa50ebef8ce046e5abe8.jpg" class="someClass" title="요거이 이미지" style="width:200px;height:150px;"/>
 </div>
<div class="sample">
	<input class="someClass" title="요거이 인풋" style="width:200px;"/>
 </div>
</body>
</html>


저작자표시

댓글()

jQuery animate - 각종 애니메이션 효과

Open API/Jquery|2016. 11. 1. 10:00
반응형



애니메이션 효과


 .animate( properties [, duration] [, easing] [, complete] )


API Url : http://api.jquery.com/animate/


샘플코드 다운로드 :  967.zip


 


effect 효과에 대한것이기 때문에 캡쳐보다 샘플!


통통 튀기고 지지고 볶고..


저작자표시

댓글()

jQuery vGrid - 브라우저 너비에 따른 가변 그리드

Open API/Jquery|2016. 11. 1. 09:53
반응형



브라우저 사이즈에 따른 가변 그리드

 

PlugIn Url : http://blog.xlune.com/2009/09/jqueryvgrid.html


 

936.zip




<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" /> 
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> 
<script src="/936/jquery.vgrid.js"></script>  
</head> 
<script type="text/javascript">
//<![CDATA[
$(function() { 
    $("#sample").on("change", function(){ 
		$("#isample").attr("src","/936/936-"+this.value+".html");
    }); 
}); 
//]]>
</script>

<body>   
<select id="sample">
	<option value="0"> == sample ==</option>
	<option value="1">Simple Example</option>
	<option value="2">Basic Option Example</option>
	<option value="3">Any Height Grid Example</option>
	<option value="4">FadeIn Option Example</option>
	<option value="5">Sort Example</option>
	<option value="6">Dynamic Grid, Start/Finish Event Example</option>
	<option value="7">Dynamic Image Grid, Start/Finish Event Example</option>
	<option value="8">Multi Box Grid Example</option>
	<option value="9">Grid Element Show/Hide Example</option>
	<option value="10">Drag And Drop Sort Example</option>
</select>
<iframe id="isample" src="" width="100%;" height="1200"></iframe>
</body>
</html>


저작자표시

댓글()

Smooth Scroll - 부드러운 스크롤 이동 ( 속도 , 위치 셋팅)

Open API/Jquery|2016. 11. 1. 09:14
반응형


지정위치로 스크롤바를 부드럽게 이동 시켜줍니다.

 

PlugIn Url : http://github.com/kswedberg/jquery-smooth-scroll


샘플 코드 다운로드 :  904.zip




 

 

* 옵션 값

{
  offset: 0,
 
  // one of 'top' or 'left'
  direction: 'top',
 
  // only use if you want to override default behavior
  scrollTarget: null,
 
  // fn(opts) function to be called before scrolling occurs.
  // `this` is the element(s) being scrolled
  beforeScroll: function() {},
 
  // fn(opts) function to be called after scrolling occurs.
  // `this` is the triggering element
  afterScroll: function() {},
  easing: 'swing',
  speed: 400,
 
  // coefficient for "auto" speed
  autoCoefficent: 2
 
}

* 샘플 코드 
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />  
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> 
<script src="/test/904/jquery.smooth-scroll.js"></script> 
<style>
a {
  color: #8ad459;
  text-decoration: none;
} 
</style>
</head>
<script type="text/javascript">
$(document).ready(function($) {
      $('a').smoothScroll({
        speed: 1000,
        easing: 'easeInOutCubic'
      });  
  }); 
</script>  
<body>
<div style="position: fixed; top:50px;background: #fff"> 
<ul style="list-style: none;">
<li></li> 
<li><a href="#Red" >Red</a></li>
<li><a href="#blue">blue</a></li>
<li><a href="#pink">pink</a></li> 
</ul>
</div>
<div>
<div style="background-color:red;height:400px;" id="Red"> </div>
<div style="background-color:blue;height:400px;" id="blue"/> </div>
<div style="background-color:pink;height:400px;" id="pink"/> </div> 
<div style="height:300px;"></div> 
</div>
</body>
</html>


저작자표시

댓글()

lightBox2 - 레이어 팝업

Open API/Jquery|2016. 10. 31. 09:33
반응형



jQuery 를 이용한 litebox2 레이어 팝업 플러그인입니다.


PlugIn & DownLoad URL : http://lokeshdhakar.com/projects/lightbox2/


샘플 소스 파일 :  893.7z


홈페이지 상에도 나와있지만 MIT 라이센스로 


큰 제약 없이 이용 가능한 플러그인 입니다.

저작자표시

댓글()

다음 블로그 검색연동 ( XML , JSON )

Open API/Daum|2016. 10. 31. 09:26
반응형



다음 블로그 검색 결과 XML로 받기


* API Url

 : http://dna.daum.net/apis/search


* Test Url

 : http://apis.daum.net/search/blog?q=uhoon.co.kr&apikey=DAUM_SEARCH_DEMO_APIKEY


* API Key 

 : http://dna.daum.net/myapi/dashboard


기타 검색 및 상세 옵션은 API 를 참고해주시고 블로그 검색을 위한 옵션입니다.



Request Parameter 

 

요청변수 값 설명
q string (필수) 검색을 원하는 질의어
result integer : 기본값 10, 최소 1, 최대 20 한 페이지에 출력될 결과수
pageno integer : 기본값 1, 최소 1, 최대 500 검색 결과 페이지 번호
sort string : date(기본값), accu
  • 검색 결과의 정렬순서
  • date : 최신글순
  • accu : 정확도순
output string : xml(기본값), json 결과형식
callback string 콜백함수(output이 json일 경우)




Response Parameter


출력 변수 값 설명
title string 검색 제목
link string 서비스 URL
description string 검색 결과의 간략한 소개
lastBuildDate string 검색 시간
totalCount integer 전체 검색 결과의 수
pageCount integer 전체 검색 결과의 페이지수
result integer 한 페이지에 출력될 결과수
item - 개별 검색 결과 정보
title string 개별 검색 결과의 제목
description string 개발 검색 결과의 본문 요약
link string 개별 검색 결과의 link url
comment string 관련 링크
author string 출처
pubDate string 등록일



저작자표시

댓글()
이전 1 ··· 6 7 8 9 10 11 다음

티스토리툴바