#1354 로고 및 서브 헤더 배경이미지 설정 개선

layouts/xedition/conf/info.xml

@@ -108,14 +108,21 @@
 					<title xml:lang="ko">풀 페이지</title>
 				</options>
 			</var>
+
 			<var name="logo_img" type="image">
-				<title xml:lang="ko">사이트 로고 이미지</title>
+				<title xml:lang="ko">기본형 로고 이미지</title>
+			</var>
+			<var name="logo_img_transparent" type="image">
+				<title xml:lang="ko">투명형 로고 이미지</title>
+			</var>
+			<var name="logo_img_magazine" type="image">
+				<title xml:lang="ko">매거진형 로고 이미지</title>
 			</var>
 			<var name="logo_text" type="text">
 				<title xml:lang="ko">사이트 로고 문자</title>
 			</var>
 			<var name="logo_url" type="text">
-				<title xml:lang="ko">사이트 로고 경로</title>
+				<title xml:lang="ko">사이트 로고 링크 주소</title>
 			</var>
 			<var name="footer_logo_img" type="image">
 				<title xml:lang="ko">푸터 로고 이미지</title>
@@ -124,7 +131,7 @@
 				<title xml:lang="ko">푸터 로고 문자</title>
 			</var>
 			<var name="footer_logo_url" type="text">
-				<title xml:lang="ko">푸터 로고 경로</title>
+				<title xml:lang="ko">푸터 로고 링크 주소</title>
 			</var>
 			<var name="footer_text" type="textarea">
 				<title xml:lang="ko">푸터 내용</title>

layouts/xedition/css/layout.css

@@ -33,8 +33,8 @@ a:hover,a:active,a:focus{text-decoration:none}
 .content img{max-width:100%;height:auto}
 
 /* Header */
-.header>h1{float:left;padding:20px 0;margin-right:32px}
+.header>h1{float:left;padding:20px 0;margin-right:32px;line-height:60px;}
-.header>h1 img{vertical-align:top}
+.header>h1 img{vertical-align:middle; max-height:40px; }
 
 /* Fixed Header */
 /*.container.fixed_header{padding-top:80px}*/
@@ -126,13 +126,17 @@ a:hover,a:active,a:focus{text-decoration:none}
 .onepage .gnb>ul{background:transparent}
 .onepage .gnb>ul>li>a{line-height:60px;color:#f6f6f6}
 .onepage .gnb>ul>li>a:hover,.onepage .gnb>ul>li>a:focus,.onepage .gnb>ul>li>a:focus,.onepage .gnb>ul>li.on>a{color:#fff}
+.onepage .shrink .gnb>ul>li>a{color:#888}
+.onepage .shrink .gnb>ul>li>a:hover,.onepage .shrink .gnb>ul>li>a:focus,.onepage .shrink .gnb>ul>li>a:focus,.onepage .shrink .gnb>ul>li.on>a{color:#444}
 .onepage .header>.side>ul>li>a{color:#f6f6f6}
 .onepage .header>.side>ul>li>a:hover, .onepage .header>.side>ul>li>a:focus,.onepage .header>.side>ul>li>a:active,.onepage .header>.side>ul>li.on>a{color:#fff}
 .onepage .search_area .btn_close{color:#f6f6f6}
+.onepage .shrink .search_area .btn_close{color:#888}
 .onepage .gnb>ul .depth2:after{background:none}
 .onepage .gnb{margin-top:20px}
 .onepage .header>h1{padding:20px 0 0}
 .onepage .search_area input[type=text]{color:#f6f6f6}
+.onepage .shrink .search_area input[type=text]{color:#888}
 
 /* Search */
 .search_wrap{position:relative;width:1200px;margin:0 auto}
@@ -157,7 +161,6 @@ a:hover,a:active,a:focus{text-decoration:none}
 .gnb>ul .depth2 a:hover,.gnb>ul .depth2 a:active,.gnb>ul .depth2 a:focus,.gnb>ul .depth2>li.on>a{color:#cda25a}
 .gnb>ul .depth3{display:none;position:absolute;top:-8px;left:100%;z-index:2;padding:8px 0;background-color:#333}
 .gnb>ul .depth2>li.more>a:after{position:absolute;right:20px;content:'>'}
-.onepage .header_wrap.shrink a,
 .onepage .shrink .header > .side > ul > li > a {color: #444; }
 .onepage .shrink .gnb {margin-top: 0; }
 .magazine .shrink .gnb {margin-bottom: 10px; }

layouts/xedition/js/jquery.countTo.js

@@ -1,80 +0,0 @@
-(function ($) {
-	$.fn.countTo = function (options) {
-		options = options || {};
-
-		return $(this).each(function () {
-			// set options for current element
-			var settings = $.extend({}, $.fn.countTo.defaults, {
-				from:            $(this).data('from'),
-				to:              $(this).data('to'),
-				speed:           $(this).data('speed'),
-				refreshInterval: $(this).data('refresh-interval'),
-				decimals:        $(this).data('decimals')
-			}, options);
-
-			// how many times to update the value, and how much to increment the value on each update
-			var loops = Math.ceil(settings.speed / settings.refreshInterval),
-				increment = (settings.to - settings.from) / loops;
-
-			// references & variables that will change with each update
-			var self = this,
-				$self = $(this),
-				loopCount = 0,
-				value = settings.from,
-				data = $self.data('countTo') || {};
-
-			$self.data('countTo', data);
-
-			// if an existing interval can be found, clear it first
-			if (data.interval) {
-				clearInterval(data.interval);
-			}
-			data.interval = setInterval(updateTimer, settings.refreshInterval);
-
-			// initialize the element with the starting value
-			render(value);
-
-			function updateTimer() {
-				value += increment;
-				loopCount++;
-
-				render(value);
-
-				if (typeof(settings.onUpdate) == 'function') {
-					settings.onUpdate.call(self, value);
-				}
-
-				if (loopCount >= loops) {
-					// remove the interval
-					$self.removeData('countTo');
-					clearInterval(data.interval);
-					value = settings.to;
-
-					if (typeof(settings.onComplete) == 'function') {
-						settings.onComplete.call(self, value);
-					}
-				}
-			}
-
-			function render(value) {
-				var formattedValue = settings.formatter.call(self, value, settings);
-				$self.text(formattedValue);
-			}
-		});
-	};
-
-	$.fn.countTo.defaults = {
-		from: 0,               // the number the element should start at
-		to: 0,                 // the number the element should end at
-		speed: 1000,           // how long it should take to count between the target numbers
-		refreshInterval: 100,  // how often the element should be updated
-		decimals: 0,           // the number of decimal places to show
-		formatter: formatter,  // handler for formatting the value before rendering
-		onUpdate: null,        // callback method for every time the element is updated
-		onComplete: null       // callback method for when the element finishes updating
-	};
-
-	function formatter(value, settings) {
-		return value.toFixed(settings.decimals);
-	}
-}(jQuery));

layouts/xedition/js/layout.js

@@ -13,19 +13,27 @@
         {
             var fixedHeaderHeight = $fixedHeader.height();
             var hasClass = false;
+            var $logoImg = $fixedHeader.find('.header h1 img');
+            var logoDataSrc = $logoImg.data('logo');
+            var logo = $logoImg.attr('src');
+
             $(window).scroll(function() {
                 var scroll = $(this).scrollTop();
 
                 if(scroll >= $shrinkHeaderHeight ) {
                     if(!hasClass)
                     {
+                        $('body').css('padding-top', fixedHeaderHeight);
                         $fixedHeader.addClass('shrink');
+                        if(logoDataSrc) $logoImg.attr('src', logoDataSrc);
                         hasClass = true;
                     }
                 } else {
                     if(hasClass)
                     {
+                        $('body').css('padding-top', 0);
                         $fixedHeader.removeClass('shrink');
+                        if(logoDataSrc) $logoImg.attr('src', logo);
                         hasClass = false;
                     }
                 }
@@ -84,7 +92,7 @@
             return false;
         });
         $('.btn_close').click(function(){
-            $this = $(this);
+            var $this = $(this);
             $this.parent().fadeOut().find('input').val('');
             if($('.magazine').length > 0){
                 $('.custom_area').css('opacity',1);
@@ -96,6 +104,19 @@
             return false;
         });
 
+        // slide
+        if($.isFunction($.fn.camera) && $(".camera_wrap").length) {
+            $(".camera_wrap").camera({
+                height: "600px",
+                pagination: true,
+                thumbnails: false,
+                playPause: false,
+                loader: "none",
+                fx: "simpleFade",
+                time: 3000
+            });
+        }
+
         // Scroll to top
         var scrollToTop = function() {
             var link = $('.btn_top');

layouts/xedition/layout.html

@@ -10,6 +10,8 @@
 	{@ $_container_class = array()}
 	{@ $_visual_class = array()}
 	{@ $_selected_menu = null}
+	{@ $_magazine_header = false}
+	{@ $_onepage_header = false}
 	{@ $sub_header_title = $module_info->browser_title}
 
 <!--// 초기화 -->
@@ -83,10 +85,12 @@
 		{@ $_visual_class[] = 'main'}
 		<block cond="$layout_info->menu_type_main === 'startup'">
 			{@ $_container_class[] = 'onepage'}
+			{@ $_onepage_header = true}
 		</block>
 		<block cond="$layout_info->menu_type_main === 'magazine'">
 			{@ $_container_class[] = 'magazine'}
 			{@ $_enable_unb = true}
+			{@ $_magazine_header = true}
 			{@ $layout_info->menu_fixed = 'N'}
 		</block>
 	</block>
@@ -98,11 +102,13 @@
 		</block>
 		<block cond="$layout_info->menu_type_sub === 'magazine_simple' || $layout_info->menu_type_sub === 'magazine_regular'">
 			{@ $_container_class[] = 'magazine'}
+			{@ $_magazine_header = true}
 			{@ $_enable_unb = true}
 			{@ $layout_info->menu_fixed = 'N'}
 		</block>
 		<block cond="$layout_info->menu_type_sub === 'onepage_parallax'">
 			{@ $_container_class[] = 'onepage'}
+			{@ $_onepage_header = true}
 			{@ $_visual_class[] = 'sub_type3'}
 		</block>
 	</block>
@@ -136,33 +142,13 @@
 <load target="./css/xeicon.css" cond="$mid === 'xeicon'" />
 <load target="../../common/xeicon/xeicon.min.css" />
 <!--// JS -->
-<block cond="$_enable_slide">
-	<load target="./js/camera.min.js" />
-	<script>
-	jQuery(function ($) {
-		// main slide : camera show plugin 적용
-		$(".camera_wrap").camera({
-			height: "600px",
-			pagination: true,
-			thumbnails: false,
-			playPause: false,
-			loader: "none",
-			fx: "simpleFade",
-			time: 3000
-		});
-	});
-	</script>
-</block>
 <load target="./js/jquery.easing.js" />
+<load cond="$_enable_slide" target="./js/camera.min.js" />
 <load target="./js/layout.js" />
 <load cond="$layout_info->use_demo ==='Y'" target="./js/welcome.js" />
 <load target="./js/SmoothScroll.min.js" />
 
 
-
-
-
-
 <!--// BODY -->
 <p class="skip"><a href="#content">{$lang->skip_to_content}</a></p>
 <div class="container {$_container_class}  {$menutype_class}">
@@ -185,18 +171,26 @@
 
 		<header class="header">
 			<!--// LOGO -->
-			<h1>
+			<h1 class="logo-item">
-				<a href="<!--@if(!$layout_info->use_demo && $layout_info->logo_url)-->{$layout_info->logo_url}<!--@else-->{getUrl('')}<!--@end-->">
+				{@ $_logo_img = $layout_info->logo_img}
-					<!--@if(!$layout_info->use_demo && $layout_info->logo_img)-->
+				<block cond="$_magazine_header && $layout_info->logo_img_magazine">
-						<img src="{$layout_info->logo_img}" alt="{$layout_info->logo_text}"|cond="$layout_info->logo_text" />
+					{@ $_logo_img = $layout_info->logo_img_magazine}
+				</block>
+				<a href="<!--@if($layout_info->logo_url)-->{$layout_info->logo_url}<!--@else-->{getUrl('')}<!--@end-->">
+					<!--@if($_logo_img)-->
+						<!--@if($_magazine_header)-->
+							<img src="{$layout_info->logo_img_magazine}" alt="{$layout_info->logo_text}" />
 						<!--@else-->
-						<!--@if(($layout_info->layout_type === 'main' && $layout_info->menu_type_main === 'startup') || ($layout_info->layout_type === 'sub' && $layout_info->menu_type_sub === 'onepage_parallax'))-->
+							<block cond="$_onepage_header && $layout_info->logo_img_transparent">
-							<img src="./img/s_logo.png" alt="XEDITION" />
+								{@ $_logo_img = $layout_info->logo_img_transparent}
-						<!--@elseif($layout_info->menu_type == 'magazine')-->
+							</block>
-							<img src="./img/m_logo.png" alt="XEDITION Header : Magazine type" />
+							<img src="{$_logo_img}" data-logo="{$layout_info->logo_img}"|cond="$_onepage_header && $layout_info->logo_img_transparent" alt="{$layout_info->logo_text}" />
-						<!--@else-->
-							<img src="./img/logo.png" alt="XEDITION" />
 						<!--@endif-->
+					<!--@else-->
+						{@ $_logo_img = 'logo.png'}
+						<block cond="$_magazine_header">{@ $_logo_img = 'm_logo.png'}</block>
+						<block cond="$_onepage_header">{@ $_logo_img = 's_logo.png'}</block>
+						<img src="{$layout_info->path}img/{$_logo_img}" data-logo="{$layout_info->path}img/logo.png"|cond="$_onepage_header" alt="XEDITION" />
 					<!--@end-->
 				</a>
 			</h1>
@@ -282,8 +276,11 @@
 
 	<!-- VISUAL-SUBHEADER -->
 	<div cond="$layout_info->layout_type === 'sub'" class="visual {$_visual_class}">
-		<span class="bg_img" style="background-image:url({$layout_info->path}img/sub_banner_03.jpg)"></span>
+		{@ $_subheader_img = 'sub_banner_01.jpg'}
-		<span cond="$layout_info->layout_type === 'sub'" class="mask"></span>
+		<block cond="$layout_info->menu_type_sub === 'onepage_parallax'">{@ $_subheader_img = 'sub_banner_02.jpg'}</block>
+		<block cond="$mid === 'xeicon'">{@ $_subheader_img = 'sub_banner_xeicon.jpg'}</block>
+		<span class="bg_img" style="background-image:url('{$layout_info->path}img/{$_subheader_img}')"></span>
+		<span class="mask"></span>
 		<div class="sub_title">
 			<h1>{$sub_header_title}</h1>
 		</div>