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.

What does "from the data within a DIV element" mean? Can you include your actual HTML? Where does the list of images come from? — jfriend00, Jan 19 '12 at 21:00
Please provide code example/context and I'll gladly help. Currently I have a hard time understanding exactly what you want done. Feel free to use jsfiddle.net if it's a lot of code. — Anders Arpi, Jan 19 '12 at 21:01
I don't have any code, I literally have HTML loaded into a DIV element and I want to create an image with next previous that scrolls through all the images within the DIV container larger than 70px in a loop. — Chris Dowdeswell, Jan 19 '12 at 21:16

Juicy Scripter · Accepted Answer · 2012-01-19T21:15:03.960

10

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;
  }
}

edited Jan 19 '12 at 21:15

answered Jan 19 '12 at 21:03

Juicy Scripter

25,778
6
72
93

He did ask for width OR height. ;) But +1 for writing what I was thinking he'll probably want. – Anders Arpi Jan 19 '12 at 21:09
Damn, no jquery selector? I guess this will do :) – gak Dec 06 '12 at 02:26
How could I automatically create a Gallery from those found pictures? see http://stackoverflow.com/questions/14811237/javascript-gallery-that-automatically-uses-all-large-images-on-page – rubo77 May 19 '13 at 07:31

score 4 · Answer 2 · answered Jan 19 '12 at 21:10

Do this in two steps:

1) tag the images that fit the criteria

$('#targetDiv img').each(function() {
      if($(this).height()>70) {
         $(this).addClass('biggie')
      }
})

2) Hook up navigation

var myPos = 0;

    $('#btnNext').click(function() {
        //copy this image to the placeholder 
        $('#placeholder').attr('src', $('#targetDiv .biggie').eq(myPos).attr('src'));
         myPos++;
         if(myPos>$('#targetDiv .biggie').length) {
            myPos = 0;
         }
    })

...do the save for the previous button, except decrement and change zero logic.

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

2 Answers2

Linked