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,330
15년 전 조회 1,343
15년 전 조회 1,398
15년 전 조회 1,010
15년 전 조회 1,772
15년 전 조회 1,300
15년 전 조회 883
15년 전 조회 2,740
15년 전 조회 1,125
15년 전 조회 1,330
15년 전 조회 1,130
15년 전 조회 1,980
15년 전 조회 1,989
15년 전 조회 1,641
15년 전 조회 1,001
15년 전 조회 1,228
15년 전 조회 926
15년 전 조회 872
15년 전 조회 1,131
15년 전 조회 2,481
15년 전 조회 2,516
15년 전 조회 1,490
15년 전 조회 1,029
15년 전 조회 1,184
15년 전 조회 1,186
15년 전 조회 1,053
15년 전 조회 956
15년 전 조회 882
15년 전 조회 1,244
15년 전 조회 1,196
15년 전 조회 942
15년 전 조회 924
15년 전 조회 1,094
15년 전 조회 1,553
15년 전 조회 1,085
15년 전 조회 1,417
15년 전 조회 1,254
15년 전 조회 1,923
15년 전 조회 2,987
15년 전 조회 2,322
15년 전 조회 921
15년 전 조회 1,932
15년 전 조회 2,112
15년 전 조회 1,418
15년 전 조회 1,390
15년 전 조회 2,657
15년 전 조회 2,545
15년 전 조회 5,530
15년 전 조회 1,497
15년 전 조회 4,259
15년 전 조회 1,387
15년 전 조회 1,691
15년 전 조회 1,653
15년 전 조회 1,641
15년 전 조회 1,144
15년 전 조회 1,392
15년 전 조회 1,530
15년 전 조회 1,443
15년 전 조회 2,163
15년 전 조회 1,308
15년 전 조회 1,369
15년 전 조회 917
15년 전 조회 1,021
15년 전 조회 993
15년 전 조회 947
15년 전 조회 899
15년 전 조회 962
15년 전 조회 1,105
15년 전 조회 1,119
15년 전 조회 2,641
15년 전 조회 970
15년 전 조회 1,626
15년 전 조회 1,495
15년 전 조회 1,621
15년 전 조회 1,320
15년 전 조회 1,815
15년 전 조회 632
15년 전 조회 1,118
15년 전 조회 1,087
15년 전 조회 2,870
15년 전 조회 3,193
15년 전 조회 1,868
15년 전 조회 1,378
15년 전 조회 1,994
15년 전 조회 1,501
15년 전 조회 1,092
15년 전 조회 3,790
15년 전 조회 1,444
15년 전 조회 1,534
15년 전 조회 2,767
15년 전 조회 1,459
15년 전 조회 4,188
15년 전 조회 2,398
15년 전 조회 3,181
15년 전 조회 1,787
15년 전 조회 2,019
15년 전 조회 1,322
15년 전 조회 4,401
15년 전 조회 3,982
15년 전 조회 3,801