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

Answer 1

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'));
    });
  }
});

Answer 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/

Answer 3

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

Answer 4

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.
});

Answer 5

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.

Answer 6

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);
  }

});