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,648
15년 전 조회 1,669
15년 전 조회 1,728
15년 전 조회 1,319
15년 전 조회 2,084
15년 전 조회 1,606
15년 전 조회 1,197
15년 전 조회 3,084
15년 전 조회 1,435
15년 전 조회 1,655
15년 전 조회 1,414
15년 전 조회 2,287
15년 전 조회 2,308
15년 전 조회 1,945
15년 전 조회 1,311
15년 전 조회 1,565
15년 전 조회 1,227
15년 전 조회 1,195
15년 전 조회 1,452
15년 전 조회 2,815
15년 전 조회 2,827
15년 전 조회 1,821
15년 전 조회 1,334
15년 전 조회 1,507
15년 전 조회 1,488
15년 전 조회 1,387
15년 전 조회 1,267
15년 전 조회 1,198
15년 전 조회 1,557
15년 전 조회 1,504
15년 전 조회 1,280
15년 전 조회 1,232
15년 전 조회 1,413
15년 전 조회 1,878
15년 전 조회 1,417
15년 전 조회 1,727
15년 전 조회 1,566
15년 전 조회 2,285
15년 전 조회 3,296
15년 전 조회 2,657
15년 전 조회 1,225
15년 전 조회 2,240
15년 전 조회 2,443
15년 전 조회 1,734
15년 전 조회 1,696
15년 전 조회 2,976
15년 전 조회 2,888
15년 전 조회 5,891
15년 전 조회 1,831
15년 전 조회 4,611
15년 전 조회 1,720
15년 전 조회 1,982
15년 전 조회 1,967
15년 전 조회 1,967
15년 전 조회 1,454
15년 전 조회 1,691
15년 전 조회 1,837
15년 전 조회 1,766
15년 전 조회 2,465
15년 전 조회 1,628
15년 전 조회 1,739
15년 전 조회 1,224
15년 전 조회 1,324
15년 전 조회 1,311
15년 전 조회 1,264
15년 전 조회 1,217
15년 전 조회 1,265
15년 전 조회 1,402
15년 전 조회 1,446
15년 전 조회 2,940
15년 전 조회 1,280
15년 전 조회 1,932
15년 전 조회 1,810
15년 전 조회 1,943
15년 전 조회 1,636
15년 전 조회 2,141
15년 전 조회 945
15년 전 조회 1,415
15년 전 조회 1,401
15년 전 조회 3,173
15년 전 조회 3,546
15년 전 조회 2,227
15년 전 조회 1,683
15년 전 조회 2,300
15년 전 조회 1,786
15년 전 조회 1,417
15년 전 조회 4,100
15년 전 조회 1,764
15년 전 조회 1,831
15년 전 조회 3,119
15년 전 조회 1,809
15년 전 조회 4,499
15년 전 조회 2,697
15년 전 조회 3,477
15년 전 조회 2,107
15년 전 조회 2,336
15년 전 조회 1,630
15년 전 조회 4,693
15년 전 조회 4,329
15년 전 조회 4,138