it-swarm.com.de

Implementierung von Google Translate mit benutzerdefinierten Kennzeichnungssymbolen

Derzeit verwende ich das einfache Dropdown-Menü von Google Translate, das Sie hier finden: http://translate.google.com/translate_tools

Ich möchte auch in der Lage sein, auf einige Flaggensymbole zu klicken, die ich besitze, und die gleichen Javascript-Aufrufe auszulösen, die von den textbasierten Links im Google Translate-Widget aufgerufen werden.

Hat jemand Ideen, wie das zu erreichen ist? Ich kann nicht herausfinden, wie man durch Klicken auf die Flags dasselbe Verhalten einleitet wie das Klicken auf die Google-Links.

18
JLH

Ich hatte viel Spaß dabei, eine Lösung für diese Frage zu finden!

<!-- Use CSS to replace link text with flag icons -->
<ul class="translation-links">
  <li><a href="#" class="spanish" data-lang="Spanish">Spanish</a></li>
  <li><a href="#" class="german" data-lang="German">German</a></li>
</ul>

<!-- Code provided by Google -->
<div id="google_translate_element"></div>
<script type="text/javascript">
  function googleTranslateElementInit() {
    new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false}, 'google_translate_element');
  }
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" type="text/javascript"></script>

<!-- Flag click handler -->
<script type="text/javascript">
    $('.translation-links a').click(function() {
      var lang = $(this).data('lang');
      var $frame = $('.goog-te-menu-frame:first');
      if (!$frame.size()) {
        alert("Error: Could not find Google translate frame.");
        return false;
      }
      $frame.contents().find('.goog-te-menu2-item span.text:contains('+lang+')').get(0).click();
      return false;
    });
</script>
39
mogelbrod

@mogelbrod-Code funktioniert nicht immer, also habe ich ihn ein bisschen gehackt.

Wenn der Benutzer in einem Google-Konto angemeldet ist, erkennt Google die Sprache und übersetzt automatisch den Sprachtext, sodass das Ereignis nicht auf das gewünschte Element ausgelöst werden kann, da das Attribut data-lang nicht korrekt ist.

Benutzer, die nicht im Google-Konto angemeldet sind, und amerikanische/englische Benutzer erhalten die folgenden Einstellungen.en

Und zum Beispiel; Kroatische Benutzer werden dies haben.

hr

In diesem Fall ist es besser, die Sprachreihenfolge abzubilden. Zum Beispiel von oben wäre das

0 - Englisch

1 - Französisch

2 - Deutsch

3 - italienisch

HTML:

Beachten Sie die Eigenschaft der Datenplatzierung (Sie können die Elementreihenfolge ändern, die Platzierung jedoch wie oben erhalten).

<div class="translation-icons" style="visibility:hidden">
    <a href="#" class="eng" data-placement="0">eng icon</a>
    <a href="#" class="fra" data-placement="1">fra icon</a>
    <a href="#" class="ger" data-placement="2">ger icon</a>
    <a href="#" class="ita" data-placement="3">ita icon</a>
</div>

JS: Ich musste die Suchauswahl ändern. Wenn der Benutzer die Sprache auswählt, gibt es in #google_translate_element div kein Element "Choose Language" mehr, daher musste ich auch damit umgehen.

Es ist auch gut, keine Symbole anzuzeigen, bis alle Skripts (Google Translate) geladen sind.

$(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;
        });
});
7
Boris Brdarić

@mogelbrod, ich habe deinen Code oben verwendet und er hat perfekt auf Chrome funktioniert, auf Firefox und Safari ausprobiert, nicht funktioniert. Das span.click-Ereignis löst den Ereignishandler von Google Translate nicht aus. 

Ich habe mir eine andere Methode ausgedacht, die ich mit dem google select anstelle des iframe-basierten Plugins teilen möchte. 

<!-- Use CSS to replace link text with flag icons -->
<ul class="translation-links">
  <li><a href="#" class="spanish" data-lang="Spanish">Spanish</a></li>
  <li><a href="#" class="german" data-lang="German">German</a></li>
</ul>

<!-- Code provided by Google -->
<div id="google_translate_element"></div>
<script type="text/javascript">
  function googleTranslateElementInit() {
    new google.translate.TranslateElement({pageLanguage: 'en', autoDisplay: false}, 'google_translate_element'); //remove the layout
  }
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" type="text/javascript"></script>


