4

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

ani_css
  • 2,118
  • 3
  • 30
  • 73
  • And where is your question? – Sojtin Dec 22 '16 at 11:24
  • where's the problem – ab29007 Dec 22 '16 at 11:26
  • Welcome to the wheel inventory lab. You've re-invented a nice wheel that works for one particular case with hardcoded break points and you've only included one or two code smells (two if statements that check the same thing for different values; useless loading of desktop and tablet images on mobile;`attr()` instead of `data()`) – Hubert Grzeskowiak Dec 22 '16 at 11:27
  • question is how can I do that I want if u click you gonna see nothing work – ani_css Dec 22 '16 at 11:27
  • 2
    @recruit_man please edit your question instead of adding the question as a comment – Hubert Grzeskowiak Dec 22 '16 at 11:28
  • "note: I don't want to use srcset or css" -why? – Hubert Grzeskowiak Dec 22 '16 at 11:29
  • old browser is not supporting that is why @HubertGrzeskowiak – ani_css Dec 22 '16 at 11:32
  • 1
    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 (https://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 Dec 22 '16 at 11:32
  • 1
    I updated my answer from your `work URL`. Now check it out @recruit_man – Sumon Sarker Dec 22 '16 at 12:03
  • @AsadAli it work's if I resizes window but if I don't resizes and if I visit just with my device for example iphone or tablet devices how it's gonna perceive – ani_css Dec 22 '16 at 12:11
  • @recruit_man you have to trigger those events on window resize again then it'll work – Asad Ali Dec 22 '16 at 13:03

6 Answers6

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'));
    });
  }
});
Christian Zosel
  • 1,424
  • 1
  • 9
  • 16
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/

Atul Sharma
  • 9,397
  • 10
  • 38
  • 65
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

Mairaj Ahmad
  • 14,434
  • 2
  • 26
  • 40
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.
});
Jyothi Babu Araja
  • 10,076
  • 3
  • 31
  • 38
  • 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 ? – ani_css Dec 22 '16 at 11:40
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.

Sumon Sarker
  • 2,707
  • 1
  • 23
  • 36
  • yes great anser how about on default if my screen resizes again for large screen how it's gonna set default img ? – ani_css Dec 22 '16 at 12:09
  • I updated the answer for default `src`, Or you can comment last function call `makeResize();` @recruit_man – Sumon Sarker Dec 22 '16 at 13:24
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);
  }

});
Taniya
  • 550
  • 2
  • 7
  • it's give me a error (Cannot read property 'nodeType' of undefined) and I see first time to data how it works? – ani_css Dec 22 '16 at 12:17
  • change the class name $(".main-carousel img") to $(".myDiv img") as your parent div is 'myDiv'. and for .data pls check http://stackoverflow.com/questions/7602565/using-data-attributes-with-jquery – Taniya Dec 22 '16 at 12:22
  • and default image it's not work I'm using lazy image loaded it can be a reason? – ani_css Dec 22 '16 at 12:43