Change img src with another img attribute on Responsive

Question

I created a attribute for img tag as in the example code like data-tablet, data-mobil

<div class="myDiv">
 <img  src="img-1.jpg" data-tablet="img-2.jpg" data-mobil="img-3.jpg">
</div>

and I want if my screen change for tablet my img src change with data-tablet or my screen is for mobil my src must change with data-mobil

MY JS

$(document).ready(function(){

    $(window).resize(function(){
      var tabletSrc = $(".main-carousel img").attr("data-tablet");
      var mobilSrc = $(".main-carousel img").attr("data-mobil");
      if($(window).width() <=768){

         $('img').attr('src',tabletSrc);
      }
      if($(window).width() <=480 ) {
         $('img').attr('src',mobilSrc);
      }
  });

});

click to see my works

question is how can I do that I want if u click you gonna see nothing work

note: I don't want to use srcset or css

@recruit_man please edit your question instead of adding the question as a comment — Hugo G
– Hugo G, Commented Dec 22, 2016 at 11:28
If you really want to use this techniques then you need to identify device first then you need to trigger you action to change the src to image tag. In this case you can try is.js (github.com/arasatasaygin/is.js). It has got some events that you can trigger like is.tabelet, is.windowsphone please see the link — Asad Ali
– Asad Ali, Commented Dec 22, 2016 at 11:32
I updated my answer from your work URL. Now check it out @recruit_man — Sumon Sarker
– Sumon Sarker, Commented Dec 22, 2016 at 12:03

Christian Zosel · Accepted Answer · 2016-12-22 11:43:11Z

4

Please see this CodePen for a working version.

There were some issues with your code:

Both the case for mobile and tablet was executed in the mobile case.
$(".main-carousel img") is a collection of images. Instead of that, you probably want to operate on a single image. This can be done with the help of .each().

Here is the relevant code:

$(window).resize(function() {
  if ($(window).width() <= 480) {
    $('img').each(function() {
      $(this).attr('src', $(this).attr('data-mobil'));
    });
  } else if ($(window).width() <= 768) {
    $('img').each(function() {
      $(this).attr('src', $(this).attr('data-tablet'));
    });
  }
});

edited Dec 22, 2016 at 11:43

answered Dec 22, 2016 at 11:34

Christian Zosel

1,4241 gold badge9 silver badges16 bronze badges

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

Comments

Atul Sharma · Accepted Answer · 2016-12-22 11:28:52Z

2

Use srcset instead of js based validations for device dimensions.

<img src="images/space-needle.jpg"
srcset="images/space-needle.jpg 200w, images/space-needle-2x.jpg 400w,
images/space-needle-hd.jpg 600w">

So, now the browser will automatically device which image to download and show depending on the browser dimensions.

Check out more

https://www.sitepoint.com/how-to-build-responsive-images-with-srcset/

answered Dec 22, 2016 at 11:28

Atul Sharma

11k10 gold badges42 silver badges69 bronze badges

Comments

Sumon Sarker · Accepted Answer · 2016-12-22 13:24:06Z

1

You can try this for you carousel multiple images

function makeResize(){
  var imageSrc = $(".myDiv img");
  if($(window).width() <=768 && $(window).width()>480){
    $(imageSrc).each(function(key,value){
      $(value).attr('src',$(value).data('tablet'));
    });
  }else if($(window).width() <=480 ) {
    $(imageSrc).each(function(key,value){
      $(value).attr('src',$(value).data('mobile'));
    });
  }else{
    $(imageSrc).each(function(key,value){
      $(value).attr('src',$(value).data('default'));
    });
  }
}

$(document).ready(function(){
    $(window).resize(function(){
        makeResize();
    });
    makeResize();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="myDiv">
 <img  src="org1.jpg" data-default="org1.jpg" data-tablet="tablet1.png" data-mobile="mobile1.jpg">
 <img  src="org2.jpg" data-default="org2.jpg" data-tablet="tablet2.png" data-mobile="mobile2.jpg">
 <img  src="org3.jpg" data-default="org3.jpg" data-tablet="tablet3.png" data-mobile="mobile3.jpg">
</div>

Note Copy and add proper image source then try. Above code will work for multiple images.

edited Dec 22, 2016 at 13:24

answered Dec 22, 2016 at 11:43

Sumon Sarker

2,7971 gold badge27 silver badges37 bronze badges

2 Comments

ani_css Over a year ago

yes great anser how about on default if my screen resizes again for large screen how it's gonna set default img ?

Sumon Sarker Over a year ago

I updated the answer for default src, Or you can comment last function call makeResize(); @recruit_man

Mairaj Ahmad · Accepted Answer · 2016-12-22 11:26:56Z

1

You are using wrong class name. Your div has class "myDiv" and you are selecting by "main-carousel"

$(document).ready(function(){

    $(window).resize(function(){
      var tabletSrc = $(".myDiv img").attr("data-tablet");
      var mobilSrc = $(".myDiv img").attr("data-mobil");
      if($(window).width() <=768){

         $('img').attr('src',tabletSrc);
      }
      if($(window).width() <=480 ) {
         $('img').attr('src',mobilSrc);
      }
  });

});

Here is codepen

answered Dec 22, 2016 at 11:26

Mairaj Ahmad

14.6k2 gold badges29 silver badges43 bronze badges

1 Comment

Christian Zosel Over a year ago

This sets the same src of the first image for all images!

Jyothi Babu Araja · Accepted Answer · 2016-12-22 11:51:03Z

1

Keep the short width first. Your validation always goes for tablet first. since 480 < 768

Change your conditions like this.

$(window).resize(function(){
      var tabletSrc = $(".someDiv img").attr("data-tablet");
      var mobilSrc = $(".someDiv img").attr("data-mobil");
      var imgSrc = "defaultImageSrc" //src for default image
      var windowWidth = $(window).width();
      if(windowWidth <= 480 ) { //first small width
         imgSrc = mobilSrc;
      }else if(windowWidth <= 768){ //next larger one
         imgSrc = tabletSrc;
      } //if else default will there for you which is initialised there.
});

edited Dec 22, 2016 at 11:51

answered Dec 22, 2016 at 11:34

Jyothi Babu Araja

10.3k3 gold badges33 silver badges41 bronze badges

1 Comment

ani_css Over a year ago

so it's better than my example thanks..how about large screen if my page is large my image must be default where shall I put else code ?

Taniya · Accepted Answer · 2016-12-22 11:32:45Z

0

Try this:

$(window).resize(function(){

var realImg =  $(".main-carousel img").attr();
var tabletSrc = $(".main-carousel img").data("tablet"); //use .data instead of attr
var mobilSrc = $(".main-carousel img").data("mobil");

  if($(this).width() <= 768){
     $('img').attr('src',tabletSrc);
  }
  else if($(this).width() <= 480 ) { // use else if instead of if
     $('img').attr('src',mobilSrc);
  }

  else{
   $('img').attr('src',realImg);
  }

});

answered Dec 22, 2016 at 11:32

Taniya

5502 silver badges7 bronze badges

3 Comments

ani_css Over a year ago

it's give me a error (Cannot read property 'nodeType' of undefined) and I see first time to data how it works?

Taniya Over a year ago

change the class name $(".main-carousel img") to $(".myDiv img") as your parent div is 'myDiv'. and for .data pls check stackoverflow.com/questions/7602565/…

ani_css Over a year ago

and default image it's not work I'm using lazy image loaded it can be a reason?

Collectives™ on Stack Overflow

Change img src with another img attribute on Responsive

6 Answers 6

Comments

Comments

2 Comments

1 Comment

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

2 Comments

1 Comment

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related