<script type="text/javascript">
    function triggerHtmlEvent(element, eventName) {
var event;
if(document.createEvent) {
    event = document.createEvent('HTMLEvents');
    event.initEvent(eventName, true, true);
    element.dispatchEvent(event);
} else {
    event = document.createEventObject();
    event.eventType = eventName;
    element.fireEvent('on' + event.eventType, event);
}
}
            <!-- Flag click handler -->
        $('.translation-links a').click(function(e) {
  e.preventDefault();
  var lang = $(this).data('lang');
  $('#google_translate_element select option').each(function(){
    if($(this).text().indexOf(lang) > -1) {
        $(this).parent().val($(this).val());
        var container = document.getElementById('google_translate_element');
        var select = container.getElementsByTagName('select')[0];
        triggerHtmlEvent(select, 'change');
    }
});
});

        </script>

Getestet am: Chrome (Win & Mac), Safari (Win & Mac), FireFox (Win) und IE8

Das Problem des span.click -Ereignisses, das ich in Firefox und Safari angetroffen habe, konnte übrigens mithilfe der oben beschriebenen Funktion triggerHtmlEvent gelöst werden. Ich habe es jedoch nicht versucht. 

4
joeyend

Implementierung von Google Translate mit benutzerdefinierten Kennzeichnungssymbolen

Verweisen Sie auf diesen Link

http://www.freshcodehub.com/Artikel/26/implementing-google-translate-with-custom-flag-icons

enter image description here

Der Vorteil dieser benutzerdefinierten Liste ist, dass wir das Google-Übersetzer-Widget ausblenden und die gesamte Sprache zum Übersetzen der Webseite verwenden können.

<div id="google_translate_element" style="display: none">
    </div>
    <script type="text/javascript">
        function googleTranslateElementInit() {
            new google.translate.TranslateElement({ pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false }, 'google_translate_element');
        }
    </script>
    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"
        type="text/javascript"></script>
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    <script>
        function translate(lang) {

            var $frame = $('.goog-te-menu-frame:first');
            if (!$frame.size()) {
                alert("Error: Could not find Google translate frame.");
                return false;
            }
            $frame.contents().find('.goog-te-menu2-item span.text:contains(' + lang + ')').get(0).click();
            return false;
        }
    </script>

3
Kamal Pratap

Jetzt ist kein Scripting mehr erforderlich!

Fügen Sie der Adresse, auf die Ihr jeweiliges Flag verweist, das Tag #googtrans(TO_LANG_CODE) hinzu.

Hier ist TO_LANG_CODE der Sprachcode für die gewünschte Sprache ..__ Dies setzt voraus, dass die Seite Google Website Translator wie in der Frage verwendet und Ihre Originalsprache automatisch identifiziert werden kann.

Die Identifizierung der Originalsprache kann dazu beitragen, Fehler zu vermeiden. Verwenden Sie dazu das Formular #googtrans(FROM_LANG_CODE|TO_LANG_CODE).

Beispiel:
http://nykopingsguiden.se/#googtrans(se|es) übersetzt die schwedische Seite 
http://nykopingsguiden.se / von Schwedisch nach Spanisch.

2
PalmWorks

Um eine vollständig Backend-Lösung zu implementieren (bevor translate.js enthalten ist), können Sie einfach eine PHP-Datei erstellen, die Folgendes enthält

<?php setcookie('googtrans', '/en'); header('location:index.html')?>

Wenn Sie Ihre Seite auf Spanisch möchten, fügen Sie einfach eine andere PHP-Datei hinzu:

<?php setcookie('googtrans', '/en/es'); header('location:index.html')?>

Zum Schluss verknüpfen Sie diese Datei mit einem beliebigen 'a'-Tag

<a href="defaultLang.php"></a>
1
Riki_VaL

standardsprachproblem mit folgendem Code sortiert

if(lang!="English"){
        $frame.contents().find('.goog-te-menu2-item span.text:contains('+lang+')').get(0).click();
    }else{
        console.log($frame2.contents().find('.goog-te-banner .goog-te-button button').get(0));
        $frame2.contents().find('.goog-te-banner .goog-te-button button').get(1).click();
    }
1
Isaac

