Add jQuery variables in src of an image not working

Question

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>

how should it work ? How and where you call your variable language ? — MKAD
– MKAD, Commented Mar 2, 2016 at 10:09
you cant call your language variable out of <script type="text/javascript"> tags — MKAD
– MKAD, Commented Mar 2, 2016 at 10:15

MKAD · Accepted Answer · 2016-03-02 13:17:25Z

1

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>

edited Mar 2, 2016 at 13:17

answered Mar 2, 2016 at 10:27

MKAD

4572 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

EgzEst Over a year ago

I did a console.log and it shows the good link like this :/static/img/screenshots/en/slide-phone.png , but in the scr is not replaced. Is this maybe because page loads and after it the jquery code is executed?

MKAD Over a year ago

youe mean the src in your html img tag is not replaced?

MKAD Over a year ago

if I understood you correctly, you want to change your code in your example.html after jQuery once? from <img id="slide-phone-1-img" src="{{ url_for('static', filename='img/screenshots/language slide-phone.png') }}" > ..... to <img id="slide-phone-1-img" src="{{ url_for('static', filename='img/screenshots/{{ _('en') }} slide-phone.png') }}" > right?

MKAD Over a year ago

Let us continue this discussion in chat.

EgzEst Over a year ago

Yes exactly,ur code works as I said before If I do a console.log($('#slide-phone-1-img').attr("src").replace("language", language)) it gives the right url, but the url in src is not changed .

|

Collectives™ on Stack Overflow

Add jQuery variables in src of an image not working

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related