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

issue 44 : Refactoring the 'image gallery' component

Browse source 
git-svn-id: http://xe-core.googlecode.com/svn/branches/1.5.0@8509 201d5d3c-b55e-5fd7-737f-ddc643e51545
This commit is contained in:
taggon 2011-06-20 02:44:44 +00:00
parent 467e6fc227
commit 6683636782
14 changed files with 328 additions and 303 deletions
Download patch file Download diff file Expand all files Collapse all files

6
modules/editor/components/image_gallery/info.xml
View file

@ -1,10 +1,10 @@
<?xml version="1.0" encoding="UTF-8"?>
<component version="0.2">
<title xml:lang="vi">Slide Show</title>
<title xml:lang="ko">기본 이미지 갤러리</title>
<title xml:lang="ko">이미지 갤러리</title>
<title xml:lang="jp">デフォルトイメージギャラリー</title>
<title xml:lang="zh-CN">图片相册</title>
<title xml:lang="en">Basic Image Gallery</title>
<title xml:lang="en">Image Gallery</title>
<title xml:lang="es">Galería de imágenes básicos</title>
<title xml:lang="ru">Базовая галлерея изображений</title>
<title xml:lang="zh-TW">預設圖片相簿</title>
@ -18,7 +18,7 @@
<description xml:lang="ru">Это может создать гллерею изображений в стиле слайдов/списка, используя вложенный файл изображения.</description>
<description xml:lang="zh-TW">將上傳的圖片以投影片或列表的形式實現。</description>
<description xml:lang="tr">Ekteki resim dosyasını kullanarak, slayt/liste tarzı resim galerisi oluşturabilir.</description>
<version>0.1</version>
<version>0.2</version>
<date>2007-02-28</date>
<author email_address="developers@xpressengine.com" link="http://xpressengine.com/">

64
modules/editor/components/image_gallery/tpl/gallery.js Normal file
View file

@ -0,0 +1,64 @@
/**
* Gallery App
*/
(function($){
var g = xe.createApp('Gallery', {
_imgs : {},
_styles : {},
init : function() {
this._imgs = {};
},
API_ADD_IMAGE : function(sender, params) {
var srl = params[0], path = params[1], key = '@'+srl;
if(/^files/.test(path)) path = request_uri + path;
if(!is_def(this._imgs[key])) this._imgs[key] = [];
this._imgs[key].push({path:path,loaded:false});
},
API_ONREADY : function(sender, params) {
var i, c, key, img, imgs = this._imgs;
// image cache
for(key in imgs) {
if(!imgs.hasOwnProperty(key)) continue;
for(i=0,c=imgs[key].length; i < c; i++) {
img = imgs[key][i];
img.$obj = $('<img />').attr('src', img.path);
img.$obj.load({img:img}, function(event){
var im = event.data.img;
im.loaded = true;
im.$obj.unbind('load');
});
}
}
},
API_GET_IMAGES : function(sender, params) {
var srl = params[0];
return this._imgs['@'+srl] || [];
},
API_SET_STYLE : function(sender, params) {
var srl = params[0], sty = params[1];
this._styles['@'+srl] = sty;
},
API_ONLOAD : function() {
var key, sty;
for(key in this._imgs) {
if(!this._imgs.hasOwnProperty(key)) continue;
sty = this._styles[key] || 'list';
this.cast('SHOW_'+sty.toUpperCase(), [key.substr(1)]);
}
}
});
xe.registerApp(new g);
})(jQuery);

5
modules/editor/components/image_gallery/tpl/gallery.min.js vendored Normal file
View file

@ -0,0 +1,5 @@
/**
* Gallery App
*/
(function(f){var g=xe.createApp("Gallery",{_imgs:{},_styles:{},init:function(){this._imgs={}},API_ADD_IMAGE:function(b,a){var c=a[1],d="@"+a[0];/^files/.test(c)&&(c=request_uri+c);is_def(this._imgs[d])||(this._imgs[d]=[]);this._imgs[d].push({path:c,loaded:!1})},API_ONREADY:function(){var b,a,c,d,e=this._imgs;for(c in e)if(e.hasOwnProperty(c)){b=0;for(a=e[c].length;b<a;b++)d=e[c][b],d.$obj=f("<img />").attr("src",d.path),d.$obj.load({img:d},function(a){a=a.data.img;a.loaded=!0;a.$obj.unbind("load")})}},
API_GET_IMAGES:function(b,a){return this._imgs["@"+a[0]]||[]},API_SET_STYLE:function(b,a){this._styles["@"+a[0]]=a[1]},API_ONLOAD:function(){var b,a;for(b in this._imgs)this._imgs.hasOwnProperty(b)&&(a=this._styles[b]||"list",this.cast("SHOW_"+a.toUpperCase(),[b.substr(1)]))}});xe.registerApp(new g)})(jQuery);

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