Ich hatte auch mit diesem Problem zu kämpfen - um die Flaggen anklickbar zu machen und stattdessen das gtranslate-Auswahlmenü auszublenden. Google ändert die Sache wahrscheinlich von Zeit zu Zeit, sodass die obigen Codes für mich nicht funktionierten ... Ich dachte, sie brachten mich zu den guten Ideen und schließlich zur Lösung.

  1. die Sprachen zuordnen. Wählen Sie die gewünschten Sprachen aus und legen Sie fest, in welcher Reihenfolge sie im gtranslate-DropDow angezeigt werden - die Flag-Links sollten dieselbe Reihenfolge haben. Es ist wichtig!

  2. fügen Sie in der Funktion googleTranslateElementInit () die Funktion googleTranslateElementInit () hinzu, und fügen Sie den Parameter MultilanguagePage: true hinzu. Ich habe auch die Standardsprache und die Seitenauswahl auskommentiert ... aus irgendeinem Grund funktioniert das ...

     //load the script of google  
    <script src="http://translate.google.com/translate_a/element.js?    cb=googleTranslateElementInit" type="text/javascript"></script>
    <script>
    
    function googleTranslateElementInit() {
    new google.translate.TranslateElement({
    //defaultLanguage: 'en', 
    //pageLanguage: 'en', 
    includedLanguages: 'de,nl,en,es,it,fr', 
    layout: google.translate.TranslateElement.InlineLayout.SIMPLE, 
    autoDisplay: false,
    multilanguagePage: true}, 'google_translate_element')
    };
    
    //this one I need because of the first menu with "select the language" item,              after the first click on the language it disappears 
    var clickCount = 0;
    
    $(window).load(function () {
    
        $('.translation-icons a').click(function(e) {
        e.preventDefault();
    
        var $frame = $('.goog-te-menu-frame:first');
    
        if (!$frame.size()) {
            alert("Error: Could not find Google translate frame.");
            return false;
            }
    
         //find the a links element inside the gtranlate first frame
        var langs = $('.goog-te-menu-frame:first').contents().find('.goog-te-menu2 a');
    
         //the number of the language in flag-elements
        var placement = $(this).data('placement');
    
     //this again I need to adjust the mapping numbers of the languages in the flag elements        
        if (clickCount == 0){
            placement = $(this).data('placement')+1;
            clickCount++;
            }
        //and finaly imitate click on the gtranslate element which is the same as the number of the language in flag link
        langs.eq(placement).find('span.text').click();
        return false;
    
    });
    });
    

Und zum Schluss noch die HTML-Datei der "Flag-Elemente". (Im Moment ist dies nur Text innerhalb der, aber Sie können auch beliebige Img-Dateien dort einfügen, wenn Sie möchten). Vergessen Sie nicht, das Google-Übersetzungselement zu erstellen!

       <!-- Code provided by Google -->
       <div id="google_translate_element"></div>

    <div class="translation-icons">
       <a href="#" class="nl" data-placement="0">nl</a>
       <a href="#" class="de" data-placement="1">de</a>
       <a href="#" class="en" data-placement="2">en</a>
      <a href="#" class="fr" data-placement="3">fr</a>
      <a href="#" class="it" data-placement="4">it</a>
      <a href="#" class="sp" data-placement="5">es</a>
   </div>
1

Dies ist ein Fix für die Lösung von Boris Samardžija, da sie immer dann fehlschlägt, wenn die Namen der Sprachen in der Sprache des Besuchers zu einer anderen Reihenfolge führen.

Erstens müssen in einigen Attributen der Symbole die richtigen Sprachcodes enthalten sein. Z.B. <a href="#" data-lang="German" data-class="de">. Stellen Sie dann sicher, dass Sie ein Google Übersetzer-Element zur Verfügung haben, z.

<script type="text/javascript">
var tis;
function googleTranslateElementInit() {
    tis = new google.translate.TranslateElement({defaultLanguage: 'en', pageLanguage: 'en', includedLanguages: 'en,es,it,de,fr', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false}, 'google_translate_element');
}
</script>

Auf diese Weise können Sie den zu übersetzenden Sprachnamen in der Sprache des Besuchers über die Eigenschaft sl der Eigenschaft C des Google-Elements ermitteln, bei der es sich um eine Zuordnung von Sprachcodes zu den Namen handelt :

$(window).load(function () {    
    $('.translation-links a').click(function(e) {
        e.preventDefault();
        var $frame = $('.goog-te-menu-frame:first');

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

        var codes_names = tis.C.sl;
        var selected_lang = codes_names[$(this).data('class')];

        $('.goog-te-menu-frame:first').contents().find('a span.text:contains(' + selected_lang + ')').click();

        return false;
    });
});
1

Ich habe meine eigene Lösung basierend auf der "ausgewählten" Version von Google Translate erstellt:

<div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'pl', includedLanguages: 'de,en,pl', autoDisplay: false}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Ich habe setcookie () für PHP verwendet:

if ($_GET['lang']) {
  setcookie("googtrans", "", time() - 3600);
  $domena = "." . $_SERVER['HTTP_Host'];
  setcookie("googtrans", '/pl/' . $_GET['lang'], time()+(3600*24), '/' , $domena);
}

Ich weiß nicht, warum Google Script zwei gleiche Cookies mit demselben Namen, aber unterschiedlicher Domäne erzeugt:

schau auf den Bildschirm von EditThisCookie

($ _COOKIE [] sieht nur einen Cookie)

