Dynamically set all images (with same class) different src, width and height

Question

I have a bunch of empty images that i need to set the src and positioning dynamically. All images have the same class but they will have different src, widths and height.

The values for src, width and height are stored as properties in objects that are named to match the id. In my setImage function I try and get them with id.width etc but they come up as undefined. How can i solve this?

jsfiddle here:

http://jsfiddle.net/nNh2n/2/

html:

<div class="img-holder">
    <img class="imgs" id="img_11" />
</div>
<div class="img-holder">
    <img class="imgs" id="img_12" />
</div>
<div class="img-holder">
    <img class="imgs" id="img_13" />
</div>

javascript:

var img_11 = {
    src: "http://lorempixel.com/output/animals-q-c-640-480-2.jpg",
    width: 60,
    height: 60
};
var img_12 = {
    src: "http://lorempixel.com/output/sports-q-c-640-480-4.jpg",
    width: 50,
    height: 50
};
var img_13 = {
    src: "http://lorempixel.com/output/people-q-c-640-480-2.jpg",
    width: 100,
    height: 100
};

function setImage(id) {
    jQuery('#'+id).attr('src', id.src);
    jQuery('#'+id).css({width: id.width});
    jQuery('#'+id).css({height: id.height});
}

jQuery(document).ready(function () {

    jQuery('.imgs').each(function () {
        setImage(this.id);
    });

});

ps. apologies if this is setup not very well and I welcome any improvements that can be made as I am still quite new on javascript and jquery.

K K · Accepted Answer · 2014-06-17 14:25:45Z

1

Why not simply put them in an object and then access the properties:

var obj = {
    'img_11': {
        src: "http://lorempixel.com/output/animals-q-c-640-480-2.jpg",
        width: 60,
        height: 60
    },
        'img_12': {
        src: "http://lorempixel.com/output/sports-q-c-640-480-4.jpg",
        width: 50,
        height: 50
    },
        'img_13': {
        src: "http://lorempixel.com/output/people-q-c-640-480-2.jpg",
        width: 100,
        height: 100
    },
}

function setImage(id) {
     jQuery('#' + id).attr('src', obj[id].src);
     jQuery('#' + id).css({
          width: obj[id].width,
          height: obj[id].height
      });
}

jQuery(document).ready(function () {
    jQuery('.imgs').each(function () {
        setImage(this.id);
    });
});

Demo: http://jsfiddle.net/lotusgodkk/nNh2n/3/

answered Jun 17, 2014 at 14:25

K K

18.2k4 gold badges33 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

pmandell · Accepted Answer · 2014-06-17 14:23:46Z

I would use an array of objects, making the image id another property of the object. See a working fiddle here.

var images = [{
    id: 'img_11',
    src: "http://lorempixel.com/output/animals-q-c-640-480-2.jpg",
    width: 60,
    height: 60
}, {
    id: 'img_12',
    src: "http://lorempixel.com/output/sports-q-c-640-480-4.jpg",
    width: 50,
    height: 50
}, {
    id: 'img_13',
    src: "http://lorempixel.com/output/people-q-c-640-480-2.jpg",
    width: 100,
    height: 100
}];

function setImage(image) {
    jQuery('#'+image.id).attr('src', image.src);
    jQuery('#'+image.id).css({width: image.width});
    jQuery('#'+image.id).css({height: image.height});
}

jQuery(document).ready(function () {
    for ( var i = 0; i < images.length; i++ ) {
        setImage(images[i]);
    }
});

Collectives™ on Stack Overflow

Dynamically set all images (with same class) different src, width and height

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related