Using jQuery change a folder path in Image URL when device width is greater than 768

I have an link with image like below

<a ontouchstart="" href="/product-code.html"><img class="aImage" src="images/T/product-image.jpg" alt="product name" /></a>

when the device width is greater than 768px I would like to change the image path by replacing the folder T with P so the new image src will be

<img class="big-img" src="images/P/product-image.jpg" alt="product name" />

I tired using this code but its giving me undefined replace error. Also this does not check for the device width

	<script type="text/javascript">
      $(document).ready(function(){
	    $('.aImage').attr('src',$(this).attr('src').replace('T','P'));
	   });
	 </script>

Open in new window



Thanks and appreciate it
LVL 2
niceoneishereAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

hieloCommented:
>> its giving me undefined replace error
that's because of $(this).  In that context, this is not a reference to the <img>.

If your have multiple images use:
	   $('img.aImage').each(function(){
	   		$(this).attr('src', $(this).attr('src').replace('/T/','/P/') )
	   });
  

Open in new window


If you only want to do this on a single image use:
	   $('img.aImage:eq(0)').attr('src', $('img.aImage:eq(0)').replace('/T/','/P/') )

Open in new window


but change the zero to <img> number as it appears in the document.  The first image would be index 0, the second is index 1, etc.
RobOwner (Aidellio)Commented:
You could also just do this with css, which would involve adding both versions of the image.  I understand if this isn't feasible, but just wanted to show you it's possible

markup:
<img class="big-img" src="images/P/product-image.jpg" alt="product name" />
<img class="small-img" src="images/T/product-image.jpg" alt="product name" />

Open in new window


css:
@media screen and (min-width: 768px) {
    .small-img {
        display: none;
    }
    .big-img {
        display: block;
    }
}
@media screen and (max-width: 768px) {
    .small-img {
        display: block;
    }
    .big-img {
        display: none;
    }
}

Open in new window

RobOwner (Aidellio)Commented:
Also make sure you've got these <meta> tags:

 <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

Open in new window

niceoneishereAuthor Commented:
Thanks guys appreciate it.

Rob I know I can use media queries but I don't want to load 2 different size images and increase the page load.

Hielo, Thanks for correcting the code I am still stuck at how to check the screen size when the window is resized so I can use the code only when the device width size is greater than 768px

Thanks again
hieloCommented:
Try:
$(document).ready(function() {
     $(window).resize( function(){
          var viewportWidth = $(window).width();

          // var viewportHeight = $(window).height();

          if( viewPortWidth > 768 )
          {
                  $('img.aImage').each(function(){
	   		$(this).attr('src', $(this).attr('src').replace('/T/','/P/') )
	         });
          }
    });
});

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.