Q & A

질답게시판

홈 > 회원포럼 > 질답/버그/제안
질답/버그/제안

줄바꾸기

4 고래 7 149

구글 번역기 소스를 sir 묵공님이 공개하셔서 적용중입니다.

PC버전은 적용했는데 모바일 버전에서 헤매고 있습니다.

사진과 같이 넣고자 하는곳에서 우로 벗어나고 있네요.

이런땐 어떻게 해야 하는지 고수님들 부탁 드립니다.

c26534b2e4c8064e7b44d86787163ffc_1537084718_0756.jpg

아래는 적용한 소스 입니다.

감사 드립니다.


 <!-- Mobile Header -->
 <header class="m-header">
  <div class="at-container">
   <div class="header-wrap">
 
    </div>
     <!-- Mobile Logo -->

 <a href="<?php echo $at_href['home'];?>"><img src="http://wooro365.cafe24.com/img/logo.gif" class="img-responsive">
 </a> <span class="header-desc">
     <p align="center" style="text-align: center;"><strong><span style="color: rgb(255, 255, 255);">♥ 마진의</span><span style="color: rgb(255, 0, 0);"> 90%를</span> <span style="color: rgb(255, 255, 255);">소비자에게</span> <span style="color: rgb(255, 0, 0);">현금으로 </span> <span style="color: rgb(255, 255, 255);">돌려드립니다 ♥</span></strong><br></p></a>
<!--구글 웹사이트 번역 플러그인 [s] -->
<style type="text/css">
iframe.goog-te-banner-frame { display: none !important; } /* 상단 플로팅 바 옵션 가리기 */
body { position: static !important; top:0px !important; }
.goog-logo-link { display:none !important; }
.goog-te-gadget { color: transparent !important; }
</style>
<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'ko', includedLanguages: 'de,en,ja,ko,zh-CN', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false, multilanguagePage: true}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script type="text/javascript">
$(window).load(function () {

    $('.translation-icons').css('visibility', 'visible');

        $('.translation-icons a').click(function(e) {
            e.preventDefault();
            var placement = $(this).data('placement');
            var lang_num = $('.translation-icons a').length;
            var $frame = $('.goog-te-menu-frame:first');

            if (!$frame.size()) {
                alert("Error: Could not find Google translate frame.");
                return false;
            }

            var langs = $('.goog-te-menu-frame:first').contents().find('a span.text');

            if(langs.length != lang_num) placement = placement+1;

            langs.eq(placement).click();
            return false;
        });
});ko
</script>
<div id="google_translate_element" style="visibility: hidden; position: absolute; top: 0px;"></div>
<div class="translation-icons" style="visibility: hidden; position: relative; text-align: right; margin:0 auto; padding-right: 15px; width: 970px; zoom:1">
    <img src="<?php echo G5_IMG_URL?>/google_translate_logo.png" alt='구글 번역 api'/>
    <a href="#" class="ko" data-placement="0"> <img src="<?php echo G5_IMG_URL?>/KR.png" alt='한국'/></a>
 <a href="#" class="cn" data-placement="4"> <img src="<?php echo G5_IMG_URL?>/CN.png" alt='중국'/></a> 
    <a href="#" class="us" data-placement="2"> <img src="<?php echo G5_IMG_URL?>/US.png" alt='미국'/></a>
    <a href="#" class="jp" data-placement="3"> <img src="<?php echo G5_IMG_URL?>/JP.png" alt='일본'/></a>
    <a href="#" class="gm" data-placement="1"> <img src="<?php echo G5_IMG_URL?>/GM.png" alt='독일'/></a>

</div>
<!--구글 웹사이트 번역 플러그인 [e] -->    


 

7 Comments
21 dawn 09.17 14:56  
<div class="header-wrap">
      <div class="header-logo en">
          이곳에 코드 넣어보세요
    </div>
</div>
이렇게 한번 해보세요
4 고래 09.17 17:14  
어이쿠 dawn님 번번히 신세져서 감사드립니다.
지금 밖이라서요 한번 해볼게요.
역시  최고십니다.

Congratulation! You win the 10 Lucky Point!

4 고래 09.17 17:29  
이상하네요 똑같이 우측으로 밀려 버리네요....ㅠㅠ
4 고래 09.17 17:14  
M 한별아빠 09.17 17:48  
위 코드 중 아래 코드에서 강제로 크기지정해서 그렇습니다.

<div class="translation-icons" style="visibility: hidden; position: relative; text-align: right; margin:0 auto; padding-right: 15px; width: 970px; zoom:1">

즉, 970px 강제 지정 후 우측 정렬이니 모바일에서 저렇게 보이는게 맞겠죠.

width:100% 일 때 모양이 맞지 않다면 PC와 모바일에 따라서 위치지정을 따로 해 주셔야 할 듯... 아래처럼...

<div class="translation-icons" style="visibility: hidden; position: relative; text-align: right; margin:0 auto; padding-right: 15px; width:<?php echo (G5_IS_MOBILE) ? '320px' : '970px';?>; zoom:1">

그런데, 반응형 생각하면 이것도 답은 아닌데, 페이지를 봐야 체크되겠지만, 아마 width:100% 속성이 먹힐 듯...
4 고래 09.18 17:50  
넵 대장님 적용하니 안으로 들어왔네요.
그런데 번역이 이상하게 되네요 한국->중국->미국->일본->독일
이렇게 넣었는데 중국어를 선택하면 미국이 나오고 일본을 누르면 독일이 나오고 또 다시 이상한 랜덤식으로 내가 보고자 하는 국명의 번역이 안되네요.
걍 주저리주저리 해봣습니다.
대장님께서 개발한 코드도 아닌데 혹시나 대장님은 대단한분이기에 어떤 묘안이 있을실지 해서요
M 한별아빠 09.18 18:57  
이건 넣으신 스크립트 다시 체크해 보시라고 밖에는...ㅠㅠ
제목
최근 글
최근 댓글
Facebook Twitter GooglePlus KakaoStory KakaoTalk NaverBand