Search code examples
javascriptjqueryimageswaplang

Change image without reloading the page based on current language JQuery

I try to change an Image (first slide of the carousel) based on the current language without reloading the page, using JQuery. So far I have become with this, but for some reason is dot not work. (I am a beginner)

HTML Code sample

<picture>
    <source  id="premierSlide" srcset="assets/img/header/BG1.png" media="(min-width: 1200px)">
    <source srcset="assets/img/mobile/BG1-tablet.png" media="(min-width: 768px)">
    <source srcset="assets/img/mobile/BG1.png" media="(min-width: 320px)">
    <img    srcset="assets/img/header/BG1.png" alt="responsive image" class="d-block img-fluid">
</picture>

JQUERY code sample

$(document).ready(function(){
    if ($'html').attr('currentLang') != 'FR' ) {
        $('#premierSlide').attr('srcset', 'assets/img/header/BG1.png')
    }else{
        $('#premierSlide').attr('srcset', 'assets/img/header/BG1ENG.png')
    }
});

Any help will be great appreciated!

Solution

  • Fix the typo: 

     if ($'html').attr('currentLang') != 'FR' ) {

    to

     if ($('html').attr('currentLang') != 'FR' ) {