git-svn-id: http://xe-core.googlecode.com/svn/trunk@637 201d5d3c-b55e-5fd7-737f-ddc643e51545

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);
+}

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 = "썸네일 보기";
 ?>

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);
-}
-

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;

modules/editor/components/image_gallery/tpl/slide_gallery.html

@@ -1,5 +1,6 @@
 <!--%import("slide_gallery.js")-->
 <!--%import("slide_gallery.css")-->
+<!--%import("../lang")-->
 <script type='text/javascript'>
   // 이미지갤러리에 보여줄 이미지 등록
   <!--@foreach($gallery_info->image_list as $image)-->
@@ -11,7 +12,13 @@
 </script>
 
 <div id='zone_slide_gallery_{$gallery_info->srl}' style="width:{$gallery_info->width}px;background-color:#{$gallery_info->bg_color};border:{$gallery_info->border_thickness}px solid #{$gallery_info->border_color}">
-  <div id="slide_gallery_loading_text" class="slide_gallery_loading_text">loading images...</div>
+  <div id='zone_image_navigator_{$gallery_info->srl}' class="slide_gallery_navigator_box">
+    <a href="#" onclick="gallery_view_prev('{$gallery_info->srl}');return false;">[{$lang->cmd_gallery_prev}]</a>
+    <span class="zone_gallery_navigator_status" id="zone_gallery_navigator_status_{$gallery_info->srl}">1/1</span>
+    <a href="#" onclick="gallery_view_thumbnail('{$gallery_info->srl}');return false;">[{$lang->cmd_gallery_thumbnail}]</a>
+    <a href="#" onclick="gallery_view_next('{$gallery_info->srl}');return false;">[{$lang->cmd_gallery_next}]</a>
+  </div>
+  <div id='zone_thumbnail_{$gallery_info->srl}' class="slide_gallery_thumbnail_image_box" style="display:none"></div>
+  <div id="slide_gallery_loading_text_{$gallery_info->srl}" class="slide_gallery_loading_text">loading images...</div>
   <img id="slide_gallery_main_image_{$gallery_info->srl}" border="0" style="display:none" alt="slide_gallery" />
-  <div id='zone_thumbnail_{$gallery_info->srl}' class="slide_gallery_thumbnail_image_box"></div>
 </div>

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";
 }