CODEWITHSUNDEEP
javascripthtmlcss
Ian Shere
Ian Shere

Reputation: 1

Display different image on various devices

I'm using Joomla 3.3.4 FYI.

I have an image on the front page (http://www.ckdev.info/cdp) that's a call to action to complete a form for a free estimate. It's great in desktop or tablet (landscape) as the form appears to the right.

However, when viewed on other devices or orientations, the viewport is too small to have the sidebar showing on the right and it drops to the bottom. So the "right arrow" image doesn't make logical sense.

What I want to do is a bit of an "if-else" solution. If screen width is xx px or greater show "right-arrow.jpg", else "down-arrow.jpg". I will attach a anchor to the form so that clicking/touching down-arrow.jpg when displayed will scroll down to the form.

I'm afraid I'm no coder so, while I have no doubt this can be done, I have no clue how! Thanks.

Upvotes: 0

Views: 153

Answers (3)

Marcus Rommel
Marcus Rommel

Reputation: 1294

What you want is a CSS media query to change the displayed image.

For a smartphone like the iphone in portait it would be something like that:

@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) 

{ /* STYLES GO HERE */}

For more details take a look at:

w3schools

cssmediaqueries

Upvotes: 0

wolffer-east
wolffer-east

Reputation: 1069

You can make this happen using jQuery without anything extra as long as you don't mind some odities in the width of the window that come from the scrollbar. Ill get back to the scrollbar in a sec. To test the width you can use jQuery(window).width(). This will return the width of the window in pixels. Exactly what you are looking for. An example snippet:

jQuery(document).ready(function(){
  if (jQuery(window).width() > 1000){
    jQuery(<select img here>).attr('src', '/path/to/new/image.jpg');
  }
});

I notice that you dont have a class or id on the image you mentioned. I would suggest adding an id to make it easier to select. For example, <img src="/cdp/images/estimate.png" alt="Get a free interior or exterior painting estimate" id="estimate-with-arrow">. If you make this change you can swap out <select img here> for 'img#estimate-with-arrow' (this will select an the image with id estimate-with-arrow). And voila, image swap.

I will note three things. First, that this will only work on initial page load. If a user loads the page at full desktop width then shrinks it down, the image will not change when it passes the break point. You need to bind to the resize to get this to work: 

jQuery(window).resize(function() {
  <code here>
});

Second, I set up this particular code to swap out the image for any screen over 1000 px. This means you will only ever load one image for smaller devices, saving bandwidth. This is preferred, ad mobile plans are more finicky.

And third, the scrollbar. Testing the window width using jQuery will not match the same break point as css. I use modernizr to get around this. This is a bit more advanced though.

Upvotes: 0

Johan Karlsson
Johan Karlsson

Reputation: 6476

You can do it with css media-queries.

Try this: (change 900px and 899px to your desired values)

@media(min-width: 900px) {
    #img {
        width: 100%;
        height: 150px;
        background: url('http://www.ckdev.info/cdp/images/estimate.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }
}

@media(max-width: 899px) {
    #img {
        width: 100%;
        height: 100px;
        background: url('http://www.ckdev.info/cdp/images/estimate.png');/*change image url*/
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;        
    }
}

Check it out here: jsFiddle (resize result window width to more than 900px)

I've just made your image different size on different media queries, but instead change your background url to your desired image.

Upvotes: 2

Related Questions