mirror of
https://github.com/Lastorder-DC/rhymix.git
synced 2026-04-02 01:52:10 +09:00
#1354 로고 및 서브 헤더 배경이미지 설정 개선
This commit is contained in:
bnu
parent
54a8d259c6
commit
b05074a83d
9 changed files with 68 additions and 120 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 img{vertical-align:top}
|
||||
.header>h1{float:left;padding:20px 0;margin-right:32px;line-height:60px;}
|
||||
.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; }
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 163 KiB After Width: | Height: | Size: 163 KiB |
|
|
@ -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));
|
||||
|
|
@ -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');
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<a href="<!--@if(!$layout_info->use_demo && $layout_info->logo_url)-->{$layout_info->logo_url}<!--@else-->{getUrl('')}<!--@end-->">
|
||||
<!--@if(!$layout_info->use_demo && $layout_info->logo_img)-->
|
||||
<img src="{$layout_info->logo_img}" alt="{$layout_info->logo_text}"|cond="$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'))-->
|
||||
<img src="./img/s_logo.png" alt="XEDITION" />
|
||||
<!--@elseif($layout_info->menu_type == 'magazine')-->
|
||||
<img src="./img/m_logo.png" alt="XEDITION Header : Magazine type" />
|
||||
<h1 class="logo-item">
|
||||
{@ $_logo_img = $layout_info->logo_img}
|
||||
<block cond="$_magazine_header && $layout_info->logo_img_magazine">
|
||||
{@ $_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-->
|
||||
<img src="./img/logo.png" alt="XEDITION" />
|
||||
<block cond="$_onepage_header && $layout_info->logo_img_transparent">
|
||||
{@ $_logo_img = $layout_info->logo_img_transparent}
|
||||
</block>
|
||||
<img src="{$_logo_img}" data-logo="{$layout_info->logo_img}"|cond="$_onepage_header && $layout_info->logo_img_transparent" alt="{$layout_info->logo_text}" />
|
||||
<!--@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>
|
||||
<span cond="$layout_info->layout_type === 'sub'" class="mask"></span>
|
||||
{@ $_subheader_img = 'sub_banner_01.jpg'}
|
||||
<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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue