티스토리 삽입용 SyntaxHighlighter 코드 변환 사이트 !!

http://www.uhoon.co.kr/1.html

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 등 팝업 플러그인.

{
	dataType : 'html',
	headers  : { 'X-fancyBox': true }
}

{
	scrolling : 'auto',
	preload   : true
}

{
	wmode: 'transparent',
	allowfullscreen   : 'true',
	allowscriptaccess : 'always'
}

{
	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
}

{
	{
		next : 'left',
		prev : 'right'
	}
}

{
	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>'
}

{
	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'
	}
}

$("#page").children().filter('a').eq(0).fancybox();

$(".fancybox").fancybox({
    parent: "form:first" // jQuery selector
});

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

툴팁이란 ?   

말풍선 또는 툴팁(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>