CODEWITHSUNDEEP
javascriptjqueryhtmlimagetags
EgzEst
EgzEst

Reputation: 361

Add jQuery variables in src of an image not working

I have a website and based on language en, sq or el, I want to change image source. So I have a folder named screenshots then there are three folders: en, sq and el.

For example the URL for a picture named 'slide-phone.png' is:

static/img/screenshots/en/slide-phone.png
static/img/screenshots/sq/slide-phone.png
static/img/screenshots/el/slide-phone.png

I want to take attribute lang of HTML tag and then to add it to the source of the image, but for some reasons, it's not working.

My code looks like this:

<html lang="{{ _('en') }}">
<script type="text/javascript">
 $(document).ready(function(e){
       var language = $('html').attr('lang');
});
</script>
...
 <img  id="slide-phone-1-img" src="{{ url_for('static', filename='img/screenshots/' + language+'slide-phone.png') }}" >

I'm using python and jinja. Any help :)

EDIT:

I also tried like this but the problem is that I want to use jinja and for that I need to change this code:

<html lang="{{ _('en') }}">
    <script type="text/javascript">
     $(document).ready(function(e){
           var language = $('html').attr('lang')
           img_url = 'img/screenshots/'+ language+'/slide-phone.png';
           $('#slide-phone-img').attr('src',img_url);
    });
    </script>

Upvotes: 1

Views: 1342

Answers (1)

MKAD
MKAD

Reputation: 457

something like this

$(document).ready(function(e){
       var language = $('html').attr('lang');
       var new_url = $('#slide-phone-1-img').attr("src").replace("language", language);
       console.log(new_url);
       $('#slide-phone-1-img').remove();
       $('#imges').prepend('<img id="slide-phone-1-img" src="'+new_url+'" />');

$('#show').html( $('#slide-phone-1-img').attr("src").replace("language", language));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html lang="{{ _('en') }}">
   <body>
    <div id="imges">
     <img  id="slide-phone-1-img" src="{{ url_for('static', filename='img/screenshots/language slide-phone.png') }}" > 
    </div>   
    <div id="show">
      <p></p>
    </div>
   </body>
</html>

Upvotes: 1

Related Questions