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,586
15년 전 조회 1,609
15년 전 조회 1,667
15년 전 조회 1,257
15년 전 조회 2,020
15년 전 조회 1,564
15년 전 조회 1,141
15년 전 조회 3,019
15년 전 조회 1,372
15년 전 조회 1,595
15년 전 조회 1,365
15년 전 조회 2,231
15년 전 조회 2,252
15년 전 조회 1,890
15년 전 조회 1,256
15년 전 조회 1,499
15년 전 조회 1,167
15년 전 조회 1,130
15년 전 조회 1,380
15년 전 조회 2,759
15년 전 조회 2,765
15년 전 조회 1,754
15년 전 조회 1,278
15년 전 조회 1,453
15년 전 조회 1,431
15년 전 조회 1,339
15년 전 조회 1,206
15년 전 조회 1,137
15년 전 조회 1,495
15년 전 조회 1,444
15년 전 조회 1,209
15년 전 조회 1,168
15년 전 조회 1,351
15년 전 조회 1,816
15년 전 조회 1,358
15년 전 조회 1,666
15년 전 조회 1,502
15년 전 조회 2,237
15년 전 조회 3,236
15년 전 조회 2,599
15년 전 조회 1,170
15년 전 조회 2,177
15년 전 조회 2,383
15년 전 조회 1,681
15년 전 조회 1,641
15년 전 조회 2,919
15년 전 조회 2,841
15년 전 조회 5,844
15년 전 조회 1,761
15년 전 조회 4,575
15년 전 조회 1,657
15년 전 조회 1,925
15년 전 조회 1,904
15년 전 조회 1,897
15년 전 조회 1,390
15년 전 조회 1,640
15년 전 조회 1,790
15년 전 조회 1,695
15년 전 조회 2,408
15년 전 조회 1,567
15년 전 조회 1,693
15년 전 조회 1,167
15년 전 조회 1,269
15년 전 조회 1,252
15년 전 조회 1,213
15년 전 조회 1,154
15년 전 조회 1,201
15년 전 조회 1,346
15년 전 조회 1,383
15년 전 조회 2,889
15년 전 조회 1,212
15년 전 조회 1,873
15년 전 조회 1,752
15년 전 조회 1,871
15년 전 조회 1,578
15년 전 조회 2,072
15년 전 조회 887
15년 전 조회 1,353
15년 전 조회 1,330
15년 전 조회 3,110
15년 전 조회 3,499
15년 전 조회 2,179
15년 전 조회 1,620
15년 전 조회 2,240
15년 전 조회 1,728
15년 전 조회 1,354
15년 전 조회 4,040
15년 전 조회 1,705
15년 전 조회 1,776
15년 전 조회 3,068
15년 전 조회 1,760
15년 전 조회 4,435
15년 전 조회 2,640
15년 전 조회 3,418
15년 전 조회 2,048
15년 전 조회 2,278
15년 전 조회 1,559
15년 전 조회 4,625
15년 전 조회 4,282
15년 전 조회 4,081