fanbinit/rhymix
1
0
Fork 0
mirror of https://github.com/Lastorder-DC/rhymix.git synced 2026-01-07 10:41:40 +09:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source
This commit is contained in:
zero 2007-03-23 07:32:07 +00:00
parent e1de7f78a5
commit 1181714d52
7 changed files with 264 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

2
modules/editor/components/image_gallery/image_gallery.class.php
View file

@ -48,7 +48,7 @@
$gallery_info->border_color = $xml_obj->attrs->border_color;
$gallery_info->bg_color = $xml_obj->attrs->bg_color;
$body = trim($xml_obj->body);
$body = preg_replace("/\.(gif|jpg|jpeg|png)/",'.$1'."\n", trim($xml_obj->body));
$gallery_info->image_list = explode("\n",$body);
Context::set('gallery_info', $gallery_info);

10
modules/editor/components/image_gallery/tpl/list_gallery.html
View file

@ -1,17 +1,13 @@
<!--%import("list_gallery.js")-->
<!--%import("list_gallery.css")-->
<script type='text/javascript'>
// 이미지갤러리에 보여줄 이미지 등록
<!--@foreach($gallery_info->image_list as $image)-->
image_gallery_add_image({$gallery_info->srl},'{$image}','{$image}');
list_gallery_add_image({$gallery_info->srl},'{$image}');
<!--@end-->
// window.onLoad 이벤트 후에 이미지갤러리 시작
xAddEventListener(window,'load',start_image_gallery);
xAddEventListener(window,'load',start_list_gallery);
</script>
<div id='zone_image_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="image_gallery_loading_text" class="image_gallery_loading_text">loading images...</div>
<img id="image_gallery_main_image_{$gallery_info->srl}" border="0" style="display:none" alt="image_gallery" />
<div id='zone_list_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>
<div id='zone_thumbnail_{$gallery_info->srl}' class="image_gallery_thumbnail_image_box" style="width:{$gallery_info->width}px;"></div>

98
modules/editor/components/image_gallery/tpl/list_gallery.js Normal file
View file

@ -0,0 +1,98 @@
/**
* @file list_gallery.js
* @brief 이미지 이미지갤러리 쇼 스크립트
* @author zero (zero@nzeo.com)
**/
// 이미지갤러리쇼를 하기 위한 변수
var list_gallery_images = new Array();
// 이미지갤러리쇼 이미지 목록에 추가
function list_gallery_add_image(srl, image_url) {
if(!image_url) return;
// 객체 생성
var obj = {"srl":0, "image_url":null, "image":null}
// list_gallery_images에 이미지갤러리 쇼 고유번호에 해당하는 공간을 초기화
if(typeof(list_gallery_images[srl])=="undefined") list_gallery_images[srl] = new Array();
// 이미지갤러리쇼 고유번호를 세팅
obj.srl = srl;
obj.idx = list_gallery_images[srl].length;
// 원본 이미지를 미리 로딩
obj.image = new Image();
obj.image.src = image_url;
obj.image.srl = obj.srl;
obj.image.idx = obj.idx;
// 생성된 객체를 list_gallery_images[이미지갤러리쇼 고유번호]에 추가
list_gallery_images[srl][list_gallery_images[srl].length] = obj;
}
// 이미지갤러리쇼 시작
function start_list_gallery() {
// 등록된 모든 이미지 목록을 돌면서 목록을 만들어줌
for(var srl in list_gallery_images) {
// 등록된 이미지가 없으면 pass~
if(!list_gallery_images[srl].length) continue;
// 메인이미지가 나올 곳과 썸네일이 노출될 곳의 객체를 구함
var zone = xGetElementById('zone_list_gallery_'+srl);
// 갤러리 외부 박스보다 이미지가 클 경우 resizing시킴
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;
// 이미지 출력
for(var i=0; i<list_gallery_images[srl].length;i++) {
var obj = list_gallery_images[srl][i];
var image_width = obj.image.width;
var image_height = obj.image.height;
var resize_scale = 1;
// 이미지갤러리 쇼 박스보다 큰 이미지는 크기를 줄여서 출력
if(image_width>(zone_width-25)) {
resize_scale = (zone_width-25)/image_width;
image_width = parseInt(image_width*resize_scale,10);
image_height = parseInt(image_height*resize_scale,10);
}
obj.image.style.width = image_width+"px";
obj.image.style.height = image_height+"px";
obj.image.style.marginLeft = "10px";
obj.image.style.marginBottom = "10px";
obj.image.style.display = "block";
// resize_scale이 1이 아니면, 즉 리사이즈 되었다면 해당 이미지 클릭시 원본을 새창으로 띄워줌
if(resize_scale!=1) {
obj.image.style.cursor = 'pointer';
xAddEventListener(obj.image, 'mousedown', list_gallery_winopen);
}
zone.appendChild(obj.image);
}
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);
}

