create an array of images by pulling them from html

Question

I have a table of images all with the class .pics and I want to use Javascript to pull the actual pictures from the HTML table and put them into an array.

After that I want to randomly select an image from the array and change its brightness level.

I tried doing this:

var allPics = [];

$(".pics").each (function (){ allPics.push (this); });

but no dice.

Thanks!

There are less-verbose ways to get that array, but this seems fine, if the HTML is just as described. Can you show (a) the HTML of some of the images and (b) how you're attempting to change the brightness, or whatever else is failing? As it is, there's no way to know what might be going wrong. — Paul Roub
– Paul Roub, Commented Aug 19, 2015 at 18:35
the this will be HTML Image Object Element and not jQuery object. While randomly selecting $(allPics[x]) will give you a jQuery equivalent if you are failing there... — Joy Biswas
– Joy Biswas, Commented Aug 19, 2015 at 18:40
@user47143 do you need more help? If my answer was helpful to you and answered your question, please don't forget to accept that answer. Also see What does it mean when an answer is "accepted"? and Why is voting important?. — Jonathan
– Jonathan, Commented Aug 23, 2015 at 20:35

Jonathan · Accepted Answer · 2015-08-28 23:25:34Z

1

First we initialise the array with var allPics = [];

Then traverse our HTML and load the array.

$('.pics .pic').each(function() {
    allPics.push(this);
});

Then generate a random index based on the size of the array.

var index = parseInt(Math.random()*allPics.length);

Then spew out the images stored in the array, using $(allPics[index]).prop('outerHTML') to convert the jQuery object to an HTML string.

$('.random').append(
    $(allPics[index]).prop('outerHTML')
);

The image brightness is adjusted in CSS with filter: brightness(.5), be sure to use at a minimum the -webkit- vendor prefix, as a lot of the major browsers at the moment require this at the moment.

Please see my fiddle for the working example.

edited Aug 28, 2015 at 23:25

answered Aug 19, 2015 at 20:37

Jonathan

11.6k9 gold badges70 silver badges85 bronze badges

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

Collectives™ on Stack Overflow

create an array of images by pulling them from html

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related