Saltar al contenido

Implementando Google Translate con íconos de bandera personalizados

La guía paso a paso o código que encontrarás en este artículo es la solución más fácil y efectiva que hallamos a esta duda o problema.

Solución:

¡Me divertí mucho encontrando una solución para esta pregunta!





El código de @mogelbrod no siempre funciona, así que lo pirateé un poco.

Si el usuario inició sesión en la cuenta de Google, Google detectará su idioma y traducirá automáticamente el texto del idioma para que no pueda activar el evento en el elemento deseado porque data-lang attribute no será correcto!

Los usuarios que no hayan iniciado sesión en la cuenta de Google y los usuarios estadounidenses o ingleses tendrán esto.
es

Y por ejemplo; Los usuarios croatas tendrán esto.

hora

En este caso, es mejor mapear el orden de los idiomas. Por ejemplo, desde arriba, eso sería

0 – Inglés

1 – francés

2 – Alemán

3 – italiano

HTML:

Tenga en cuenta la propiedad de ubicación de datos (puede cambiar el orden de los elementos, pero conserva la ubicación como se indicó anteriormente).


JS: Tuve que cambiar el selector de búsqueda. Tenga en cuenta que cuando el usuario elige el idioma, no hay más elemento “Elegir idioma” en el div #google_translate_element, por lo que tuve que manejar eso también.

También es bueno no mostrar íconos hasta que se carguen todos los scripts (traductor de Google).

$(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, utilicé su código anterior y funcionó perfectamente en Chrome, lo probé en Firefox y Safari, no funcionó. El evento span.click no activa el controlador de eventos de Google Translate.

Se me ocurrió otro método que solo quiero compartir usando Google Select en lugar del complemento basado en iframe.





Probado en: Chrome (win y Mac), Safari (Win y Mac), FireFox (win) e IE8

Por cierto, el problema del evento span.click que encontré en Firefox y Safari podría resolverse usando la función triggerHtmlEvent anterior, aunque no lo he probado.

Reseñas y puntuaciones del tutorial

Puedes añadir valor a nuestro contenido informacional contribuyendo tu veteranía en las reseñas.

¡Haz clic para puntuar esta entrada!
(Votos: 2 Promedio: 5)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *