CODEWITHSUNDEEP
jqueryimagepathwindowwidth
Mitchell Layzell
Mitchell Layzell

Reputation: 3058

How to change an image path based on screen width?

I'm trying to change the folder that my images are read from depending on the window width.

I have two folders that contain the different image sizes and I'm wondering if anyone could give me any advice on how to change the path depending on the screens width.

If the screen is regular the <img> would look like

<img src="images/620x410/image1.jpg" alt="">

and If the screen was in the tablet width it would load

<img src="images/310x205/images1.jpg" alt="">

310X205

image1.jpg
image2.jpg

620X410

image1.jpg
image2.jpg

Upvotes: 17

Views: 39753

Answers (7)

Peter
Peter

Reputation: 1348

If you really want to have different images, so Nope option is the best. But in many cases you just want to have the same image in different size. So perhaps a "mixed" solution:

 @media screen and (max-width: 310px)
 {
 .yourClass_img1 {content:url("images/310x205/image1.jpg");}
 .img_list{width:100%;height:100%}
 }

 @media screen and (min-width: 620px) 
 {
 .yourClass_img1 {content:url("images/620x410/image1.jpg");}
 .img_list{width:60%;height:60%}
 }

With that, if some images need to be really different, the "content:url" will be effective, when the "width:height" will be good for images you just need to change the size.

Upvotes: 0

M61Vulcan
M61Vulcan

Reputation: 337

I achieved a similar effect using Bootstrap Responsive utilities visible-xs and hidden-xs. I needed to use a different image set in a carousel depending on the size of the browser window.

        <div class="carousel slide hidden-xs" id="site-banner-big"  data-ride="carousel">   <!-- only show this carousel on large screens -->
  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active"><center><img src="images/site-banner/large/image01.jpg" alt="Image"></center></div>
    <div class="item"><center><img src="images/site-banner/large/image02.jpg" alt="Image"></center></div>
    <div class="item"><center><img src="images/site-banner/large/image03.jpg" alt="Image"></center></div>
  </div><!-- end carousel-inner -->      
</div><!-- end site-banner-big -->

<div class="carousel slide visible-xs" id="site-banner-small"  data-ride="carousel">   <!-- only show this carousel on small screens -->
  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active"><center><img src="images/site-banner/small/image01.jpg" alt="Image"></center></div>
    <div class="item"><center><img src="images/site-banner/small/image02.jpg" alt="Image"></center></div>
    <div class="item"><center><img src="images/site-banner/small/image03.jpg" alt="Image"></center></div>
  </div><!-- end carousel-inner -->      
</div><!-- end site-banner-small -->

Upvotes: 4

ichtyo
ichtyo

Reputation: 11

I am trying to use the "image change path system" for different images inside the web page . The idea is instead of change the "background" image (so just a single image), i would like to change the images path depending on the screen orientation :

as for php 

$("#imageId").attr("src", "your new url here");

kind of this but dunno how

@media screen and (orientation: landscape) 
{
    .yourClass {
        content:url("images/landscape/");
    }
}

@media screen and (orientation: portrait) {
    .yourClass {
        content:url("images/portrait/");
    }
}

Upvotes: 1

webrama.pl
webrama.pl

Reputation: 1890

I don't think waiting for DOM Ready (jQuery's $(document).ready)) is a good idea in this case. Better use plain javascript:

if (screen.width < 620) {
    var imgs = document.getElementsByTagName("img");
    for (var i = 0; i < imgs.length; i++) 
    {
        imgs[i].src = imgs[i].src.replace("images/620x410/", "images/310x205/");
    }
}

Paste it at the bottom of your body tag.

Upvotes: 1

Nope
Nope

Reputation: 22339

If CSS using media queries is an option for you, you could use a CSS only solution.

Add the media queries to your CSS similar to the below:

@media screen and (max-width: 310px) {
  .yourClass {
    content:url("images/310x205/image1.jpg");
  }
}

@media screen and (min-width: 620px) {
  .yourClass {
    content:url("images/620x410/image1.jpg");
  }
}

Add the myClass to your effected image elements similar to the below:

<img class="yourClass">

You might need to tweak the values a little for your needs.

Upvotes: 32

chakroun yesser
chakroun yesser

Reputation: 1487

You Can use resize()

$(window).resize(function() {
if($(window).width() < 310 ) {
   $('img').attr('src','folder1'+filename);
}
if($(window).width() > 310 ) {
   $('img').attr('src','folder2'+filename);
}

});

Upvotes: 0

CodingIntrigue
CodingIntrigue

Reputation: 78535

You can use $(window).width(); to determine the size of the window, then set the src of the images accordingly:

$(function() {
  if($(window).width() <= 310) {
    $("img").each(function() {
      $(this).attr("src", $(this).attr("src").replace("images/620x410/", "images/310x205/"));
    });
  }
});

You should also note that if I start my browser window at a size of <= 310px, then resize it to above that, your images will still be the smaller version. You might want to consider using the resize event to combat that if required: http://api.jquery.com/resize/

Upvotes: 23

Related Questions