S

jQuery로 만든 라이트 박스...

뭐 많은 사람들이 이미 만든것도 있구...

그분들이 몇년동안 쌓아올려놓은걸 하루아침에 제낄 생각은 없습니다만...

천천히 필요한기능을 넣고 필요없는부분은 축소화 시켜나갈 생각입니다.

http://sizkein.textcube.com/entry/jQuery-로-만든-이미지-팝업창


예제 : http://mqoo.com/bbs/images/16

사용법사용법 :

<SCRIPT LANGUAGE="JavaScript">
$(document).ready(function(){
	$(".resizeIMG").simplebox({ blind:false , img:true, drag:true });
});
</SCRIPT>
<div id='blank'></div>

다운로드 :

소스코드 : ver0.5ver0.5
/*
	version :0.5
	만든이 : Sizkein
	메일주소 : sizkein@gmail.com
	문의사항 : sizkein@gmail.com
	저작권 : GPL
	공개장소 : developer.mqoo.com
*/
(function ($, window) {

	var defaults = {
		loading_text:"loading...",
		href: false,
		src: false,
		blind:true,
		title : "리사이즈된 이미지입니다.\n원본을 보시려면 클릭해 주세요.",
		opacity: 0.6,
		backgroundColor : "#000",
		fontColor : "#FFF",
		img: false,					//이것이 true 일때 작동한다.
		wheel:true,
		iframe : false,
		width: 600,
		height: 600,

		//추가 할 예정인 기능
		popup_top_left : "align='center' valign='middle' ", //일단 이름은 대충 정하자
		drag:false
	},
	simplebox = 'simplebox';

function control_box_edit(a, b){
}
function control_box_exit(a, b){
}

function blind(a, options) { 
	if(a.get(0).tagName=='A') var a = a.children();			//a 클릭이라면 chrome 나 safari,등을 위해서 img 에 블라인드를 걸기위해..

	var blind_ = new Array();
	if(options.blind){
		blind_.top = 0;
		blind_.left = 0;
		blind_.width = $(document).width();
		blind_.height = $(document).height();
	}else{
		blind_.top = a.offset().top;
		blind_.left = a.offset().left;
		blind_.width = a.width();
		blind_.height = a.height();
	}

	jQuery("<div/>")
		.attr({
			id: "index_layer"
		})
		.css({
			position:'absolute',
			top: 0,
			left: 0,
			width: 0,
			height: 0,
			zIndex: 0
		})
		.click(function(){$(this).remove()})
		.insertAfter("#blank");


	jQuery("<div/>")
		.attr({
			id: "simple_blind"
		})
		.css({
			opacity:options.opacity,
			position:'absolute',

			top: blind_.top,
			left: blind_.left,
			width: blind_.width,
			height: blind_.height,

			zIndex: 9950,
			cursor: "pointer",
			textAlign: 'center',
			color:options.fontColor,
			backgroundColor: options.backgroundColor
		})
		.bind('click',function(){
		})
		.appendTo("#index_layer");
}

function change_layer(a, options){
	//실제 사이즈를 기록해놓는다.
	var real_size = new Array();
		real_size.width = a.width();
		real_size.height = a.height();
	var simpleTLWH = new Array();
	var img_rateWH = a.width() / a.height(); //이미지 확대축소를 위한 비율작성
	var img_rateHW = a.height() / a.width();
	//사이즈를 판단한다.
	if(a.width()>$(window).width()){
		simpleTLWH.width = $(window).width()-50;
		simpleTLWH.height = simpleTLWH.width * img_rateHW;
		if(simpleTLWH.height >$(window).height()){
			simpleTLWH.height = $(window).height()-50;
			simpleTLWH.width = simpleTLWH.height * img_rateWH;
		}
	}else if(a.height()>$(window).height()){ 
		simpleTLWH.height = $(window).height()-50;
		simpleTLWH.width = simpleTLWH.height * img_rateWH;
	}else{
		simpleTLWH.width = a.outerWidth();
		simpleTLWH.height = a.outerHeight();
	}

		simpleTLWH.top = ($(window).height()-simpleTLWH.height)/2 + $(window).scrollTop();
		simpleTLWH.left = ($(window).width()-simpleTLWH.width)/2;


	jQuery("<div/>")
		.attr({
			id: "simple_popup"
		})
		.css({
			position:'absolute',
			top: simpleTLWH.top,
			left: simpleTLWH.left,
			width: simpleTLWH.width,
			height: simpleTLWH.height,
			zIndex: 9950,
			cursor: "pointer",
			border: "3px solid #333"
		})
		.appendTo("#index_layer");


$("#simple_img_loading")
	.css({
		display:'',
		width: "100%",
		height: "100%"
	})
	.appendTo("#simple_popup");


		jQuery("<div/>")
		.attr({
			id: "control_box"
		})
		.css({
			opacity : 0,
			position:'absolute',
			top: 0,
			left: 0,
			width: "100%",
			height: 0,
			zIndex: 990,
			color: "#FFF",
			backgroundColor: "#000"
		}).appendTo("#simple_popup");





//drag 이부분은 drag
if(options.drag){
$.getScript("http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js",  function(){
	$("#simple_popup")
	.draggable().css('cursor', 'move');
});
}
//drag 끝

//휠 관련 부분
if(options.wheel){
	//wheel lib
	;(function($){
	$.fn.wheel = function( fn ){	return this[ fn ? "bind" : "trigger" ]( "wheel", fn );	};
	// special event config
	$.event.special.wheel = {
		setup: function(){
			$.event.add( this, wheelEvents, wheelHandler, {} );
			},
		teardown: function(){
			$.event.remove( this, wheelEvents, wheelHandler );
			}
		};
	// events to bind ( browser sniffed... )
	var wheelEvents = !$.browser.mozilla ? "mousewheel" : "DOMMouseScroll"+( $.browser.version<"1.9" ? " mousemove" : "" ); 
	// shared event handler
	function wheelHandler( event ){ 
		switch ( event.type ){
			case "mousemove": // FF2 has incorrect event positions
				return $.extend( event.data, { // store the correct properties
					clientX: event.clientX, clientY: event.clientY,
					pageX: event.pageX, pageY: event.pageY
					});			
			case "DOMMouseScroll": // firefox
				$.extend( event, event.data ); // fix event properties in FF2
				event.delta = -event.detail/3; // normalize delta
				break;
			case "mousewheel": // IE, opera, safari
				event.delta = event.wheelDelta/120; // normalize delta
				if ( $.browser.opera ) event.delta *= -1; // normalize delta
				break;
			}
		event.type = "wheel"; // hijack the event	
		return $.event.handle.call( this, event, event.delta );
		};
	})(jQuery);
	// wheel lib end

		$("#simple_popup").bind('wheel',function(event,delta){
			var chang_size = 50;
	//		alert($(this).width()+'/'+$(this).height());
			if(delta>0){
				$(this).css({
					top: $(this).offset().top-(chang_size/2),
					left: $(this).offset().left-(chang_size/2),
					width:$(this).width()+chang_size,
					height:($(this).width()+chang_size)*img_rateHW
				});
//				alert(parseInt(($(this).width()+chang_size)/real_size));
				control_box_edit( $(this), "이미지가 확대되었습니다.");
				return false;
			}else{
				$(this).css({
					top: $(this).offset().top+(chang_size/2),
					left: $(this).offset().left+(chang_size/2),
					width:$(this).width()-chang_size,
					height:($(this).width()-chang_size)*img_rateHW
				});
				control_box_edit( $(this), "이미지가 축소되었습니다.");
				return false;
			}
		})
}

}

function iframe_layer(a, option){
	jQuery("<div/>")
	.attr('id', 'simple_iframe')
	.css({
		position:'absolute',
		width: option.width,
		height: option.height,
//		top: $(window).height()-option.height,
		top: 0,
		left: 0,
		border: "3px solid #333",
		zIndex: 990
//		backgroundColor: "000"

	})
	.appendTo("#blank");

jQuery("<iframe/>")
	.attr('src', option.href)
	.css({
		width: "100%",
		height: "100%",
		border: "3px solid #333",
		zIndex: 990
		})
	.appendTo("#simple_iframe");

}

	publicMethod = $.fn[simplebox]  = $.fn.simplebox = $[simplebox] = function (options, callback) {
		var $this = this;
		options = jQuery.extend(defaults, options);

		if (callback) {
			options.onComplete = callback;
		}

		if (!$this[0] || $this.selector === undefined) {
			$this = $('<a/>');
			options.open = true; // assume an immediate open
		}


$this.live("click", function(e){
//블라인드의 종류를 찾아 건다.


	if(options.img){
		blind($(this), options);
		var img_src = options.href || $(this).attr("href") || $(this).attr("src");
		jQuery("<img id='simple_img_loading' src='"+img_src+"' style='display:none;' />").appendTo("#index_layer");
		$("#simple_img_loading").load(function(){
			change_layer($(this), options);
		})
	}

	if(options.iframe && options.href){
		iframe_layer($(this), options);
	}


	return false;
}).css('cursor', 'pointer');



		return $this;
	};

	publicMethod.settings = defaults;

	// Initializes simplebox when the DOM has loaded
	$(publicMethod.init);

}(jQuery, this));
[이 게시물은 관리자님에 의해 2011-10-31 16:55:28 jQuery에서 이동 됨]
|

