web-dev-qa-db-fra.com

Implémentation de Google Traduction avec des icônes de drapeau personnalisées

Actuellement, j'utilise le menu déroulant Google Traduction simple trouvé ici: http://translate.google.com/translate_tools

J'aimerais aussi pouvoir cliquer sur certaines icônes de drapeau que j'ai et déclencher les mêmes appels javascript appelés par les liens textuels du widget Google Translate.

Quelqu'un at-il des idées sur la façon d'accomplir cela? Je n'arrive pas à comprendre comment cliquer sur les drapeaux provoque le même comportement que sur les liens de traduction Google.

javascriptgoogle-translate
18
JLH

Nous avons eu beaucoup de plaisir à trouver une solution à cette question!

<!-- 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

Le code @mogelbrod ne fonctionne pas toujours, alors je l'ai piraté un peu.

Si l'utilisateur est connecté à un compte Google, Google détectera sa langue et traduira automatiquement son texte afin que vous ne puissiez pas déclencher un événement sur l'élément souhaité, car l'attribut data-lang ne sera pas correct!

Les utilisateurs qui ne sont pas connectés à un compte Google et les utilisateurs américains/anglais auront cette .en

Et par exemple Les utilisateurs croates auront cela.

hr

Dans ce cas, il est préférable de cartographier l'ordre des langues. Par exemple d'en haut, ce serait

0 - anglais

1 - français

2 - allemand

3 - italien

HTML:

Notez la propriété data-placement (vous pouvez modifier l'ordre des éléments, mais conserver le placement comme ci-dessus).

<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: .__ J'ai dû changer de sélecteur de recherche. Notez que lorsque l'utilisateur choisit la langue, il n'y a plus d'élément "Choisir la langue" dans #google_translate_element div.

Aussi, il est bon de ne pas afficher les icônes tant que tous les scripts (google translate) ne sont pas chargés.

$(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, j'ai utilisé votre code ci-dessus et cela a parfaitement fonctionné sous Chrome, essayé sous Firefox et Safari, n'a pas fonctionné. L'événement span.click ne déclenche pas le gestionnaire d'événements de google translate. 

Je suis venu avec une autre méthode que je veux juste partager en utilisant le google select à la place du plugin iframe. 

<!-- 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>

Testé sur: Chrome (Win et Mac), Safari (Win et Mac), FireFox (Win) et IE8.

À propos, le problème de l'événement span.click que j'ai rencontré sur Firefox et Safari pourrait être résolu en utilisant la fonction triggerHtmlEvent ci-dessus, je ne l'ai pas encore essayé 

4
joeyend

Implémentation de Google Traduction avec des icônes de drapeau personnalisées

Référer ce lien

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

enter image description here

L'avantage de cette liste personnalisée est que nous pouvons masquer le widget traducteur Google et utiliser toute la langue pour traduire la page Web.

<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

Maintenant, aucun script n'est requis!

Ajoutez la balise #googtrans(TO_LANG_CODE) à l'adresse à laquelle votre drapeau respectif renvoie.

Ici, TO_LANG_CODE correspond au code de langue de la langue souhaitée . Cela suppose que la page utilise Google Website Translator comme dans la question et que votre langue d'origine puisse être automatiquement identifiée.

Identifier la langue d'origine peut aider à éviter les erreurs, utilisez le formulaire #googtrans(FROM_LANG_CODE|TO_LANG_CODE).

Exemple:
http://nykopingsguiden.se/#googtrans(se|es) traduit la page suédoise 
http://nykopingsguiden.se du suédois à l’espagnol.

2
PalmWorks

Pour implémenter une solution totalement backend (avant le translate.js inclus), vous pouvez simplement créer un fichier php contenant

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

Si vous voulez que votre page soit en espagnol, il vous suffit d’ajouter un autre fichier php comme:

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

Enfin, liez ce fichier à n’importe quelle balise 'a'

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

problème de langue par défaut trié avec le code suivant

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

Je me battais aussi avec ce problème - pour rendre les drapeaux cliquables et pour masquer le menu de sélection gtranslate. Google change probablement de chose de temps en temps, donc les codes ci-dessus ne m'ont pas fonctionné ... Je pense qu'ils m'ont amené aux bonnes idées et finalement à la solution.

  1. cartographier les langues. Choisissez les langues dont vous avez besoin et choisissez l'ordre dans lequel elles sont affichées dans le menu déroulant gtranslate - les liens de drapeau doivent avoir le même ordre. C'est important!

  2. dans la fonction prouvée par la fonction googleTranslateElementInit (), ajoutez la MultilanguagePage: true parametr. J'ai également commenté la langue et la langue par défaut ... pour une raison quelconque, cela fonctionne ...

     //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;

});
});

Et enfin le code HTML des "éléments de drapeau" (pour l’instant, il n’ya que du texte à l'intérieur, mais vous pouvez y placer n'importe quelle image si vous le souhaitez) et n'oubliez pas de créer l'élément Google Translate!

       <!-- 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
Aleksandra Chuprova

La solution de Boris Samardžija est un correctif, car elle échoue chaque fois que les noms des langues dans la langue du visiteur résultent dans un ordre différent.

D'abord, avoir des codes de langue corrects dans certains attributs des icônes. E.g .<a href="#" data-lang="German" data-class="de"> . Assurez-vous ensuite que vous aurez un élément Google Translate disponible, par exemple:

<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>

Cela vous permet de trouver le nom de la langue à traduire dans la langue du visiteur à l'aide de la propriété sl de la propriété C de l'élément Google, qui correspond à des codes de langue correspondant aux noms:

$(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
Jindřich Prokop

J'ai créé ma propre solution basée sur la version "select" de Google Translate:

<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>

J'ai utilisé setcookie () sur PHP:

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

Je ne sais pas pourquoi Google Script crée deux mêmes cookies, avec le même nom, mais un domaine différent:

regarde l'écran de EditThisCookie

($ _COOKIE [] ne voit qu'un seul cookie)

donc ce code doit nommer le domaine avec "." au début, et supprimez d’abord le cookie "googtrans" (ne fonctionne pas sans supprimer; /).

et voici mes icônes html:

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>

et pour masquer la liste de sélection Google générée par défaut, ajoutez simplement une ligne au code CSS:

#google_translate_element {display: none; }

N'oubliez pas de changer les valeurs de langue de la page avant d'utiliser le code ci-dessus;)

0
Marcin Kalinowski
<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