@ -1,14 +1,25 @@
<!--%import("list_gallery.js")-->
<script type='text/javascript'>
// 이미지갤러리에 보여줄 이미지 등록
<!--@foreach($gallery_info->images_list as $image)-->
list_gallery_add_image({$gallery_info->srl},'{$image}');
<!--@end-->
<!--@if(__DEBUG__)-->
<load target="gallery.js" />
<load target="list_gallery.js" />
<!--@else-->
<load target="gallery.min.js" />
<load target="list_gallery.min.js" />
<!--@end-->
<script type="text/javascript">
(function(){
// window.onLoad 이벤트 후에 이미지갤러리 시작
xAddEventListener(window,'load',start_list_gallery);
var gallery = xe.getApp('gallery')[0];
// Add images
<!--@foreach($gallery_info->images_list as $img)-->
gallery.cast('ADD_IMAGE', [{$gallery_info->srl}, '{$img}']);
<!--@end-->
gallery.cast('SET_STYLE', [{$gallery_info->srl}, 'list']);
})();
</script>
<div align="{$gallery_info->gallery_align}">
<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};text-align:left;"></div>
<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};text-align:left;"><p style="text-align:center">Loading images...</p></div>
</div>

93
modules/editor/components/image_gallery/tpl/list_gallery.js
View file

@ -1,82 +1,43 @@
/**
* @file list_gallery.js
* @brief 이미지 이미지갤러리 쇼 스크립트
* @brief List-type image gallery
* @author NHN (developers@xpressengine.com)
**/
// 이미지갤러리쇼를 하기 위한 변수
var list_gallery_images = new Array();
(function($){
// 이미지갤러리쇼 이미지 목록에 추가
function list_gallery_add_image(srl, image_url) {
if(!image_url) return;
if(image_url.indexOf('files')==0) image_url = request_uri+image_url;
var listShow = xe.createPlugin('list', {
API_SHOW_LIST : function(sender, params) {
var srl = params[0], imgs, $zone, i, c, im, scale, w1, w2, h1, h2;
// 객체 생성
var obj = {"srl":0, "image_url":null, "image":null}
imgs = this.cast('GET_IMAGES', [srl]);
// list_gallery_images에 이미지갤러리 쇼 고유번호에 해당하는 공간을 초기화
if(typeof(list_gallery_images[srl])=="undefined") list_gallery_images[srl] = new Array();
if(!imgs.length) return;
// 이미지갤러리쇼 고유번호를 세팅
obj.srl = srl;
obj.idx = list_gallery_images[srl].length;
$zone = $('#zone_list_gallery_'+srl).empty();
width = $zone.innerWidth();
// 원본 이미지를 미리 로딩
obj.image = new Image();
obj.image.src = image_url;
obj.image.srl = obj.srl;
obj.image.idx = obj.idx;
for(i=0,c=imgs.length; i < c; i++) {
im = imgs[i];
w1 = im.$obj.prop('width');
h1 = im.$obj.prop('height');
// 생성된 객체를 list_gallery_images[이미지갤러리쇼 고유번호]에 추가
list_gallery_images[srl][list_gallery_images[srl].length] = obj;
}
if(w1 > width - 25) {
w2 = width - 25;
scale = w2 / w1;
h2 = Math.floor(h1 * scale);
// 이미지갤러리쇼 시작
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);
w1 = w2; h1 = h2;
im.$obj.attr('rel', 'xe_gallery');
}
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_image 애드온의 slideshow() 기능 사용
if(resize_scale != 1) obj.image.rel = 'xe_gallery';
zone.appendChild(obj.image);
$zone.append(im.$obj);
im.$obj.css({width:w1+'px', height:h1, margin:'0 10px', display:'block'});
}
zone.style.paddingTop = "10px";
}
}
});
var gallery = xe.getApp('Gallery')[0];
if(gallery) gallery.registerPlugin(new listShow);
})(jQuery);

6
modules/editor/components/image_gallery/tpl/list_gallery.min.js vendored Normal file
View file

