CODEWITHSUNDEEP
jqueryiphonejquery-mobiletablet
Ian Vink
Ian Vink

Reputation: 68770

jQuery Mobile: Conditional Image Sizes (Phone/Tablet)

Our jQuery Mobile based site will be used by large screen tablets and phones.

Some of the images we'd like to have smaller when used on a phone.

For example, 

myImage_large.png
myImage_small.png

Is there a way using a data-tag or some other jQuery-mobile method to specify in an img tag that on smaller devices the smaller image should be used.

Upvotes: 1

Views: 3707

Answers (3)

talsibony
talsibony

Reputation: 8756

if you really want it to responds you have to add event of resizing in tablet and smartphones rotating the device will be resize, so you should use resize event to trigger the changes here is an example of what I did:

function responsiveImage(hi_res) {
    if (hi_res) {
        $('img[data-src-hi]').each(function (index, element) {
            $(this).attr("src",$(this).attr('data-src-hi'));
        });
    } else {
        //output lo-res images
        $('img[data-src-lo]').each(function (index, element) {
            $(this).attr("src",$(this).attr('data-src-lo'));
        });
    }  
}



$(function(){
    var hi_res = false;
    var max_width = 480;

    if($(window).width()>max_width){
        hi_res = true;
    }
    responsiveImage(hi_res);

    $(window).resize(function() {
        if($(window).width()>max_width){
            hi_res = true;
        }else{
            hi_res = false;
        }
        responsiveImage(hi_res);
    });

});

use this html

<img data-src-hi="/media/img/large_img.png" data-src-lo="/media/img/small_img.png" src="" />

Upvotes: 0

Jasper
Jasper

Reputation: 76003

If you use block elements with background-images you can specify in CSS the source of the image, which allows you to create a media query that only loads the proper image. Most mobile browsers support media queries so it's a good idea to start with the hi-res as default and then use a media query to change the background-image source to lo-res:

/*set source for hi-res images here (default)*/
#image-1 {
    position : relative;
    width    : ...px;
    height   : ...px;
    display  : inline-block;
    background-image : url(/images/this-image-hi.jpg);
} 
@media all and (max-width:480px) {
    /*set source for lo-res images here*/
    #image-1 {
        background-image : url(/images/this-image-lo.jpg);
    }
}

Then your image tag would be changed to be something like:

<div id="image-1"></div>

You could also set all the images source attributes to a blank pixel and then have a JavaScript function change their source on document.ready:

$(function () {
    if (HI-RES) {
        $('img[data-src-hi]').each(function (index, element) {
            this.src = $(this).attr('data-src-hi');
        });
    } else {
        //output lo-res images
        $('img[data-src-lo]').each(function (index, element) {
            this.src = $(this).attr('data-src-lo');
        });
    }
});

This requires your image tags to look like this:

<img src="/images/blank-pixel.png" width="xx" height="xx" data-src-hi="/images/this-image-hi.jpg" data-src-lo="/images/this-image-lo.jpg" />

Upvotes: 4

scurker
scurker

Reputation: 4753

Responsive images [https://github.com/filamentgroup/Responsive-Images] looks like it might be pretty close to what you're looking for. It's not necessarily jQuery/mobile specific but it does load different sizes based on the screen resolution.

Upvotes: 0

Related Questions