Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Aug 2002
    Location
    San Francisco
    Posts
    455
    Thanks
    19
    Thanked 15 Times in 15 Posts

    add _m to images if on a small device

    I would like to add an _m to my images if the device width drops below 480px. Here's a far as I've gotten:
    Code:
    	  if (screen.width < 480 || window.innerWidth < 480) {
    		$('.swappable img').each(function () {
    			var imgSrc = $(this).attr('src');
    			$(this).attr('src', imgSrc.replace(".jpg", "_m.jpg");
    		});
    It doesn't work. How do I get it to work?
    Outside of a dog, a book is man's best friend. Inside of a dog it's too dark to read. Groucho Marx

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    Shouldn't $('.swappable img') be $(' img.swappable')??
    Evolution - The non-random survival of random variants.

  • #3
    Regular Coder
    Join Date
    Aug 2002
    Location
    San Francisco
    Posts
    455
    Thanks
    19
    Thanked 15 Times in 15 Posts
    sunfighter, no, because the image is inside a div named "swappable."
    Outside of a dog, a book is man's best friend. Inside of a dog it's too dark to read. Groucho Marx

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,184
    Thanks
    10
    Thanked 569 Times in 550 Posts
    which part doesn't work? try running the re-sizing without the conditional.
    try the conditional with an alert to see if it's triggering. try appending a title onto the images instead of swapping the src. in short, be a detective and isolate variables until you find the crucial missing link.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/1/19) IE7:0.2, IE8:6.7, IE11:7.4, IE9:3.8, IE10:4.4, FF:18.3, CH:43.6, SF:7.8, MOBILE:27.5

  • #5
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    Quote Originally Posted by marilynn.fowler View Post
    I would like to add an _m to my images if the device width drops below 480px. Here's a far as I've gotten:
    Code:
    	  if (screen.width < 480 || window.innerWidth < 480) {
    		$('.swappable img').each(function () {
    			var imgSrc = $(this).attr('src');
    			$(this).attr('src', imgSrc.replace(".jpg", "_m.jpg");
    		});
    It doesn't work. How do I get it to work?
    doesnt work when? If its in your head section its need to be in a dom ready block, or move it to the bottom of the page, then it should work on page load. if you want it to fire when someone resizes the window, use

    Code:
    $(window).resize(function() {
      //do stuff
    });

  • #6
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,899
    Thanks
    15
    Thanked 226 Times in 226 Posts
    I think change this line $(this).attr('src', imgSrc.replace(".jpg", "_m.jpg");
    to this imgSrc = imgSrc.replace(".jpg", "_m.jpg");
    because you're using imgSrc, not $(this).attr('src');
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #7
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    It looks to me like you're merely missing a closing bracket on .attr() here:

    Code:
    if (screen.width < 480 || window.innerWidth < 480) {
    		$('.swappable img').each(function () {
    			var imgSrc = $(this).attr('src');
    			$(this).attr('src', imgSrc.replace(".jpg", "_m.jpg"));
    		});
    }
    Curious why you'd want to do this though...
    Last edited by SB65; 09-14-2013 at 01:46 PM.
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •