스크립트 질문좀 드리겠습니다.
본문
안녕하세요 스크립트 질문좀 드리겠습니다.
오픈소스를 가지고 와서 작업중인데요
a 링크를 클릭하면 레이어 팝업이 나오도록 되어있는 소스입니다
그런데 문제점은 팝업레이어가 가운데 정렬이 안되는데
어떻게 해야 팝업레이어가 가운데 정렬이 될까요
jQuery.fn.fancyZoom = function(options){
var options = options || {};
var directory = options && options.directory ? options.directory : 'img';
var zooming = false;
if ($('#zoom').length == 0) {
var ext = $.browser.msie ? 'gif' : 'png';
var html = '<div id="zoom" style="display:none;"> \
<table id="zoom_table" style="border-collapse:collapse;margin-top: 100px;width:1000px; height:100%;"> \
<tbody> \
<tr> \
<td class="tl" style="background:url(' + directory + '/tl.' + ext + ') 0 0 no-repeat; width:20px height:20px; overflow:hidden;" /> \
<td class="tm" style="background:url(' + directory + '/tm.' + ext + ') 0 0 repeat-x; height:20px; overflow:hidden;" /> \
<td class="tr" style="background:url(' + directory + '/tr.' + ext + ') 100% 0 no-repeat; width:20px height:20px; overflow:hidden;" /> \
</tr> \
<tr> \
<td class="ml" style="background:url(' + directory + '/ml.' + ext + ') 0 0 repeat-y; width:20px; overflow:hidden;" /> \
<td class="mm" style="background:#fff; vertical-align:top; padding:10px;"> \
<div id="zoom_content"> \
</div> \
</td> \
<td class="mr" style="background:url(' + directory + '/mr.' + ext + ') 100% 0 repeat-y; width:20px; overflow:hidden;" /> \
</tr> \
<tr> \
<td class="bl" style="background:url(' + directory + '/bl.' + ext + ') 0 100% no-repeat; width:20px height:20px; overflow:hidden;" /> \
<td class="bm" style="background:url(' + directory + '/bm.' + ext + ') 0 100% repeat-x; height:20px; overflow:hidden;" /> \
<td class="br" style="background:url(' + directory + '/br.' + ext + ') 100% 100% no-repeat; width:20px height:20px; overflow:hidden;" /> \
</tr> \
</tbody> \
</table> \
<a href="#" title="Close" id="zoom_close" style="position:absolute; top:100px; left:0;"> \
<img src="' + directory + '/closebox.' + ext + '" alt="Close" style="border:none; margin:0; padding:0;" /> \
</a> \
</div>';
$('body').append(html);
$('html').click(function(e){if($(e.target).parents('#zoom:visible').length == 0) hide();});
$(document).keyup(function(event){
if (event.keyCode == 27 && $('#zoom:visible').length > 0) hide();
});
$('#zoom_close').click(hide);
}
var zoom = $('#zoom');
var zoom_table = $('#zoom_table');
var zoom_close = $('#zoom_close');
var zoom_content = $('#zoom_content');
var middle_row = $('td.ml,td.mm,td.mr');
this.each(function(i) {
$($(this).attr('href')).hide();
$(this).click(show);
});
return this;
function show(e) {
if (zooming) return false;
zooming = true;
var content_div = $($(this).attr('href'));
var zoom_width = options.width;
var zoom_height = options.height;
var width = window.innerWidth || (window.document.documentElement.clientWidth || window.document.body.clientWidth);
var height = window.innerHeight || (window.document.documentElement.clientHeight || window.document.body.clientHeight);
var x = window.pageXOffset || (window.document.documentElement.scrollLeft || window.document.body.scrollLeft);
var y = window.pageYOffset || (window.document.documentElement.scrollTop || window.document.body.scrollTop);
var window_size = {'width':width, 'height':height, 'x':x, 'y':y}
var width = (zoom_width || content_div.width()) + 60;
var height = (zoom_height || content_div.height()) + 60;
var d = window_size;
// ensure that newTop is at least 0 so it doesn't hide close button
var newTop = Math.max((d.height/2) - (height/2) + y, 0);
var newLeft = (d.width/2) - (width/2);
var curTop = e.pageY;
var curLeft = e.pageX;
zoom_close.attr('curTop', curTop);
zoom_close.attr('curLeft', curLeft);
zoom_close.attr('scaleImg', options.scaleImg ? 'true' : 'false');
$('#zoom').hide().css({
position : 'absolute',
top : curTop + 'px',
left : curLeft + 'px',
width : '1px',
height : '1px'
});
fixBackgroundsForIE();
zoom_close.hide();
if (options.closeOnClick) {
$('#zoom').click(hide);
}
if (options.scaleImg) {
zoom_content.html(content_div.html());
$('#zoom_content img').css('width', '100%');
} else {
zoom_content.html('');
}
$('#zoom').animate({
top : newTop + 'px',
left : newLeft + 'px',
opacity : "show",
width : width,
height : height
}, 500, null, function() {
if (options.scaleImg != true) {
zoom_content.html(content_div.html());
}
unfixBackgroundsForIE();
zoom_close.show();
zooming = false;
})
return false;
}
function hide() {
if (zooming) return false;
zooming = true;
$('#zoom').unbind('click');
fixBackgroundsForIE();
if (zoom_close.attr('scaleImg') != 'true') {
zoom_content.html('');
}
zoom_close.hide();
$('#zoom').animate({
top : zoom_close.attr('curTop') + 'px',
left : zoom_close.attr('curLeft') + 'px',
opacity : "hide",
width : '1px',
height : '1px'
}, 500, null, function() {
if (zoom_close.attr('scaleImg') == 'true') {
zoom_content.html('');
}
unfixBackgroundsForIE();
zooming = false;
});
return false;
}
function switchBackgroundImagesTo(to) {
$('#zoom_table td').each(function(i) {
var bg = $(this).css('background-image').replace(/\.(png|gif|none)\"\)$/, '.' + to + '")');
$(this).css('background-image', bg);
});
var close_img = zoom_close.children('img');
var new_img = close_img.attr('src').replace(/\.(png|gif|none)$/, '.' + to);
close_img.attr('src', new_img);
}
function fixBackgroundsForIE() {
if ($.browser.msie && parseFloat($.browser.version) >= 7) {
switchBackgroundImagesTo('gif');
}
}
function unfixBackgroundsForIE() {
if ($.browser.msie && $.browser.version >= 7) {
switchBackgroundImagesTo('png');
}
}
}
/* reset.css */
* { margin: 0; padding: 0; }
a img { border: 0; }
img { vertical-align: middle; }
.container:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.container { display: inline-block; }
/* start commented backslash hack \*/
* html .container { height: 1%; }
.container { display: block; }
/* close commented backslash hack */
/* grid.css */
.column { float: left; margin-right: 10px;margin-top:20px; padding: 0; }
.span-1 { width: 30px; background:#fff;}
.span-2 { width: 70px;}
.span-3 { width: 110px;}
.span-4 { width: 150px;}
.span-5 { width: 190px;}
.span-6 { width: 242px;height:245px;background:#fff;}
.span-7 { width: 500px;height:245px;background:#fff;}
.span-8 { width: 310px;}
.span-9 { width: 350px;}
.span-10 { width: 390px;}
.span-11 { width: 430px;}
.span-12 { width: 470px;}
.span-13 { width: 510px;}
.span-14 { width: 550px;}
.span-15 { width: 590px;}
.span-16 { width: 630px;}
.span-17 { width: 670px;}
.span-18 { width: 1010px;}
.span-19 { width: 750px;}
.span-20 { width: 790px;}
.span-21 { width: 830px;}
.span-22 { width: 870px;}
.span-23 { width: 910px;}
.span-24 { width: 950px; margin: 0; }
.last { margin-right: 0; }
<section id="content" class="container">
<div class="span-18 column rounded">
<div class="span-6 column rotated">
<a id="image1" class="cms-editable polaroid" href="#pic-1" rel="lightbox" title="first image">1 </a>
</div>
<div class="span-6 column rotated">
<a id="image2" class="cms-editable polaroid" href="#pic-2" rel="lightbox" title="second image">2 </a>
</div>
<div class="span-6 column rotated">
<a id="image4" class="cms-editable polaroid" href="#pic-3" rel="lightbox" title="first image">3 </a>
</div>
<div class="span-6 column rotated last">
<a id="image3" class="cms-editable polaroid" href="#pic-4" rel="lightbox" title="third image">4 </a>
</div>
<div class="span-6 column rotated">
<a id="image4" class="cms-editable polaroid" href="#pic-5" rel="lightbox" title="first image">5 </a>
</div>
<div class="span-6 column rotated">
<a id="image5" class="cms-editable polaroid" href="#pic-6" rel="lightbox" title="first image">6</a>
</div>
<div class="span-7 column rotated last">
<iframe src="http://busanmsj.godohosting.com/bbs/write.php?bo_table=question" frameborder="0" width="500" height="245" marginwidth="0" marginheight="0" scrolling="no"></iframe>
</div>
<div id="pic-1">
sss
</div>
<div id="pic-2">
<img src="/img/img_caution.jpg">
<img src="/img/img01.jpg">
</div>
<div id="pic-3">
<img src="/img/3.jpg" alt="image" />
</div>
<div id="pic-4">
<img src="/img/4.jpg" alt="image" />
</div>
<div id="pic-5">
<img src="/img/5.jpg" alt="image" />
</div>
<div id="pic-6">
<img src="/img/6.jpg" alt="image" />
</div>
</div>
</section>
답변 1
팝업 위치말하는건가여
팝업안 내용의 위치말하는건가여
팝업 위치는
32줄
<a href="#" title="Close" id="zoom_close" style="position:absolute; top:100px; left:0;">
수정하면 됩니다.
left 수정하세여
<a href="#" title="Close" id="zoom_close" style="position:absolute;top:50%;left:50%;margin:-50px 0 0 -50px;"> \
이렇게 해도 가운데 정렬이 안되네요 ㅠㅠ
팝업 위치를 말슴드리는겁니다 ㅎ
답변을 작성하시기 전에 로그인 해주세요.