@ -0,0 +1,6 @@
/**
* @file list_gallery.js
* @brief List-type image gallery
* @author NHN (developers@xpressengine.com)
**/
(function(k){var h=xe.createPlugin("list",{API_SHOW_LIST:function(i,h){var c=h[0],d,e,j,b,a,g,f;d=this.cast("GET_IMAGES",[c]);if(d.length){c=k("#zone_list_gallery_"+c).empty();width=c.innerWidth();e=0;for(j=d.length;e<j;e++)b=d[e],a=b.$obj.prop("width"),f=b.$obj.prop("height"),a>width-25&&(g=width-25,a=g/a,f=Math.floor(f*a),a=g,b.$obj.attr("rel","xe_gallery")),c.append(b.$obj),b.$obj.css({width:a+"px",height:f,margin:"0 10px",display:"block"})}}}),i=xe.getApp("Gallery")[0];i&&i.registerPlugin(new h)})(jQuery);

2
modules/editor/components/image_gallery/tpl/minify.ini Normal file
View file

@ -0,0 +1,2 @@
[option]
use_closure_compiler=true

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

@ -1,50 +1,45 @@
var selected_node = null;
function getSlideShow() {
var node, $node, selected_images = '', width, style, align, border_color, bg_color, thickness;
// 부모창이 있는지 체크
if(typeof(opener)=="undefined") return;
// 부모 위지윅 에디터에서 선택된 영역이 있으면 처리
var node = opener.editorPrevNode;
var selected_images = "";
if(node && node.nodeName == "IMG") {
node = opener.editorPrevNode;
$node = jQuery(node);
if($node.is('img')) {
selected_node = node;
var width = xWidth(selected_node)-4;
var gallery_style = selected_node.getAttribute("gallery_style");
var gallery_align = selected_node.getAttribute("gallery_align");
var border_color = selected_node.getAttribute("border_color");
var bg_color = selected_node.getAttribute("bg_color");
var border_thickness = selected_node.getAttribute("border_thickness");
if(!border_thickness) border_thickness = 1;
width = $(node).width() - 4;
style = $node.attr('gallery_style');
align = $node.attr('gallery_align') || 'center';
border_color = $node.attr('border_color');
bg_color = $node.attr('bg_color');
thickness = $node.attr('border_thickness') || 1;
xGetElementById("width").value = width;
get_by_id('width').value = width;
get_by_id('gallery_style').selectedIndex = (style=='list')?1:0;
get_by_id('gallery_align').selectedIndex = (align=='left')?1:(align=='right')?2:0;
get_by_id('border_thickness').value = thickness;
if(gallery_style=="list") xGetElementById("gallery_style").selectedIndex = 1;
else xGetElementById("gallery_style").selectedIndex = 0;
get_by_id('border_color_input').value = border_color;
manual_select_color('border', get_by_id('border_color_input'));
if(!gallery_align || gallery_align=="center") xGetElementById("gallery_align").selectedIndex = 0;
else if(gallery_align=="left") xGetElementById("gallery_align").selectedIndex = 1;
else if(gallery_align=="right") xGetElementById("gallery_align").selectedIndex = 2;
get_by_id('bg_color_input').value = bg_color;
manual_select_color("bg", get_by_id('bg_color_input'));
xGetElementById("border_thickness").value = border_thickness;
xGetElementById("border_color_input").value = border_color;
manual_select_color("border", xGetElementById("border_color_input"));
xGetElementById("bg_color_input").value = bg_color;
manual_select_color("bg", xGetElementById("bg_color_input"));
selected_images = selected_node.getAttribute("images_list");
selected_images = $node.attr('images_list');
}
// 부모창의 업로드된 파일중 이미지 목록을 모두 가져와서 세팅
var fo = xGetElementById("fo");
var fo = get_by_id("fo");
var editor_sequence = fo.editor_sequence.value;
var parent_list_obj = opener.xGetElementById("uploaded_file_list_"+editor_sequence);
var parent_list_obj = opener.get_by_id("uploaded_file_list_"+editor_sequence);
if(parent_list_obj) {
var list_obj = xGetElementById("image_list");
var list_obj = get_by_id("image_list");
for(var i=0;i<parent_list_obj.length;i++) {
var opt = parent_list_obj.options[i];
@ -67,7 +62,7 @@ function insertSlideShow() {
if(typeof(opener)=="undefined") return;
var list = new Array();
var list_obj = xGetElementById("image_list");
var list_obj = get_by_id("image_list");
for(var i=0;i<list_obj.length;i++) {
var opt = list_obj.options[i];
if(opt.selected) {
@ -83,13 +78,13 @@ function insertSlideShow() {
return;
}
var width = xGetElementById("width").value;
var width = get_by_id("width").value;
var gallery_style = xGetElementById("gallery_style").options[xGetElementById("gallery_style").selectedIndex].value;
var gallery_align = xGetElementById("gallery_align").options[xGetElementById("gallery_align").selectedIndex].value;
var border_thickness = xGetElementById("border_thickness").value;
var border_color = xGetElementById("border_color_input").value;
var bg_color = xGetElementById("bg_color_input").value;
var gallery_style = get_by_id("gallery_style").options[get_by_id("gallery_style").selectedIndex].value;
var gallery_align = get_by_id("gallery_align").options[get_by_id("gallery_align").selectedIndex].value;
var border_thickness = get_by_id("border_thickness").value;
var border_color = get_by_id("border_color_input").value;
var bg_color = get_by_id("bg_color_input").value;
var images_list = "";
for(var i=0; i<list.length;i++) {
@ -119,15 +114,15 @@ function insertSlideShow() {
/* 색상 클릭시 */
function select_color(type, code) {
xGetElementById(type+"_preview_color").style.backgroundColor = "#"+code;
xGetElementById(type+"_color_input").value = code;
get_by_id(type+"_preview_color").style.backgroundColor = "#"+code;
get_by_id(type+"_color_input").value = code;
}
/* 수동 색상 변경시 */
function manual_select_color(type, obj) {
if(obj.value.length!=6) return;
code = obj.value;
xGetElementById(type+"_preview_color").style.backgroundColor = "#"+code;
get_by_id(type+"_preview_color").style.backgroundColor = "#"+code;
}
/* 색상표를 출력 */
@ -160,4 +155,6 @@ function printColorBlock(type, code, blank_img_src) {
}
}
xAddEventListener(window, "load", getSlideShow);
jQuery(function($){
getSlideShow();
});

6
modules/editor/components/image_gallery/tpl/popup.min.css vendored Normal file
View file

@ -0,0 +1,6 @@
/**
* @file slide_gallery.js
* @brief Slideshow type image gallery plugin
* @author NHN (developers@xpressengine.com)
**/
@charset "utf-8";@import "../../../../../modules/admin/tpl/css/admin.css";li{float:left;list-style:none;margin-right:5px}img.bg_preview_color{width:30px;height:16px;border:1px solid #000000;background-color:#FFFFFF}img.border_preview_color{width:30px;height:16px;border:1px solid #EEEEEE;background-color:#000000}img.color_icon{width:14px;height:14px;border:1px solid #FFFFFF}img.color_icon_over{width:14px;height:14px;border:1px solid #000000;cursor:pointer}.editor_color_box{clear:both;height:65px;width:400px;border:1px solid #DDDDDD;padding:2px}.image_list{width:100%;border:1px solid #EEEEEE;height:200px !important}

10
modules/editor/components/image_gallery/tpl/popup.min.js vendored Normal file
View file

@ -0,0 +1,10 @@
var selected_node=null;
function getSlideShow(){var c,b,d="",e,a,f,g;if(typeof opener!="undefined"){c=opener.editorPrevNode;b=jQuery(c);if(b.is("img"))selected_node=c,d=$(c).width()-4,c=b.attr("gallery_style"),e=b.attr("gallery_align")||"center",a=b.attr("border_color"),f=b.attr("bg_color"),g=b.attr("border_thickness")||1,get_by_id("width").value=d,get_by_id("gallery_style").selectedIndex=c=="list"?1:0,get_by_id("gallery_align").selectedIndex=e=="left"?1:e=="right"?2:0,get_by_id("border_thickness").value=g,get_by_id("border_color_input").value=
a,manual_select_color("border",get_by_id("border_color_input")),get_by_id("bg_color_input").value=f,manual_select_color("bg",get_by_id("bg_color_input")),d=b.attr("images_list");b=get_by_id("fo").editor_sequence.value;if(b=opener.get_by_id("uploaded_file_list_"+b)){c=get_by_id("image_list");for(e=0;e<b.length;e++){a=b.options[e];f=a.value;if(!f)break;f=opener.uploadedFiles[f].download_url.replace(request_uri,"");/(jpg|jpeg|gif|png)$/i.test(f)&&(g=!1,d.indexOf(f)!=-1&&(g=!0),a=new Option(a.text,a.value,
!1,g),c.options.add(a))}}}}
function insertSlideShow(){if(typeof opener!="undefined"){for(var c=[],b=get_by_id("image_list"),d=0;d<b.length;d++){var e=b.options[d];e.selected&&(e=opener.uploadedFiles[e.value].download_url.replace(request_uri,""),c[c.length]=e)}if(c.length){for(var b=get_by_id("width").value,e=get_by_id("gallery_style").options[get_by_id("gallery_style").selectedIndex].value,a=get_by_id("gallery_align").options[get_by_id("gallery_align").selectedIndex].value,f=get_by_id("border_thickness").value,g=get_by_id("border_color_input").value,
i=get_by_id("bg_color_input").value,h="",d=0;d<c.length;d++)h+=c[d].trim()+" ";selected_node?(selected_node.setAttribute("width",b),selected_node.setAttribute("gallery_style",e),selected_node.setAttribute("align",a),selected_node.setAttribute("gallery_align",a),selected_node.setAttribute("border_thickness",f),selected_node.setAttribute("border_color",g),selected_node.setAttribute("bg_color",i),selected_node.setAttribute("images_list",h),selected_node.style.width=b+"px"):(c='<img src="../../../../common/tpl/images/blank.gif" editor_component="image_gallery" width="'+
b+'" gallery_style="'+e+'" align="'+a+'" gallery_align="'+a+'" border_thickness="'+f+'" border_color="'+g+'" bg_color="'+i+'" style="width:'+b+'px;border:2px dotted #4371B9;background:url(./modules/editor/components/image_gallery/tpl/image_gallery_component.gif) no-repeat center;" images_list="'+h+'" />',opener.editorFocus(opener.editorPrevSrl),d=opener.editorGetIFrame(opener.editorPrevSrl),opener.editorReplaceHTML(d,c));opener.editorFocus(opener.editorPrevSrl)}window.close()}}
function select_color(c,b){get_by_id(c+"_preview_color").style.backgroundColor="#"+b;get_by_id(c+"_color_input").value=b}function manual_select_color(c,b){if(b.value.length==6)code=b.value,get_by_id(c+"_preview_color").style.backgroundColor="#"+code}
function printColor(c,b){for(var d=["22","44","66","88","AA","CC","EE"],e="",a=0;a<8;a+=1)e+=printColorBlock(c,a.toString(16)+a.toString(16)+a.toString(16)+a.toString(16)+a.toString(16)+a.toString(16),b);for(a=0;a<d.length;a+=3)for(var f=0;f<d.length;f+=2)for(var g=0;g<d.length;g++)e+=printColorBlock(c,d[a]+d[f]+d[g],b);for(a=8;a<16;a+=1)e+=printColorBlock(c,a.toString(16)+a.toString(16)+a.toString(16)+a.toString(16)+a.toString(16)+a.toString(16),b);document.write(e)}
function printColorBlock(c,b,d){return'<div style="float:left;background-color:#'+b+'"><img src="'+d+'" class="color_icon" onmouseover="this.className=\'color_icon_over\'" onmouseout="this.className=\'color_icon\'" onclick="select_color(\''+c+"','"+b+'\')" alt="color" /></div>'}jQuery(function(){getSlideShow()});

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

@ -1,26 +1,39 @@
<!--%import("slide_gallery.js")-->
<!--%import("slide_gallery.css")-->
<!--%import("../lang")-->
<script type='text/javascript'>
// 이미지갤러리에 보여줄 이미지 등록
<!--@foreach($gallery_info->images_list as $image)-->
slide_gallery_add_image({$gallery_info->srl},'{$image}');
<!--@end-->
<!--@if(__DEBUG__)-->
<load target="gallery.js" />
<load target="slide_gallery.js" />
<load target="slide_gallery.css" />
<!--@else-->
<load target="gallery.min.js" />
<load target="slide_gallery.min.js" />
<load target="slide_gallery.min.css" />
<!--@end-->
<script type="text/javascript">
(function(){
// window.onLoad 이벤트 후에 이미지갤러리 시작
xAddEventListener(window,'load',start_slide_gallery);
var gallery = xe.getApp('gallery')[0];
// Add images
<!--@foreach($gallery_info->images_list as $img)-->
gallery.cast('ADD_IMAGE', [{$gallery_info->srl}, '{$img}']);
<!--@end-->
gallery.cast('SET_STYLE', [{$gallery_info->srl}, 'slide']);
})();
</script>
<div align="{$gallery_info->gallery_align}">
<div id='zone_image_navigator_{$gallery_info->srl}' class="slide_gallery_navigator_box">
<a href="#" onclick="gallery_view_prev('{$gallery_info->srl}');return false;"><img src="./images/prev.gif" alt="{$lang->cmd_gallery_prev}" title="{$lang->cmd_gallery_prev}" border="0" /></a>
<span class="zone_gallery_navigator_status" title="{$lang->cmd_gallery_thumbnail}" id="zone_gallery_navigator_status_{$gallery_info->srl}" onclick="gallery_view_thumbnail('{$gallery_info->srl}');return false;">1/1</span>
<a href="#" onclick="gallery_view_next('{$gallery_info->srl}');return false;"><img src="./images/next.gif" alt="{$lang->cmd_gallery_next}" title="{$lang->cmd_gallery_next}" border="0" /></a>
<div id="zone_slide_gallery_{$gallery_info->srl}" align="{$gallery_info->gallery_align}">
<div class="slide_gallery_navigator_box">
<a href="#" class="__prev"><img src="./images/prev.gif" alt="{$lang->cmd_gallery_prev}" title="{$lang->cmd_gallery_prev}" border="0" /></a>
<span class="zone_gallery_navigator_status" title="{$lang->cmd_gallery_thumbnail}" id="zone_gallery_navigator_status_{$gallery_info->srl}">1/1</span>
<a href="#" class="__next"><img src="./images/next.gif" alt="{$lang->cmd_gallery_next}" title="{$lang->cmd_gallery_next}" border="0" /></a>
</div>
<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};text-align:left;">
<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" src="./images/blank.gif" />
<div style="width:{$gallery_info->width}px;background-color:#{$gallery_info->bg_color};border:{$gallery_info->border_thickness}px solid #{$gallery_info->border_color};text-align:left;">
<div class="slide_gallery_thumbnail_image_box" style="display:none"></div>
<div class="slide_gallery_loading_text">Loading images...</div>
<div class="slide_gallery_placeholder"></div>
<img border="0" style="display:none" alt="slide_gallery" src="./images/blank.gif" />
</div>
<div id='zone_gallery_image_filename_{$gallery_info->srl}' class="slide_gallery_filename"></div>
<div class="slide_gallery_filename"></div>
</div>

289
modules/editor/components/image_gallery/tpl/slide_gallery.js
View file

@ -1,196 +1,131 @@
/**
* @file slide_gallery.js
* @brief 이미지 이미지갤러리 쇼 스크립트
* @brief Slideshow type image gallery plugin
* @author NHN (developers@xpressengine.com)
**/
// 이미지갤러리쇼를 하기 위한 변수
var slide_gallery_images = new Array();
var thumbnail_zone_height = new Array();
(function($){
// 이미지갤러리쇼 이미지 목록에 추가
function slide_gallery_add_image(srl, image_url) {
if(!image_url) return;
if(image_url.indexOf('files')==0) image_url = request_uri+image_url;
var slideShow = xe.createPlugin('slideShow', {
_holders : {},
_thumbs : {},
_current : {},
// 객체 생성
var obj = {"srl":0, "thumbnail_url":null, "thumbnail":null, "image_url":null, "image":null}
init : function() {
this._holders = {};
this._thumbs = {};
this._current = {};
},
// slide_gallery_images에 이미지갤러리 쇼 고유번호에 해당하는 공간을 초기화
if(typeof(slide_gallery_images[srl])=="undefined") slide_gallery_images[srl] = new Array();
API_SHOW_SLIDE : function(sender, params) {
var self=this, srl = params[0], key = '@'+srl, imgs, $zone, $thumb, $holder, i, c;
// 이미지갤러리쇼 고유번호를 세팅
obj.srl = srl;
obj.idx = slide_gallery_images[srl].length;
obj.image_url = image_url;
imgs = this.cast('GET_IMAGES', [srl]);
if(!imgs.length) return;
// 원본 이미지를 미리 로딩
obj.image = new Image();
obj.image.src = image_url;
//if(!obj.image.width) return;
$zone = $('#zone_slide_gallery_'+srl);
$holder = $zone.find('.slide_gallery_placeholder').css('overflow', 'hidden');
// 섬네일 이미지를 미리 로딩
obj.thumbnail = new Image();
obj.thumbnail.src = image_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)";
// remove loading message
$zone.find('.slide_gallery_loading_text').remove();
// 섬네일 클릭시 메인 이미지로 바꾸어줌
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;
// 메인이미지가 나올 곳과 섬네일이 노출될 곳의 객체를 구함
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);
}
thumbnail_zone_height[srl] = xHeight(zone_thumbnail)+20;
// 첫번째 이미지의 경우 큰 이미지 출력 시작 이미지 출력
display_gallery_image(slide_gallery_images[srl][0],true);
// 로딩 텍스트 없앰
xGetElementById("slide_gallery_loading_text_"+srl).style.display = "none";
xGetElementById("slide_gallery_main_image_"+srl).style.display = "block";
}
}
// 메인 이미지 표시
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);
// 슬라이드 갤러리의 영역
var zone = xGetElementById('zone_slide_gallery_' + obj.srl );
// 슬라이드 갤러리 영역의 정확한 크기를 위해서 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;
// 이미지갤러리 쇼 박스보다 큰 이미지는 크기를 줄여서 출력 (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);
// 이미지 표시
var target_image = xGetElementById("slide_gallery_main_image_"+obj.srl);
target_image.style.marginLeft = x+"px";
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.src = obj.image.src;
if(image_height<200) {
target_image.style.marginTop = (100-image_height/2)+"px";
target_image.style.marginBottom = (100-image_height/2)+"px";
} else {
target_image.style.marginTop = "10px";
target_image.style.marginBottom = "10px";
// create thumbnails
$thumb = $zone.find('.slide_gallery_thumbnail_image_box').show();
for(i=0,c=imgs.length; i < c; i++) {
imgs[i].$obj.clone()
.css({
cursor : 'pointer',
width : '60px',
height : '60px',
margin : '5px',
opacity : 0.5
})
.click({idx:i}, function(event){
self.cast('SET_SLIDE', [srl, event.data.idx]);
})
.appendTo($thumb);
}
if(typeof(showOriginalImage)=='function') {
if(resize_scale!=1) {
xAddEventListener(target_image, 'click', showOriginalImage);
target_image.style.cursor = 'pointer';
} else {
xRemoveEventListener(target_image, 'click', showOriginalImage);
target_image.style.cursor = 'default';
}
$('#zone_gallery_navigator_status_'+srl).click(function(){ $thumb.toggle() });
// navigation
$zone
.find('.__prev')
.click(function(){ self.cast('PREV_SLIDE', [srl]); return false; })
.end()
.find('.__next')
.click(function(){ self.cast('NEXT_SLIDE', [srl]); return false; })
this._holders[key] = $holder;
this._thumbs[key] = $thumb;
this._current[key] = 0;
this.cast('SET_SLIDE', [srl, 0]);
},
_showSideSlide : function(srl, pos) {
var imgs, cur, side;
imgs = this.cast('GET_IMAGES', [srl]);
if(!imgs.length) return;
cur = this._current['@'+srl];
side = cur + pos;
if(side < 0) side = imgs.length - 1;
else if(side >= imgs.length) side = 0;
this.cast('SET_SLIDE', [srl, side]);
},
API_NEXT_SLIDE : function(sender, params) {
this._showSideSlide(params[0], +1);
},
API_PREV_SLIDE : function(sender, params) {
this._showSideSlide(params[0], -1);
},
API_SET_SLIDE : function(sender, params) {
var srl = params[0], idx = params[1], imgs, im, $holder, iwidth, w1, w2, h1, h2, scale;
imgs = this.cast('GET_IMAGES', [srl]);
if(!imgs.length) return;
if(!is_def(im=imgs[idx])) return;
// set current
this._current['@'+srl] = idx;
// change index indicator
$('#zone_gallery_navigator_status_'+srl).text((idx+1)+'/'+imgs.length);
// highlight next thunmbnail
this._thumbs['@'+srl]
.find('img')
.eq(idx)
.animate({opacity:1})
.end()
.not(':eq('+idx+')')
.animate({opacity:0.5});
// show next image smoothly
$holder = this._holders['@'+srl];
iwidth = $holder.parent().innerWidth();
w1 = im.$obj.prop('width');
h1 = im.$obj.prop('height');
if(w1 > iwidth - 20) {
w2 = iwidth - 20;
scale = w2 / w1;
h2 = Math.floor(h1 * scale);
w1 = w2; h1 = h2;
im.$obj.css('cursor', 'pointer');
im.$obj.attr('rel', 'xe_gallery');
}
// resize_scale이 1이 아니면, 즉 리사이즈 되었다면 해당 이미지 클릭시 원본을 새창으로 띄워줌
var next_idx = obj.idx+1;
if(slide_gallery_images[obj.srl].length<=next_idx) next_idx = 0;
// 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)";
}
im.$obj.css({width:w1, height:h1, margin:'0 10px'});
$holder.empty().append(im.$obj);
}
});
// 파일 이름 추가
var source_filename = obj.image_url;
var tmp_arr = source_filename.split('/');
var filename = tmp_arr[tmp_arr.length-1];
xInnerHtml("zone_gallery_image_filename_"+obj.srl, "<a href='#' onclick=\"winopen('"+source_filename+"');return false;\">"+decodeURI(filename)+"</a>");
// 네이게이션 영역의 숫자 변경
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 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";
}
var gallery = xe.getApp('Gallery')[0];
if(gallery) gallery.registerPlugin(new slideShow);
})(jQuery);

6
modules/editor/components/image_gallery/tpl/slide_gallery.min.css vendored Normal file
View file

@ -0,0 +1,6 @@
/**
* @file slide_gallery.js
* @brief Slideshow type image gallery plugin
* @author NHN (developers@xpressengine.com)
**/
@charset "utf-8";.slide_gallery_loading_text{color:#555555;font-size:8pt;font-family:tahoma;font-weight:bold;margin:20px 0px 20px 0px;text-align:center}.slide_gallery_navigator_box{font-size:9pt;text-align:center;margin:5px 0px 5px 0px}.zone_gallery_navigator_status{color:#444444;font-family:verdana;font-size:8pt;cursor:pointer}.slide_gallery_navigator_box img{vertical-align:bottom}.slide_gallery_main_image_box{border:3px solid #EEEEEE;margin:10px}.slide_gallery_thumbnail_image_box{margin:10px;text-align:center}.slide_gallery_thumbnail_image_box img{border:1px solid #555555;padding:1px;margin:4px}.slide_gallery_filename{margin:5px 0px 10px 0px}.slide_gallery_filename A{color:#000000;text-decoration:none}

9
modules/editor/components/image_gallery/tpl/slide_gallery.min.js vendored Normal file
View file

@ -0,0 +1,9 @@
/**
* @file slide_gallery.js
* @brief Slideshow type image gallery plugin
* @author NHN (developers@xpressengine.com)
**/
(function(k){var m=xe.createPlugin("slideShow",{_holders:{},_thumbs:{},_current:{},init:function(){this._holders={};this._thumbs={};this._current={}},API_SHOW_SLIDE:function(g,e){var b=this,a=e[0],c="@"+a,d,f,j,i,h,l;d=this.cast("GET_IMAGES",[a]);if(d.length){f=k("#zone_slide_gallery_"+a);i=f.find(".slide_gallery_placeholder").css("overflow","hidden");f.find(".slide_gallery_loading_text").remove();j=f.find(".slide_gallery_thumbnail_image_box").show();h=0;for(l=d.length;h<l;h++)d[h].$obj.clone().css({cursor:"pointer",
width:"60px",height:"60px",margin:"5px",opacity:0.5}).click({idx:h},function(c){b.cast("SET_SLIDE",[a,c.data.idx])}).appendTo(j);k("#zone_gallery_navigator_status_"+a).click(function(){j.toggle()});f.find(".__prev").click(function(){b.cast("PREV_SLIDE",[a]);return!1}).end().find(".__next").click(function(){b.cast("NEXT_SLIDE",[a]);return!1});this._holders[c]=i;this._thumbs[c]=j;this._current[c]=0;this.cast("SET_SLIDE",[a,0])}},_showSideSlide:function(g,e){var b,a;b=this.cast("GET_IMAGES",[g]);b.length&&
(a=this._current["@"+g]+e,a<0?a=b.length-1:a>=b.length&&(a=0),this.cast("SET_SLIDE",[g,a]))},API_NEXT_SLIDE:function(g,e){this._showSideSlide(e[0],1)},API_PREV_SLIDE:function(g,e){this._showSideSlide(e[0],-1)},API_SET_SLIDE:function(g,e){var b=e[0],a=e[1],c,d,f;c=this.cast("GET_IMAGES",[b]);if(c.length&&is_def(d=c[a]))this._current["@"+b]=a,k("#zone_gallery_navigator_status_"+b).text(a+1+"/"+c.length),this._thumbs["@"+b].find("img").eq(a).animate({opacity:1}).end().not(":eq("+a+")").animate({opacity:0.5}),
b=this._holders["@"+b],c=b.parent().innerWidth(),a=d.$obj.prop("width"),f=d.$obj.prop("height"),a>c-20&&(c-=20,f=Math.floor(f*(c/a)),a=c,d.$obj.css("cursor","pointer"),d.$obj.attr("rel","xe_gallery")),d.$obj.css({width:a,height:f,margin:"0 10px"}),b.empty().append(d.$obj)}}),i=xe.getApp("Gallery")[0];i&&i.registerPlugin(new m)})(jQuery);