jQuery로 만든 라이트 박스...
뭐 많은 사람들이 이미 만든것도 있구...
그분들이 몇년동안 쌓아올려놓은걸 하루아침에 제낄 생각은 없습니다만...
천천히 필요한기능을 넣고 필요없는부분은 축소화 시켜나갈 생각입니다.
http://sizkein.textcube.com/entry/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에서 이동 됨]
|
댓글을 작성하시려면 로그인이 필요합니다.
jquery.simplebox.js
댓글 2개
고로 $("#blank).remove(); 하시면 모든 창이 지워지겠죠
http://mqoo.com/bbs/images/17
입니다