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

This commit is contained in:
zero 2007-03-23 05:29:47 +00:00
parent 98da6192f9
commit 84d239641c
8 changed files with 73 additions and 93 deletions

View file

@ -1,11 +1,11 @@
<?php
/**
* @class slide_show
* @class image_gallery
* @author zero (zero@nzeo.com)
* @brief 업로드된 이미지로 슬라이드 만듬
* @brief 업로드된 이미지로 이미지갤러리만듬
**/
class slide_show extends EditorHandler {
class image_gallery extends EditorHandler {
// upload_target_srl 는 에디터에서 필수로 달고 다녀야 함....
var $upload_target_srl = 0;
@ -14,7 +14,7 @@
/**
* @brief upload_target_srl과 컴포넌트의 경로를 받음
**/
function slide_show($upload_target_srl, $component_path) {
function image_gallery($upload_target_srl, $component_path) {
$this->upload_target_srl = $upload_target_srl;
$this->component_path = $component_path;
}
@ -51,13 +51,13 @@
$body = $xml_obj->body;
$image_list = explode("\n",$body);
Context::set("slide_show_width", $width);
Context::set("slide_show_height", $height);
Context::set("slide_show_images", $image_list);
Context::set("slide_show_srl", rand(111111,999999));
Context::set("image_gallery_width", $width);
Context::set("image_gallery_height", $height);
Context::set("image_gallery_images", $image_list);
Context::set("image_gallery_srl", rand(111111,999999));
$tpl_path = $this->component_path.'tpl';
$tpl_file = 'slide_show.html';
$tpl_file = 'image_gallery.html';
Context::set("tpl_path", $tpl_path);
require_once("./classes/template/TemplateHandler.class.php");
@ -67,23 +67,3 @@
}
?>

View file

@ -1,14 +1,14 @@
<?php
/**
* @file /modules/editor/components/slide_show/lang/ko.lang.php
* @file /modules/editor/components/image_gallery/lang/ko.lang.php
* @author zero <zero@nzeo.com>
* @brief 위지윅에디터(editor) 모듈 > 슬라이드쇼(slide_show) 컴포넌트의 언어팩
* @brief 위지윅에디터(editor) 모듈 > 이미지갤러리(image_gallery) 컴포넌트의 언어팩
**/
$lang->slide_show = "슬라이드쇼 제작";
$lang->image_gallery = "이미지 갤러리 제작";
$lang->width = "가로크기";
$lang->height = "세로크기";
$lang->image_list = "이미지 목록";
$lang->cmd_make_thumbnail = "썸네일 생성";
$lang->about_image_list = "슬라이드쇼에 추가할 파일을 선택하세요. 선택후 드래그 또는 shift+클릭(범위선택), ctrl+클릭(개별선택) 가능합니다";
$lang->about_image_list = "이미지 갤러리에 추가할 파일을 선택하세요. 선택후 드래그 또는 shift+클릭(범위선택), ctrl+클릭(개별선택) 가능합니다";
?>

View file

@ -1,4 +1,4 @@
.slide_loading_text {
.image_gallery_loading_text {
color:#555555;
font-size:8pt;
font-family:tahoma;
@ -7,19 +7,19 @@
text-align:center;
}
.slide_main_image_box {
.image_gallery_main_image_box {
border:3px solid #EEEEEE;
background-color:#FFFFFF;
margin:10px;
}
.slide_thumbnail_image_box {
.image_gallery_thumbnail_image_box {
background-color:#FFFFFF;
margin:10px;
text-align:center;
}
.slide_thumbnail_image_box img {
.image_gallery_thumbnail_image_box img {
border:1px solid #555555;
padding:1px;
margin:4px;

View file

@ -0,0 +1,18 @@
<!--%import("image_gallery.js")-->
<!--%import("image_gallery.css")-->
<script type='text/javascript'>
// 이미지갤러리에 보여줄 이미지 등록
<!--@foreach($image_gallery_images as $image)-->
image_gallery_add_image({$image_gallery_srl},'{$image}','{$image}');
<!--@end-->
// window.onLoad 이벤트 후에 이미지갤러리 시작
xAddEventListener(window,'load',start_image_gallery);
</script>
<div id='zone_image_gallery_{$image_gallery_srl}' style="width:{$image_gallery_width}px;height:{$image_gallery_height}px;" class="image_gallery_main_image_box">
<div id="image_gallery_loading_text" class="image_gallery_loading_text">loading images...</div>
<img id="image_gallery_main_image_{$image_gallery_srl}" border="0" style="display:none" alt="image_gallery" />
</div>
<div id='zone_thumbnail_{$image_gallery_srl}' class="image_gallery_thumbnail_image_box" style="width:{$image_gallery_width}px;"></div>

View file

@ -1,25 +1,25 @@
/**
* @file slide_show.js
* @brief 이미지 슬라이드 스크립트
* @file image_gallery.js
* @brief 이미지 이미지갤러리 스크립트
* @author zero (zero@nzeo.com)
**/
// 슬라이드쇼를 하기 위한 변수
var slide_show_images = new Array();
// 이미지갤러리쇼를 하기 위한 변수
var image_gallery_images = new Array();
// 슬라이드쇼 이미지 목록에 추가
function slide_show_add_image(srl, thumbnail_url, image_url) {
// 이미지갤러리쇼 이미지 목록에 추가
function image_gallery_add_image(srl, thumbnail_url, image_url) {
if(!thumbnail_url || !image_url) return;
// 객체 생성
var obj = {"srl":0, "thumbnail_url":null, "thumbnail":null, "image_url":null, "image":null}
// slide_show_images에 슬라이드 쇼 고유번호에 해당하는 공간을 초기화
if(typeof(slide_show_images[srl])=="undefined") slide_show_images[srl] = new Array();
// image_gallery_images에 이미지갤러리 쇼 고유번호에 해당하는 공간을 초기화
if(typeof(image_gallery_images[srl])=="undefined") image_gallery_images[srl] = new Array();
// 슬라이드쇼 고유번호를 세팅
// 이미지갤러리쇼 고유번호를 세팅
obj.srl = srl;
obj.idx = slide_show_images[srl].length;
obj.idx = image_gallery_images[srl].length;
// 썸네일 이미지를 미리 로딩
obj.thumbnail = new Image();
@ -36,38 +36,38 @@ function slide_show_add_image(srl, thumbnail_url, image_url) {
obj.image.src = image_url;
// 썸네일 클릭시 메인 이미지로 바꾸어줌
xAddEventListener(obj.thumbnail, "mousedown", function() { display_slide_image(obj) });
xAddEventListener(obj.thumbnail, "mousedown", function() { display_gallery_image(obj) });
// 생성된 객체를 slide_show_images[슬라이드쇼 고유번호]에 추가
slide_show_images[srl][slide_show_images[srl].length] = obj;
// 생성된 객체를 image_gallery_images[이미지갤러리쇼 고유번호]에 추가
image_gallery_images[srl][image_gallery_images[srl].length] = obj;
}
// 슬라이드쇼 시작
function start_slide_show() {
// 이미지갤러리쇼 시작
function start_image_gallery() {
// 등록된 모든 이미지 목록을 돌면서 thumbnail 목록을 만들어줌
for(var srl in slide_show_images) {
for(var srl in image_gallery_images) {
// 첫번째 이미지의 경우 큰 이미지 출력 시작 이미지 출력
display_slide_image(slide_show_images[srl][0]);
display_gallery_image(image_gallery_images[srl][0]);
// 등록된 이미지가 없으면 pass~
if(!slide_show_images[srl].length) continue;
if(!image_gallery_images[srl].length) continue;
// 메인이미지가 나올 곳과 썸네일이 노출될 곳의 객체를 구함
var zone_thumbnail = xGetElementById('zone_thumbnail_'+srl);
// 썸네일 출력
for(var i=0; i<slide_show_images[srl].length;i++) {
zone_thumbnail.appendChild(slide_show_images[srl][i].thumbnail);
for(var i=0; i<image_gallery_images[srl].length;i++) {
zone_thumbnail.appendChild(image_gallery_images[srl][i].thumbnail);
}
}
}
// 메인 이미지 표시
function display_slide_image(obj) {
var zone = xGetElementById('zone_slide_show_' + obj.srl );
function display_gallery_image(obj) {
var zone = xGetElementById('zone_image_gallery_' + obj.srl );
// 갤러리 외부 박스보다 이미지가 클 경우 resizing시킴
var zone_width = xWidth(zone);
@ -78,7 +78,7 @@ function display_slide_image(obj) {
var resize_scale = 1;
// 슬라이드 쇼 박스보다 큰 이미지는 크기를 줄여서 출력
// 이미지갤러리 쇼 박스보다 큰 이미지는 크기를 줄여서 출력
if(image_width>(zone_width-30)) {
resize_scale = (zone_width-30)/image_width;
image_width = parseInt(image_width*resize_scale,10);
@ -95,10 +95,10 @@ function display_slide_image(obj) {
var y = parseInt((zone_height - image_height)/2,10)-3;
// 로딩 텍스트 없앰
xGetElementById("slide_loading_text").style.display = "none";
xGetElementById("image_gallery_loading_text").style.display = "none";
// 이미지 표시
var target_image = xGetElementById("slide_main_image_"+obj.srl);
var target_image = xGetElementById("image_gallery_main_image_"+obj.srl);
target_image.style.display = "none";
target_image.src = obj.image.src;
@ -119,34 +119,34 @@ function display_slide_image(obj) {
// resize_scale이 1이 아니면, 즉 리사이즈 되었다면 해당 이미지 클릭시 원본을 새창으로 띄워줌
if(resize_scale!=1) {
target_image.style.cursor = 'pointer';
xAddEventListener(target_image, 'mousedown', slide_show_winopen);
xAddEventListener(target_image, 'mousedown', image_gallery_winopen);
} else {
target_image.style.cursor = 'default';
xRemoveEventListener(target_image, 'mousedown', slide_show_winopen);
xRemoveEventListener(target_image, 'mousedown', image_gallery_winopen);
}
// srl의 모든 썸네일의 투명도 조절
for(var i=0; i<slide_show_images[obj.srl].length;i++) {
for(var i=0; i<image_gallery_images[obj.srl].length;i++) {
if(i==obj.idx) {
slide_show_images[obj.srl][i].thumbnail.style.opacity = 1;
slide_show_images[obj.srl][i].thumbnail.style.filter = "alpha(opacity=100)";
image_gallery_images[obj.srl][i].thumbnail.style.opacity = 1;
image_gallery_images[obj.srl][i].thumbnail.style.filter = "alpha(opacity=100)";
} else {
slide_show_images[obj.srl][i].thumbnail.style.opacity = 0.5;
slide_show_images[obj.srl][i].thumbnail.style.filter = "alpha(opacity=50)";
image_gallery_images[obj.srl][i].thumbnail.style.opacity = 0.5;
image_gallery_images[obj.srl][i].thumbnail.style.filter = "alpha(opacity=50)";
}
}
}
// 큰 이미지의 경우 새창으로 띄워줌
function slide_show_winopen(evt) {
function image_gallery_winopen(evt) {
var e = new xEvent(evt);
var obj = e.target;
var srl = obj.srl;
var idx = obj.idx;
var image_width = slide_show_images[srl][idx].image.width + 20;
var image_height = slide_show_images[srl][idx].image.height + 20;
var image_width = image_gallery_images[srl][idx].image.width + 20;
var image_height = image_gallery_images[srl][idx].image.height + 20;
winopen(slide_show_images[srl][idx].image.src, "SlideShow", "left=10,top=10,scrollbars=auto,resizable=yes,toolbars=no,width="+image_width+",height="+image_height);
winopen(image_gallery_images[srl][idx].image.src, "SlideShow", "left=10,top=10,scrollbars=auto,resizable=yes,toolbars=no,width="+image_width+",height="+image_height);
}

View file

@ -6,7 +6,7 @@
<input type="hidden" name="upload_target_srl" value="{$upload_target_srl}" />
<div class="editor_window">
<div class="editor_title">{$lang->slide_show}</div>
<div class="editor_title">{$lang->image_gallery}</div>
<div class="header">{$lang->width}</div>
<div class="body"><input type="text" class="editor_input" id="width" value="600" />px</div>

View file

@ -81,7 +81,7 @@ function insertSlideShow() {
selected_node.style.height = height+"px";
xInnerHtml(selected_node, images_list);
} else {
var text = "<div editor_component=\"slide_show\" class=\"editor_component_output\" make_thumbnail=\""+make_thumbnail+"\" width=\""+width+"\" height=\""+height+"\" style=\"width:"+width+"px;height:"+height+"px;\" >"+images_list+"</div>";
var text = "<div editor_component=\"image_gallery\" class=\"editor_component_output\" make_thumbnail=\""+make_thumbnail+"\" width=\""+width+"\" height=\""+height+"\" style=\"width:"+width+"px;height:"+height+"px;\" >"+images_list+"</div>";
opener.editorFocus(opener.editorPrevSrl);
var iframe_obj = opener.editorGetIFrame(opener.editorPrevSrl)
opener.editorReplaceHTML(iframe_obj, text);

View file

@ -1,18 +0,0 @@
<!--%import("slide_show.js")-->
<!--%import("slide_show.css")-->
<script type='text/javascript'>
// 슬라이드쇼에 보여줄 이미지 등록
<!--@foreach($slide_show_images as $image)-->
slide_show_add_image({$slide_show_srl},'{$image}','{$image}');
<!--@end-->
// window.onLoad 이벤트 후에 슬라이드 쇼 시작
xAddEventListener(window,'load',start_slide_show);
</script>
<div id='zone_slide_show_{$slide_show_srl}' style="width:{$slide_show_width}px;height:{$slide_show_height}px;" class="slide_main_image_box">
<div id="slide_loading_text" class="slide_loading_text">loading images...</div>
<img id="slide_main_image_{$slide_show_srl}" border="0" style="display:none" alt="slide" />
</div>
<div id='zone_thumbnail_{$slide_show_srl}' class="slide_thumbnail_image_box" style="width:{$slide_show_width}px;"></div>