jQuery get all images within an element larger than a specific size

Question

So I have an image placeholder and I want to load the first image from the HTML within a DIV element that is larger than 70px width or height. Then provide a next and previous link to load the next image that is larger than 70px.

I know jQuery has a next & prev selector but I'm not sure how I would tie this in with next and previous links or specify an image size.

Answer 1

To get all images larger that some size you can use something like this:

var allImages = $('img', yourDivElement)

var largeImages = allImages.filter(function(){
  return ($(this).width() > 70) || ($(this).height() > 70)
})

To get the next/prev is not harder:

var nextElement = $(imgElement).nextAll().filter(function(){
  return ($(this).width() > 70) || ($(this).height() > 70)
}).eq(0);

Previous sample can be overkill if you have a lot of images, so you may want to loop over 'em instead in this way:

var nextElement, nextSilblings = $(imgElement).nextAll();

for (var i=0;i<nextSilblings.length;i++){
  if (($(nextSilblings[i]).width() > 70) || ($(nextSilblings[i]).height() > 70)){
    nextElement = nextSilblings[i];
    break;
  }
}