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

À l'heure actuelle, j'utilise le menu déroulant Google Translate proposé ici: http://translate.google.com/translate_tools

J'aimerais également pouvoir cliquer sur certaines icônes de drapeau que j'ai et déclencher les mêmes appels javascript que les liens textuels dans le widget de traduction de google.

Quelqu'un a-t-il des idées sur la façon d'y parvenir? Je ne peux pas comprendre comment cliquer sur les drapeaux pour lancer le même comportement que de cliquer sur les liens de traduction de google tradutor.

Je me suis bien amusé à trouver une solution pour 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> 

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

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

Les utilisateurs qui ne sont pas connectés au compte Google et les utilisateurs américains / anglais auront ceci. En

Et par exemple; Les utilisateurs croates auront ceci.

heure

Dans ce cas, il est préférable de mapper l'ordre des langues. Par exemple, ci-dessus, cela serait

0 – Anglais

1 – français

2 – allemand

3 – Italien

HTML:

Notez la propriété de placement de données (vous pouvez modifier l'ordre des éléments, mais préservez 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 le sélecteur de recherche. Notez que lorsque l'utilisateur choisit la langue, il n'y a plus d'élément "Choisir un langage" dans #google_translate_element div, donc j'ai dû gérer cela aussi.

Il est également bon de ne pas afficher les icônes jusqu'à ce que tous les scripts (google traduit) soient 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; }); }); 

@mogelbrod, j'ai utilisé votre code ci-dessus et ça a fonctionné parfaitement sur Chrome, l'ai essayé sur 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 simplement partager en utilisant le google select plutôt que le 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 & Mac), FireFox (win) et IE8

En passant, la question de l'événement span.click que j'ai rencontré sur Firefox et Safari pourrait être résolue en utilisant la fonction triggerHtmlEvent ci-dessus, mais je ne l'ai pas encore essayé.

Implémentation de Google Translate avec icônes de drapeau personnalisé

Recommander ce lien

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

Entrez la description de l'image ici

Le bénéfice de cette liste personnalisée est que nous pouvons cacher le widget de 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> 

Maintenant, aucun script n'est requis!

Ajoutez la balise #googtrans(TO_LANG_CODE) à l'adresse indiquée par votre drapeau respectif.

Ici TO_LANG_CODE est le code de langue de la langue souhaitée. Cela suppose que la page utilise Google Translator de site Web comme dans la question et que votre langue d'origine peut être automatiquement identifiée.

L'identification de la langue d'origine peut aider à éviter les erreurs. Pour ce faire, 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 vers l'espagnol.

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(); } 

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

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

Si vous voulez que votre page en espagnol, vous venez d'ajouter d'autres fichiers php comme:

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

Enfin, liez ce fichier à n'importe quelle étiquette 'a'

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

J'ai également eu du mal à résoudre ce problème – pour rendre les drapeaux cliquables et cacher le menu de sélection gtranslate à la place. Google change probablement quelque chose de temps en temps, donc les codes ci-dessus ne fonctionnaient pas pour moi … Je pensais qu'ils m'ont apporté les bonnes idées et enfin la solution.

  1. Mapper les langues. Choisissez les langues dont vous avez besoin et gagnez dans quel ordre elles sont affichées dans le dropdow gtranslate – les liens de drapeau devraient avoir le même ordre. C'est important!

  2. Dans la fonction a prouvé la fonction googleTranslateElementInit (), googleTranslateElementInit (), ajoutez le paramètre MultilanguagePage: true parametr. J'ai également commenté la langue par défaut et le pagelanguage … 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 finalement le html des "éléments du drapeau". (Pour l'instant, ce n'est que du texte à l'intérieur, mais vous pouvez mettre tout img là-bas si vous voulez) Et n'oubliez pas de créer l'élément google traduit!

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

C'est une solution à la solution de Boris Samardžija car elle échoue chaque fois que les noms des langues dans la langue du visiteur aboutissent à leur ordre différent.

D'abord, avoir des codes de langue corrects dans certains attributs des icônes. Par exemple, <a href="#" data-lang="German" data-class="de"> . Ensuite, assurez-vous que vous disposez d'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 langue à traduire dans la langue du visiteur à travers la propriété sl de la propriété C de l'élément google, qui est un mappage de codes de langue 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; }); }); 

J'ai fait ma propre solution en fonction de la version "sélectionnée" 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 fait 2 mêmes cookies, avec le même nom, mais un domaine différent:

Regardez l'écran de EditThisCookie

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

Donc ce code doit nommer le domaine avec "." En débutant, et d'abord effacer 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 cacher la liste par défaut de google sélectionnée qui est générée, il suffit d'ajouter une ligne au code css:

 #google_translate_element {display: none; } 

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