i18next more complicated

by jmjpro

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/i18next/1.6.3/i18next-1.6.3.min.js"></script>
<div id="screen-main-menu" class="canvas-fullscreen" tabindex="0">
    <div id="button-change-player" class="main-menu-player">
        <div id="change-player-text">
            <div id="hello-player"><span id="hello" data-i18n="Screen Main Menu.Hello">Hello</span>  <span id="player-name">Efrat!</span>
                <br/>
            </div>	<span id="click-here" data-i18n="Screen Main Menu.Option Change Player">Click here to change player</span>

        </div>
    </div>
    <div id="button-timed" class="main-menu-mode"></div>
    <div id="button-relaxed" class="main-menu-mode"></div>
    <table id="main-menu-button-group">
        <tr>
            <td id="button-how-to-play" class="main-menu-button" data-i18n="Screen Main Menu.Option How To Play">How To Play</td>
            <td id="button-top-scores" class="main-menu-button" data-i18n="Screen Main Menu.Option Top Scores">Top Scores</td>
        </tr>
        <tr>
            <td id="button-set-language" class="main-menu-button" data-i18n="Screen Main Menu.Option Set Languages">Set Language</td>
            <td id="button-quit" class="main-menu-button" data-i18n="Screen Main Menu.Option Quit">Quit</td>
        </tr>
    </table>
    <!-- <ul class="galapago-drop-down">
				<li>English</li>
				<li>French</li>
				<li>German</li>
				<li>Russian</li>
				<li>Spanish</li>
			</ul>
			-->
</div>

CSS

h2 {
    width: 80%;
    margin: auto;
}
#dest {
    width: 80%;
    height: 4em;
    border: 1px solid #CECECE;
    margin: 1em auto;
    padding: .5em;
    box-shadow: 0 0 4px 0px #000;
    background-color: #FCFCFC;
}

JavaScript

var resources = {
    'en': {
        translation: {
            'string1': 'string1',
                'string2': 'string2',
                'string3': 'string3'
        }
    },
        'fr': {
        translation: {
            'Screen Main Menu': {
                'Hello': 'Bonjour',
                'Option Change Player': 'french Click Here to change player'
            }
        }
    }
};

i18n.init({
    lng: 'fr',
    fallbackLng: 'en',
    resStore: resources
}, function (t) {
    $('#screen-main-menu').i18n();
});

//$('pre').html(i18n.t('myString'));