댓글 2개

쓸대없는 더미가 생기지 않게 하도록 하기 위해서 blank 내부에 레이어를 집어넣습니다.

고로 $("#blank).remove(); 하시면 모든 창이 지워지겠죠
댓글을 작성하시려면 로그인이 필요합니다.

프로그램

태그 필터 (최대 3개) 전체 개발자 소스 기타 mysql 팁자료실 javascript php linux flash 정규표현식 jquery node.js mobile 웹서버 os 프로그램 강좌 썸네일 이미지관련 도로명주소 그누보드5 기획자 견적서 계약서 기획서 마케팅 제안서 seo 통계 서식 통계자료 퍼블리셔 html css 반응형 웹접근성 퍼블리싱 표준화 반응형웹 홈페이지기초 부트스트랩 angularjs 포럼 스크린리더 센스리더 개발자톡 개발자팁 퍼블리셔톡 퍼블리셔팁 기획자톡 기획자팁 프로그램강좌 퍼블리싱강좌
+
제목 글쓴이 날짜 조회
15년 전 조회 1,604
15년 전 조회 1,620
15년 전 조회 1,681
15년 전 조회 1,274
15년 전 조회 2,035
15년 전 조회 1,575
15년 전 조회 1,153
15년 전 조회 3,035
15년 전 조회 1,389
15년 전 조회 1,611
15년 전 조회 1,379
15년 전 조회 2,246
15년 전 조회 2,268
15년 전 조회 1,904
15년 전 조회 1,270
15년 전 조회 1,520
15년 전 조회 1,184
15년 전 조회 1,152
15년 전 조회 1,397
15년 전 조회 2,768
15년 전 조회 2,786
15년 전 조회 1,773
15년 전 조회 1,294
15년 전 조회 1,465
15년 전 조회 1,444
15년 전 조회 1,348
15년 전 조회 1,221
15년 전 조회 1,152
15년 전 조회 1,506
15년 전 조회 1,458
15년 전 조회 1,231
15년 전 조회 1,184
15년 전 조회 1,372
15년 전 조회 1,838
15년 전 조회 1,372
15년 전 조회 1,686
15년 전 조회 1,515
15년 전 조회 2,255
15년 전 조회 3,251
15년 전 조회 2,615
15년 전 조회 1,188
15년 전 조회 2,189
15년 전 조회 2,401
15년 전 조회 1,699
15년 전 조회 1,659
15년 전 조회 2,933
15년 전 조회 2,852
15년 전 조회 5,859
15년 전 조회 1,777
15년 전 조회 4,585
15년 전 조회 1,677
15년 전 조회 1,935
15년 전 조회 1,920
15년 전 조회 1,913
15년 전 조회 1,409
15년 전 조회 1,655
15년 전 조회 1,800
15년 전 조회 1,712
15년 전 조회 2,419
15년 전 조회 1,585
15년 전 조회 1,708
15년 전 조회 1,181
15년 전 조회 1,285
15년 전 조회 1,269
15년 전 조회 1,229
15년 전 조회 1,172
15년 전 조회 1,220
15년 전 조회 1,357
15년 전 조회 1,401
15년 전 조회 2,902
15년 전 조회 1,234
15년 전 조회 1,887
15년 전 조회 1,767
15년 전 조회 1,887
15년 전 조회 1,589
15년 전 조회 2,090
15년 전 조회 906
15년 전 조회 1,366
15년 전 조회 1,349
15년 전 조회 3,126
15년 전 조회 3,518
15년 전 조회 2,190
15년 전 조회 1,633
15년 전 조회 2,258
15년 전 조회 1,746
15년 전 조회 1,366
15년 전 조회 4,051
15년 전 조회 1,720
15년 전 조회 1,790
15년 전 조회 3,084
15년 전 조회 1,777
15년 전 조회 4,450
15년 전 조회 2,659
15년 전 조회 3,433
15년 전 조회 2,064
15년 전 조회 2,291
15년 전 조회 1,581
15년 전 조회 4,644
15년 전 조회 4,297
15년 전 조회 4,098