웹진형스킨에 이런 기능 추가하면 더 좋을거 같아서요..

안에 작은 그림 클릭해보시면 이해되실겁니다.

http://daum.myhome.tv/gg/bbs/board.php?bo_table=test&wr_id=15

외국 사이트 돌다가 저 기능을 발견해서 소스를 빼놨거든요..

1,2,3 소스만 있으면 구현됩니다.

1.

http://daum.myhome.tv/js/jquery.min.js

이거하고..

2.

<SCRIPT type=text/javascript>
<!--
/* jQuery.FlyOut.js - author: Jolyon Terwilliger - Nixbox Web Designs */
$.fn.extend({flyout:function(m){var j=false;var n=false;var c;var l;var d;var a;var g;var h=new Image();var k="img";var f;this.click(function(){if(n==true){return false}if(j){e(this)}else{i(this)}return false});var b=jQuery.extend({outSpeed:1000,inSpeed:500,outEase:"swing",inEase:"swing",loadingSrc:null,loader:"loader",loaderZIndex:500,widthMargin:40,heightMargin:40,loadingText:"Loading...",closeTip:" - Click here to close",destPadding:20,startOffsetX:0,startOffsetY:0,startHeight:0,startWidth:0,flyOutStart:function(){},flyOutFinish:function(){},putAwayStart:function(){},putAwayFinish:function(){},shownClass:"shown"},m);function i(o){n=true;c=$(o);l=$("img",o);h=new Image();sL=$(window).scrollLeft();sT=$(window).scrollTop();d=l.offset();d.left+=b.startOffsetX;d.top+=b.startOffsetY;a=(b.startHeight>0?b.startHeight:l.height());g=(b.startWidth>0?b.startWidth:l.width());$("<div></div>").attr("id",b.loader).appendTo("body").css({position:"absolute",top:d.top,left:d.left,height:a,width:g,opacity:0.5,display:"block","z-index":b.loaderZIndex});if(b.loadingSrc){$("#"+b.loader).append($("<img/>").load(function(){$(this).css({position:"relative",top:a/2-(this.height/2),left:g/2-(this.width/2)}).attr("alt",b.loadingText)}).attr("src",b.loadingSrc))}else{$("#"+b.loader).css("background-color","red").append($("<span></span>").text(b.loadingText).css({position:"relative",top:"2px",left:"2px",color:"red","font-size":"9px"}))}$(h).load(function(){imgtag=$("<img/>").attr("src",c.attr("href")).attr("title",l.attr("title")+b.closeTip).attr("alt",l.attr("alt")+b.closeTip).height(a).width(g);b.flyOutStart.call(o);if(b.destElement){var p=$(b.destElement);max_x=p.innerWidth()-(b.destPadding*2);max_y=p.innerHeight()-(b.destPadding*2)}else{max_x=$(window).width()-b.widthMargin;if($.browser.opera){wh=document.getElementsByTagName("html")[0].clientHeight}else{wh=$(window).height()}max_y=wh-b.heightMargin}width=h.width;height=h.height;x_dim=max_x/width;y_dim=max_y/height;if(x_dim<=y_dim){y_dim=x_dim}else{x_dim=y_dim}dw=Math.round(width*x_dim);dh=Math.round(height*y_dim);if(dw>width){dw=width}if(dh>height){dh=height}if(b.destElement){dPos=p.offset();dl=Math.round((p.outerWidth()/2)-(dw/2)+dPos.left);dt=Math.round((p.outerHeight()/2)-(dh/2)+dPos.top)}else{dl=Math.round(($(window).width()/2)-(dw/2)+sL);if($.browser.opera){wh=document.getElementsByTagName("html")[0].clientHeight}else{wh=$(window).height()}dt=Math.round((wh/2)-(dh/2)+sT)}$("#"+b.loader).empty().css("opacity",1).append(imgtag).width("auto").height("auto").animate({top:dt,left:dl},{duration:b.outSpeed,queue:false,easing:b.outEase});$("#"+b.loader+" "+k).animate({height:dh,width:dw},b.outSpeed,b.outEase,function(){b.flyOutFinish.call(o);j=o;c.addClass(b.shownClass);n=false;$("#"+b.loader+" "+k).click(function(){e(null)})})});h.src=c.attr("href")}function e(o){if(n==true||j==false){return false}b.putAwayStart.call(j);n=true;d=l.offset();d.left+=b.startOffsetX;d.top+=b.startOffsetY;$("#"+b.loader).animate({top:d.top,left:d.left},{duration:b.inSpeed,queue:false,easing:b.inEase});$("#"+b.loader+" "+k).animate({height:a,width:g},b.inSpeed,b.inEase,function(){$("#"+b.loader).css("display","none").remove();b.putAwayFinish.call(j);n=false;h=null;if(o&&o!=j){j=false;i(o)}j=false;c.removeClass(b.shownClass)})}return this}});

$(document).ready(function(){$('.flyout').flyout();});
//-->
</SCRIPT>

이 스크립트하고..

3.

마지막으로..

<p><a class="flyout" href="http://daum.myhome.tv/image/test2.jpg" title="클릭하시면 큰 이미지로 보실수 있습니다."><img alt="disabling UAC" border="0" class="tmbright" height="100" src="http://daum.myhome.tv/image/test1.jpg" width="150" /></a></p>

웹진형 스킨에 맞추어서 응용하고 보완하면 좋을거같아요