daher muss dieser Code der Domäne mit "." zu Beginn und lösche zuerst den Cookie "googtrans" (funktioniert nicht ohne zu löschen; /).

und hier sind meine HTML-Icons:

wybierz język:
<a href="?lang=pl"><img src="imgcss/pl.png" alt="" /></a>
<a href="?lang=en"><img src="imgcss/en.png" alt="" /></a>
<a href="?lang=de"><img src="imgcss/de.png" alt="" /></a>

und zum Ausblenden der generierten google select list, die generiert wird, fügen Sie einfach eine Zeile zu CSS-Code hinzu:

#google_translate_element {display: none; }

Denken Sie daran, die Seitensprachenwerte zu ändern, bevor Sie den obigen Code verwenden.

0

Ich habe den laufenden Code. Hier können Sie ein benutzerdefiniertes Auswahlfeld mit Ihrer Flagge oder Ihrem HTML-Code erstellen.

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Google Translation</title>
</head>
<body>
    <form id="form1" runat="server">
    <div id="google_translate_element" style="display: none">
    </div>
    <script type="text/javascript">
        function googleTranslateElementInit() {
            new google.translate.TranslateElement({ pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false }, 'google_translate_element');
        }
    </script>
    <script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"
        type="text/javascript"></script>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script>
        function translateLanguage(lang) {
           console.log(lang);
           googleTranslateElementInit();
            var $frame = $('.goog-te-menu-frame:first');
            console.log($frame);
            if (!$frame.size()) {
                alert("Error: Could not find Google translate frame.");
                return false;
            }
            $frame.contents().find('.goog-te-menu2-item span.text:contains(' + lang + ')').get(0).click();
            return false;
        }
    </script>
       <select id="newdemo" onchange="translateLanguage(this.value);">
        <option><a href="javascript:;" val="German"><span>German </span>
            <img src="img/flags/germany_flag.jpg" alt="" /></a> </option>
        <option><a href="javascript:;" val="Italian"><span>Italian
        </span>
            <img src="img/flags/italy_flag.jpg" alt="" /></a> </option>
        <option><a href="javascript:;" val="Hindi"><span>Hindi </span>
            <img src="img/flags/india_flag.png" alt="" /></a> </option>
        <option><a href="javascript:;" val="French"><span>French </span>
            <img src="img/flags/french_flag.jpg" alt="" /></a> </option>
        <option><a href="javascript:;" val="Spanish"><span>Spanish
        </span>
            <img src="img/flags/spain_flag.jpg" alt="" /></a> </option>
        <option><a href="javascript:;" val="Russian"><span>Russian
        </span>
            <img src="img/flags/russia_flag.jpg" alt="" /></a> </option>
    </select>
    <div>
        In this article we explain how to translate the web page into different language
        using google translator. We create a custom country list with flag and call the
        google translator code using javascript custom code. The benifit of this custom
        list is than we can hide the google translator widget and use all the language to
        translate the web page.
    </div>
    </form>
</body>
</html>
0
Hansa thakur
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>


 <li><a href="#googtrans(en|en)" class="lang-en lang-select" data-lang="en"><img src="English.png" alt="USA"></a></li>
 <li><a href="#googtrans(en|fr)" class="lang-es lang-select" data-lang="fr"><img src="/French.png" alt="FRANCE"></a></li>
<li><a href="#googtrans(en|de)" class="lang-es lang-select" data-lang="de"><img src="German.png" alt="Germany"></a></li>

<li><a href="#googtrans(en|it)" class="lang-es lang-select" data-lang="it"><img src="Italian.png" alt="Italy"></a></li>
<li><a href="#googtrans(en|ja)" class="lang-es lang-select" data-lang="ja"><img src="Japanese.png" alt="JAPAN"></a></li>
<div class="container">
    <h1>Use Google Translate with your Website</h1>
</div>



<script type="text/javascript">
    function googleTranslateElementInit() {
      new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.FloatPosition.TOP_LEFT}, 'google_translate_element');
    }

    function triggerHtmlEvent(element, eventName) {
      var event;
      if (document.createEvent) {
        event = document.createEvent('HTMLEvents');
        event.initEvent(eventName, true, true);
        element.dispatchEvent(event);
      } else {
        event = document.createEventObject();
        event.eventType = eventName;
        element.fireEvent('on' + event.eventType, event);
      }
    }

    jQuery('.lang-select').click(function() {
      var theLang = jQuery(this).attr('data-lang');
      jQuery('.goog-te-combo').val(theLang);

      //alert(jQuery(this).attr('href'));
      window.location = jQuery(this).attr('href');
      location.reload();

    });
</script>
<script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
0
Pankaj Upadhyay