2
modules/editor/components/image_gallery/tpl/popup.js
View file

@ -83,7 +83,7 @@ function insertSlideShow() {
var images_list = "";
for(var i=0; i<list.length;i++) {
images_list += list[i]+"\n";
images_list += list[i].trim()+"\n";
}
if(selected_node) {

8
modules/editor/components/image_gallery/tpl/slide_gallery.css
View file

@ -1,4 +1,4 @@
.image_gallery_loading_text {
.slide_gallery_loading_text {
color:#555555;
font-size:8pt;
font-family:tahoma;
@ -7,17 +7,17 @@
text-align:center;
}
.image_gallery_main_image_box {
.slide_gallery_main_image_box {
border:3px solid #EEEEEE;
margin:10px;
}
.image_gallery_thumbnail_image_box {
.slide_gallery_thumbnail_image_box {
margin:10px;
text-align:center;
}
.image_gallery_thumbnail_image_box img {
.slide_gallery_thumbnail_image_box img {
border:1px solid #555555;
padding:1px;
margin:4px;

12
modules/editor/components/image_gallery/tpl/slide_gallery.html
View file

@ -3,15 +3,15 @@
<script type='text/javascript'>
// 이미지갤러리에 보여줄 이미지 등록
<!--@foreach($gallery_info->image_list as $image)-->
image_gallery_add_image({$gallery_info->srl},'{$image}','{$image}');
slide_gallery_add_image({$gallery_info->srl},'{$image}','{$image}');
<!--@end-->
// window.onLoad 이벤트 후에 이미지갤러리 시작
xAddEventListener(window,'load',start_image_gallery);
xAddEventListener(window,'load',start_slide_gallery);
</script>
<div id='zone_image_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="image_gallery_loading_text" class="image_gallery_loading_text">loading images...</div>
<img id="image_gallery_main_image_{$gallery_info->srl}" border="0" style="display:none" alt="image_gallery" />
<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>
<img id="slide_gallery_main_image_{$gallery_info->srl}" border="0" style="display:none" alt="slide_gallery" />
</div>
<div id='zone_thumbnail_{$gallery_info->srl}' class="image_gallery_thumbnail_image_box" style="width:{$gallery_info->width}px;"></div>
<div id='zone_thumbnail_{$gallery_info->srl}' class="slide_gallery_thumbnail_image_box" style="width:{$gallery_info->width}px;"></div>

151
modules/editor/components/image_gallery/tpl/slide_gallery.js Normal file
View file

@ -0,0 +1,151 @@
/**
* @file slide_gallery.js
* @brief 이미지 이미지갤러리 쇼 스크립트
* @author zero (zero@nzeo.com)
**/
// 이미지갤러리쇼를 하기 위한 변수
var slide_gallery_images = new Array();
// 이미지갤러리쇼 이미지 목록에 추가
function slide_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_gallery_images에 이미지갤러리 쇼 고유번호에 해당하는 공간을 초기화
if(typeof(slide_gallery_images[srl])=="undefined") slide_gallery_images[srl] = new Array();
// 이미지갤러리쇼 고유번호를 세팅
obj.srl = srl;
obj.idx = slide_gallery_images[srl].length;
// 썸네일 이미지를 미리 로딩
obj.thumbnail = new Image();
obj.thumbnail.src = thumbnail_url;
obj.thumbnail.style.cursor = "pointer";
obj.thumbnail.style.width = "60px";
obj.thumbnail.style.height = "60px";
obj.thumbnail.style.margin = "5px";
obj.thumbnail.style.opacity = 0.5;
obj.thumbnail.style.filter = "alpha(opacity=50)";
// 원본 이미지를 미리 로딩
obj.image = new Image();
obj.image.src = image_url;
// 썸네일 클릭시 메인 이미지로 바꾸어줌
xAddEventListener(obj.thumbnail, "mousedown", function() { display_gallery_image(obj) });
// 생성된 객체를 slide_gallery_images[이미지갤러리쇼 고유번호]에 추가
slide_gallery_images[srl][slide_gallery_images[srl].length] = obj;
}
// 이미지갤러리쇼 시작
function start_slide_gallery() {
// 등록된 모든 이미지 목록을 돌면서 thumbnail 목록을 만들어줌
for(var srl in slide_gallery_images) {
// 등록된 이미지가 없으면 pass~
if(!slide_gallery_images[srl].length) continue;
// 첫번째 이미지의 경우 큰 이미지 출력 시작 이미지 출력
display_gallery_image(slide_gallery_images[srl][0],true);
// 메인이미지가 나올 곳과 썸네일이 노출될 곳의 객체를 구함
var zone_thumbnail = xGetElementById('zone_thumbnail_'+srl);
// 썸네일 출력
for(var i=0; i<slide_gallery_images[srl].length;i++) {
zone_thumbnail.appendChild(slide_gallery_images[srl][i].thumbnail);
}
}
}
// 메인 이미지 표시
function display_gallery_image(obj, is_first_display) {
if(typeof(is_first_display)=="undefined") is_first_display = false;
var zone = xGetElementById('zone_slide_gallery_' + obj.srl );
// 갤러리 외부 박스보다 이미지가 클 경우 resizing시킴
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 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;
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;
xHeight(zone, image_height+borderTop+borderBottom+20);
// 로딩 텍스트 없앰
xGetElementById("slide_gallery_loading_text").style.display = "none";
// 이미지 표시
var target_image = xGetElementById("slide_gallery_main_image_"+obj.srl);
target_image.style.display = "none";
target_image.src = obj.image.src;
target_image.srl = obj.srl;
target_image.idx = obj.idx;
target_image.style.opacity = 1;
target_image.style.filter = "alpha(opacity=100)";
target_image.start_opacity = 0;
xWidth(target_image, image_width);
xHeight(target_image, image_height);
target_image.style.margin = "0px;";
target_image.style.marginLeft = x+"px";
target_image.style.marginTop = "10px";
target_image.style.display = "block";
// resize_scale이 1이 아니면, 즉 리사이즈 되었다면 해당 이미지 클릭시 원본을 새창으로 띄워줌
if(resize_scale!=1) {
target_image.style.cursor = 'pointer';
xAddEventListener(target_image, 'mousedown', slide_gallery_winopen);
} else {
target_image.style.cursor = 'default';
xRemoveEventListener(target_image, 'mousedown', slide_gallery_winopen);
}
// srl의 모든 썸네일의 투명도 조절
for(var i=0; i<slide_gallery_images[obj.srl].length;i++) {
if(i==obj.idx) {
slide_gallery_images[obj.srl][i].thumbnail.style.opacity = 1;
slide_gallery_images[obj.srl][i].thumbnail.style.filter = "alpha(opacity=100)";
} else {
slide_gallery_images[obj.srl][i].thumbnail.style.opacity = 0.5;
slide_gallery_images[obj.srl][i].thumbnail.style.filter = "alpha(opacity=50)";
}
}
}
// 큰 이미지의 경우 새창으로 띄워줌
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);
}