Swap the image source with a different image attribute when making the website responsive

Question

Swap the image source with a different image attribute when making the website responsive

I have implemented a custom attribute for the img tag in my code, such as data-tablet and data-mobil

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

My goal is to have the image source change dynamically depending on the screen size, so if the screen is a tablet, the src should change to data-tablet, and if it's a mobile screen, the src should change to data-mobil

Here is my JavaScript code:

$(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 here to view my code on Codepen

The question I have is how can I achieve this behavior without any functionality when clicked.

Note: I prefer not to use srcset or CSS for this purpose.

javascript jquery html css

Answer 1

Answer №1

To see a functional version, please visit this CodePen link.

Upon reviewing your code, the following issues were identified:

The code meant for both mobile and tablet cases was being executed in the mobile scenario only.
The selector $(".main-carousel img") targets a group of images, not a single one. To address this, consider utilizing .each() to operate on individual images.

Below shows the relevant portion of the 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

To see a functional version, please visit this CodePen link.

Upon reviewing your code, the following issues were identified:

The code meant for both mobile and tablet cases was being executed in the mobile scenario only.
The selector $(".main-carousel img") targets a group of images, not a single one. To address this, consider utilizing .each() to operate on individual images.

Below shows the relevant portion of the 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 3

Answer №2

Opt for using srcset over JavaScript-based validations for different 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">

By doing this, the browser can automatically select and display the appropriate image based on its dimensions.

For more information, visit

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

Answer 4

Opt for using srcset over JavaScript-based validations for different 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">

By doing this, the browser can automatically select and display the appropriate image based on its dimensions.

For more information, visit

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

Answer 5

Answer №3

If you're looking to create a carousel with multiple images, give this a try

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

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

<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 Make sure to provide correct image sources before testing. The code above is designed for use with multiple images.

Answer 6

If you're looking to create a carousel with multiple images, give this a try

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

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

<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 Make sure to provide correct image sources before testing. The code above is designed for use with multiple images.

Answer 7

Answer №4

It seems like you may be using the incorrect class name in your code. Your div is assigned the class "myDiv" but you are trying to select it using the class name "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);
      }
  });

});

You can find the codepen link here

Answer 8

It seems like you may be using the incorrect class name in your code. Your div is assigned the class "myDiv" but you are trying to select it using the class name "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);
      }
  });

});

You can find the codepen link here

Answer 9

Answer №5

Always prioritize the validation for tablet when dealing with different screen sizes, as 480 < 768

Make sure to adjust your conditions accordingly:

$(window).resize(function(){
      var tabletImage = $(".someDiv img").attr("data-tablet");
      var mobileImage = $(".someDiv img").attr("data-mobile");
      var defaultImage = "defaultImagePath"; //default image source
      var screenWidth = $(window).width();
      if(screenWidth <= 480 ) { //for smaller screens
         defaultImage = mobileImage;
      }else if(screenWidth <= 768){ //for larger screens
         defaultImage = tabletImage;
      } //default image will be used if none of the conditions are met.
});

Answer 10

Always prioritize the validation for tablet when dealing with different screen sizes, as 480 < 768

Make sure to adjust your conditions accordingly:

$(window).resize(function(){
      var tabletImage = $(".someDiv img").attr("data-tablet");
      var mobileImage = $(".someDiv img").attr("data-mobile");
      var defaultImage = "defaultImagePath"; //default image source
      var screenWidth = $(window).width();
      if(screenWidth <= 480 ) { //for smaller screens
         defaultImage = mobileImage;
      }else if(screenWidth <= 768){ //for larger screens
         defaultImage = tabletImage;
      } //default image will be used if none of the conditions are met.
});

Answer 11

Answer №6

Consider implementing this solution:

$(window).resize(function(){

var actualImage =  $(".carousel-main img").attr();
var tabletSource = $(".carousel-main img").data("tablet"); //prefer using .data over attr
var mobileSource = $(".main-carousel img").data("mobile");

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

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

});

Answer 12

Consider implementing this solution:

$(window).resize(function(){

var actualImage =  $(".carousel-main img").attr();
var tabletSource = $(".carousel-main img").data("tablet"); //prefer using .data over attr
var mobileSource = $(".main-carousel img").data("mobile");

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

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

});

Swap the image source with a different image attribute when making the website responsive

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

The custom CSS file is not being recognized

JQuery Mobile: Adding fresh, dynamic content - CSS fails to take effect

The issue with Ionic 2 arises when attempting to use this.nav.push() because it

Getting the nth-child rule for CSS in IE9 to function properly in IE8

Search MongoDB to find, update, and validate any empty fields in the body

Refresh the Document Object Model (DOM) and transmit the present time

Guide on adding dual horizontal scroll bars to a v-data-table (Vue / vuetify)

Importing JSON Data into an HTML File

The fixed div with the z-index at the top isn't functioning properly

Can you customize the buttons in the operation panel of an antd image preview window?

The line directly following the first line within the <li> element is located in the same position

Is it possible for me to create a Pomodoro clock similar to this one?

What is the most efficient way to find the parent element with the fewest children?

How to vertically align content using Zurb Foundation's equalizer feature?

Is it possible to utilize the WebGL camera in order to create dynamic transitions between various polygons?

What are the steps to modify the placeholder of the formik <Field/> component?

Using AJAX to dynamically load content in HTML

Creating a fixed sidebar that remains visible while scrolling in Next.js

Angular 2 keypress validation: Ensuring data integrity through real-time input verification

The use of special characters in jQuery for specific selectors