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,588
15년 전 조회 1,610
15년 전 조회 1,668
15년 전 조회 1,258
15년 전 조회 2,022
15년 전 조회 1,565
15년 전 조회 1,141
15년 전 조회 3,019
15년 전 조회 1,372
15년 전 조회 1,595
15년 전 조회 1,368
15년 전 조회 2,231
15년 전 조회 2,253
15년 전 조회 1,890
15년 전 조회 1,259
15년 전 조회 1,502
15년 전 조회 1,169
15년 전 조회 1,132
15년 전 조회 1,380
15년 전 조회 2,760
15년 전 조회 2,765
15년 전 조회 1,758
15년 전 조회 1,279
15년 전 조회 1,454
15년 전 조회 1,431
15년 전 조회 1,339
15년 전 조회 1,209
15년 전 조회 1,140
15년 전 조회 1,497
15년 전 조회 1,446
15년 전 조회 1,211
15년 전 조회 1,171
15년 전 조회 1,353
15년 전 조회 1,817
15년 전 조회 1,358
15년 전 조회 1,667
15년 전 조회 1,502
15년 전 조회 2,237
15년 전 조회 3,239
15년 전 조회 2,599
15년 전 조회 1,171
15년 전 조회 2,179
15년 전 조회 2,383
15년 전 조회 1,683
15년 전 조회 1,642
15년 전 조회 2,921
15년 전 조회 2,843
15년 전 조회 5,844
15년 전 조회 1,761
15년 전 조회 4,576
15년 전 조회 1,658
15년 전 조회 1,926
15년 전 조회 1,906
15년 전 조회 1,899
15년 전 조회 1,391
15년 전 조회 1,642
15년 전 조회 1,791
15년 전 조회 1,696
15년 전 조회 2,409
15년 전 조회 1,569
15년 전 조회 1,694
15년 전 조회 1,168
15년 전 조회 1,270
15년 전 조회 1,253
15년 전 조회 1,214
15년 전 조회 1,155
15년 전 조회 1,201
15년 전 조회 1,347
15년 전 조회 1,385
15년 전 조회 2,890
15년 전 조회 1,215
15년 전 조회 1,875
15년 전 조회 1,753
15년 전 조회 1,872
15년 전 조회 1,580
15년 전 조회 2,073
15년 전 조회 888
15년 전 조회 1,355
15년 전 조회 1,330
15년 전 조회 3,111
15년 전 조회 3,499
15년 전 조회 2,180
15년 전 조회 1,620
15년 전 조회 2,242
15년 전 조회 1,729
15년 전 조회 1,355
15년 전 조회 4,041
15년 전 조회 1,706
15년 전 조회 1,777
15년 전 조회 3,069
15년 전 조회 1,761
15년 전 조회 4,436
15년 전 조회 2,640
15년 전 조회 3,421
15년 전 조회 2,048
15년 전 조회 2,278
15년 전 조회 1,560
15년 전 조회 4,626
15년 전 조회 4,284
15년 전 조회 4,083