Home > Enterprise >  Change Image with multiple languages
Change Image with multiple languages

Time:03-08

I have a index.html a javascript file and the XML site. The multiple XMLs are for the various languages and I want to change the default logo to the different language logo ones.

The Logo in the Index:

    <img  src="data/img/lorem_logo_en.png">

and now I want to change the Logo path with my javascript.

I used to change text with:

  $(".exampleclass").html($(xmldoc).find("changebutton").text())

I don't want to change it with onclick because I have 10 different languages and with onclick I would need to change by ID.

Could it be similair to my text solution - like instead of changing text i would need to change the value of src ? The issue I have is the multiple languages, if there would be just 2 I could do onclick.

Full: Index.html

<div id="loadly">
    <img  src="data/img/lorem_logo_en.png">
    <div >
        <div ></div>
    </div>

</div>

Javascript snippet:

$(document).ready(function() {
    if (getParam('language') != "") {
        lang = (getParam('language'))

    }
    if (window.top != window.self) {
        $('.logo').hide()
    }
    loadxml()
    setHeight()
});

    var langstr = "<div class='menubutton'><a class='langbtn' data-language='de'>DE</a> | <a class='langbtn' data-language='en'>EN</a> | <a class='langbtn' data-language='fr'>FR</a> | <a class='langbtn' data-language='nl'>NL</a> | <a class='langbtn' data-language='pl'>PL</a></div>"

    $('.menubuttons').append(langstr)

    $('.menubutton').click(function() {
        krpano.call("tween(view.hlookat,"   $(this).attr('data-lookat')   ",0.9,easeInOutSine);");
        $('#menulayer').removeClass('out');
        $('#menulayer').css('left', '-240px')
        setTimeout(function(id) {

            createInfo(id)

        }, 1000, $(this).attr('data-id'))

    })

    $('.langbtn').click(function() {
        window.location.href = "index.html?language="   $(this).attr('data-language')
    })
    initAction()

}

reading xml:

var xmldoc





function loadxml(){
    
    $("#xmldaten").load("data/xml/content_" lang ".xml", "",
    function(responseText, textStatus, XMLHttpRequest) {

        xmldoc = $.parseXML( responseText );
        
    
        
        initContent()

    })
}

function initContent(){


    initPano()
$("#xmldaten").html("")
}

CodePudding user response:

As simple as replacing

if (getParam('language') != "") {
    lang = (getParam('language'))
}

with

const lang = getParam('language') || "en"; // assuming en is default
$(".loadlogo").attr("src",`data/img/lorem_logo_${lang}.png`)
  • Related