From bff78231d141f8b7876adb15f8f22ed280125fb6 Mon Sep 17 00:00:00 2001 From: zero Date: Mon, 26 Mar 2007 02:19:30 +0000 Subject: [PATCH] git-svn-id: http://xe-core.googlecode.com/svn/trunk@637 201d5d3c-b55e-5fd7-737f-ddc643e51545 --- common/js/common.js | 14 +++ .../components/image_gallery/lang/ko.lang.php | 4 + .../image_gallery/tpl/list_gallery.js | 16 +-- .../image_gallery/tpl/slide_gallery.css | 8 +- .../image_gallery/tpl/slide_gallery.html | 11 +- .../image_gallery/tpl/slide_gallery.js | 101 +++++++++++------- 6 files changed, 98 insertions(+), 56 deletions(-) diff --git a/common/js/common.js b/common/js/common.js index febe536a0..f4353846c 100644 --- a/common/js/common.js +++ b/common/js/common.js @@ -189,3 +189,17 @@ function move_url(url, open_wnidow) { } return false; } + +// 본문내에서 컨텐츠 영역보다 큰 이미지의 경우 원본 크기를 보여줌 +function showOriginalImage(evt) { + var e = new xEvent(evt); + var obj = e.target; + var src = obj.src; + + var image = new Image(); + image.src = src; + var image_width = image.width; + var image_height = image.height; + + winopen(src, "SlideShow", "left=10,top=10,scrollbars=yes,resizable=yes,toolbars=no,width="+image_width+",height="+image_height); +} diff --git a/modules/editor/components/image_gallery/lang/ko.lang.php b/modules/editor/components/image_gallery/lang/ko.lang.php index 36f2d6ca0..942ba214b 100644 --- a/modules/editor/components/image_gallery/lang/ko.lang.php +++ b/modules/editor/components/image_gallery/lang/ko.lang.php @@ -16,4 +16,8 @@ $lang->gallery_border_thickness = "테두리 두께"; $lang->gallery_bg_color = "배경색"; $lang->about_image_list = "이미지 갤러리에 추가할 파일을 선택하세요. 선택후 드래그 또는 shift+클릭(범위선택), ctrl+클릭(개별선택) 가능합니다"; + + $lang->cmd_gallery_prev = "이전"; + $lang->cmd_gallery_next = "다음"; + $lang->cmd_gallery_thumbnail = "썸네일 보기"; ?> diff --git a/modules/editor/components/image_gallery/tpl/list_gallery.js b/modules/editor/components/image_gallery/tpl/list_gallery.js index 341fe6b54..ea8125ca7 100644 --- a/modules/editor/components/image_gallery/tpl/list_gallery.js +++ b/modules/editor/components/image_gallery/tpl/list_gallery.js @@ -74,7 +74,7 @@ function start_list_gallery() { // resize_scale이 1이 아니면, 즉 리사이즈 되었다면 해당 이미지 클릭시 원본을 새창으로 띄워줌 if(resize_scale!=1) { obj.image.style.cursor = 'pointer'; - xAddEventListener(obj.image, 'mousedown', list_gallery_winopen); + xAddEventListener(obj.image, 'mousedown', showOriginalImage); } zone.appendChild(obj.image); @@ -82,17 +82,3 @@ function start_list_gallery() { zone.style.paddingTop = "10px"; } } - -// 큰 이미지의 경우 새창으로 띄워줌 -function list_gallery_winopen(evt) { - var e = new xEvent(evt); - var obj = e.target; - var srl = obj.srl; - var idx = obj.idx; - - var image_width = list_gallery_images[srl][idx].image.width + 40; - var image_height = list_gallery_images[srl][idx].image.height + 20; - - winopen(list_gallery_images[srl][idx].image.src, "SlideShow", "left=10,top=10,scrollbars=yes,resizable=yes,toolbars=no,width="+image_width+",height="+image_height); -} - diff --git a/modules/editor/components/image_gallery/tpl/slide_gallery.css b/modules/editor/components/image_gallery/tpl/slide_gallery.css index e091625eb..784cb3011 100644 --- a/modules/editor/components/image_gallery/tpl/slide_gallery.css +++ b/modules/editor/components/image_gallery/tpl/slide_gallery.css @@ -3,10 +3,16 @@ font-size:8pt; font-family:tahoma; font-weight:bold; - margin-top:20px; + margin:20px 0px 20px 0px; text-align:center; } +.slide_gallery_navigator_box { + font-size:9pt; + text-align:center; + margin:5px 0px 5px 0px; +} + .slide_gallery_main_image_box { border:3px solid #EEEEEE; margin:10px; diff --git a/modules/editor/components/image_gallery/tpl/slide_gallery.html b/modules/editor/components/image_gallery/tpl/slide_gallery.html index fb7649358..e48284c1a 100644 --- a/modules/editor/components/image_gallery/tpl/slide_gallery.html +++ b/modules/editor/components/image_gallery/tpl/slide_gallery.html @@ -1,5 +1,6 @@ + diff --git a/modules/editor/components/image_gallery/tpl/slide_gallery.js b/modules/editor/components/image_gallery/tpl/slide_gallery.js index bb58f899f..c347784b1 100644 --- a/modules/editor/components/image_gallery/tpl/slide_gallery.js +++ b/modules/editor/components/image_gallery/tpl/slide_gallery.js @@ -22,6 +22,11 @@ function slide_gallery_add_image(srl, image_url) { obj.srl = srl; obj.idx = slide_gallery_images[srl].length; + // 원본 이미지를 미리 로딩 + obj.image = new Image(); + obj.image.src = image_url; + if(!obj.image.width) return; + // 썸네일 이미지를 미리 로딩 obj.thumbnail = new Image(); obj.thumbnail.src = image_url; @@ -32,10 +37,6 @@ function slide_gallery_add_image(srl, image_url) { obj.thumbnail.style.opacity = 0.5; obj.thumbnail.style.filter = "alpha(opacity=50)"; - // 원본 이미지를 미리 로딩 - obj.image = new Image(); - obj.image.src = obj.thumbnail.src; - // 썸네일 클릭시 메인 이미지로 바꾸어줌 xAddEventListener(obj.thumbnail, "mousedown", function() { display_gallery_image(obj) }); @@ -63,45 +64,46 @@ function start_slide_gallery() { // 첫번째 이미지의 경우 큰 이미지 출력 시작 이미지 출력 display_gallery_image(slide_gallery_images[srl][0],true); + + // 로딩 텍스트 없앰 + xGetElementById("slide_gallery_loading_text_"+srl).style.display = "none"; } } // 메인 이미지 표시 function display_gallery_image(obj, is_first_display) { + // 처음으로 요청되는지에 대한 검사 + if(typeof(is_first_display)=="undefined") is_first_display = false; + + // 썸네일 영역 var zone_thumbnail = xGetElementById('zone_thumbnail_'+obj.srl); - if(typeof(is_first_display)=="undefined") is_first_display = false; + // 슬라이드 갤러리의 영역 var zone = xGetElementById('zone_slide_gallery_' + obj.srl ); - // 갤러리 외부 박스보다 이미지가 클 경우 resizing시킴 + // 슬라이드 갤러리 영역의 정확한 크기를 위해서 border값 검사 (border는 조절 가능하기에) var borderTop = parseInt(zone.style.borderTopWidth.replace(/px$/,''),10); var borderLeft = parseInt(zone.style.borderLeftWidth.replace(/px$/,''),10); var borderRight = parseInt(zone.style.borderRightWidth.replace(/px$/,''),10); var borderBottom = parseInt(zone.style.borderBottomWidth.replace(/px$/,''),10); + // 갤러리 영역의 가로 길이 구함 var zone_width = xWidth(zone)-borderLeft-borderRight; + // 이미지 크기가 갤러리 영역보다 클 경우를 계산하기 위한 비율 변수 설정 + var resize_scale = 1; + + // 이미지의 크기 구함 var image_width = obj.image.width; var image_height = obj.image.height; - var resize_scale = 1; - - // 이미지갤러리 쇼 박스보다 큰 이미지는 크기를 줄여서 출력 - if(image_width>(zone_width-30)) { - resize_scale = (zone_width-30)/image_width; + // 이미지갤러리 쇼 박스보다 큰 이미지는 크기를 줄여서 출력 (ersize_scale 조절) + if(image_width>(zone_width-20)) { + resize_scale = (zone_width-20)/image_width; image_width = parseInt(image_width*resize_scale,10); image_height = parseInt(image_height*resize_scale,10); } - var x = parseInt((zone_width - image_width)/2,10)-3; - - var new_zone_height = image_height+borderTop+borderTop+20; - if(new_zone_height<200) new_zone_height = 200; - xHeight(zone, new_zone_height+thumbnail_zone_height[obj.srl] ); - - var newMarginTop = (new_zone_height - image_height) /2 ; - - // 로딩 텍스트 없앰 - xGetElementById("slide_gallery_loading_text").style.display = "none"; + var x = parseInt((zone_width - image_width)/2,10); // 이미지 표시 var target_image = xGetElementById("slide_gallery_main_image_"+obj.srl); @@ -118,21 +120,25 @@ function display_gallery_image(obj, is_first_display) { target_image.style.margin = "0px;"; target_image.style.marginLeft = x+"px"; - target_image.style.marginTop = newMarginTop+"px"; - target_image.style.marginBottom = newMarginTop+"px"; + + if(image_height<150) { + target_image.style.marginTop = (150-image_height)+"px"; + target_image.style.marginBottom = (150-image_height)+"px"; + } else { + target_image.style.marginTop = "10px"; + target_image.style.marginBottom = "10px"; + } if(resize_scale!=1) { - xAddEventListener(target_image, 'dblclick', slide_gallery_winopen); + xAddEventListener(target_image, 'dblclick', showOriginalImage); } else { - xRemoveEventListener(target_image, 'dblclick', slide_gallery_winopen); + xRemoveEventListener(target_image, 'dblclick', showOriginalImage); } // resize_scale이 1이 아니면, 즉 리사이즈 되었다면 해당 이미지 클릭시 원본을 새창으로 띄워줌 var next_idx = obj.idx+1; if(slide_gallery_images[obj.srl].length<=next_idx) next_idx = 0; - //target_image.onclick = function() { display_gallery_image(slide_gallery_images[obj.srl][next_idx]); }; - target_image.style.cursor = 'pointer'; target_image.style.display = "block"; @@ -147,18 +153,37 @@ function display_gallery_image(obj, is_first_display) { slide_gallery_images[obj.srl][i].thumbnail.style.filter = "alpha(opacity=50)"; } } + + // 네이게이션 영역의 숫자 변경 + var zone_navigator = xGetElementById("zone_gallery_navigator_status_"+obj.srl); + var html = (obj.idx+1) + " / " + slide_gallery_images[obj.srl].length; + xInnerHtml(zone_navigator, html); } -// 큰 이미지의 경우 새창으로 띄워줌 -function slide_gallery_winopen(evt) { - var e = new xEvent(evt); - var obj = e.target; - var srl = obj.srl; - var idx = obj.idx; - - var image_width = slide_gallery_images[srl][idx].image.width + 40; - var image_height = slide_gallery_images[srl][idx].image.height + 40; - - winopen(slide_gallery_images[srl][idx].image.src, "SlideShow", "left=10,top=10,scrollbars=yes,resizable=yes,toolbars=no,width="+image_width+",height="+image_height); +// 이전 보기 +function gallery_view_prev(srl) { + var target_image = xGetElementById("slide_gallery_main_image_"+srl); + var idx = target_image.idx; + var max_length = slide_gallery_images[srl].length; + idx--; + if(idx<0) idx = max_length-1; + display_gallery_image(slide_gallery_images[srl][idx]); +} + +// 다음 보기 +function gallery_view_next(srl) { + var target_image = xGetElementById("slide_gallery_main_image_"+srl); + var idx = target_image.idx; + var max_length = slide_gallery_images[srl].length; + idx++; + if(idx>max_length-1) idx = 0; + display_gallery_image(slide_gallery_images[srl][idx]); +} + +// 썸네일 보기 +function gallery_view_thumbnail(srl) { + var thumbnail_zone = xGetElementById("zone_thumbnail_"+srl); + if(thumbnail_zone.style.display == "none") thumbnail_zone.style.display = "block"; + else thumbnail_zone.style.display = "none"; }