JS Image Detect Won't AddClass For Image If X = Width And X =height

I have the following script below. What is currently does, for each time the 'mobile-carousel-container' loads an 'item' it finds the div with the classname of 'item' --- if 'item

Solution 1:

It's only going to hit the 'active' photo because of line 8:

if ($(imgs).hasClass('active'))

It will only do it on the first load. You'll need something like an on click trigger if you want it to repeat and do it again on an event.

http://api.jquery.com/on/

Solution 2:

var imgs = $('.item');
  imgs.each(function() {
    if ($(imgs).hasClass('active')) {
      var img = $(this);

Here variable img is div.item, whose width will be by default, the width of the screen. If you want to get width of image, you will have to do:

      var img = $('img', this);

Also make sure images are loaded before you try to get the width and height of image. You can wrap the whole code inside $(window).load() to make sure your code is run after all images are completely loaded.

var dimensionsArray = ["300 x 250", "300 x 100", "300 x 50", 
                      "250 x 250", "729 x 90", "468 x 60","240 x 400", 
                      "180 x 150", "125 x 125", "234 x 60", "120 x 60"];
if (dimensionsArray.indexOf(img.width() +" x "+ img.height()) !== -1)
{
  img.addClass('top');
}

Solution 3:

Your comments do not describe, what your code actually does. Your first codeline, for instance,

// everytime this carousel loads do this            
$('.mobile-carousel-container').each(function() {

Does not happen every time the carousel loads. It happens once, when the page is loaded, and all it does is iterate through the images. Because of line 8:

if ($(imgs).hasClass('active')) {

... the only affected image will be the one image, that is active, when the page is loaded (as Spencer Rohan pointed out already). You need to learn, how .each() works: http://api.jquery.com/each/

EDIT: Also, the word 'load' might be misunderstood in your comments. Does the carousel really 'load' the images, when displaying them? Would be a little odd. If all the images are, indeed, 'loaded' at page load and the carousel simply gives them display:block and display:none (or something similar) when showing them, you could skip line 8 and apply the classes to all the images at page load.

Solution 4:

    $("#carousel-container-mobile, #carousel-container-desktop").on('slid.bs.carousel', function() {
      $('.item').each(function() {
          var img = $('img', this);
          if (img.width() == 320 && img.height() == 50 || // 300 x 250
            img.width() == 300 && img.height() == 100 || // 300 x 100
            img.width() == 300 && img.height() == 50 || // 300 x 50
            img.width() == 250 && img.height() == 250 || // 250 x 250
            img.width() == 728 && img.height() == 90 || // 729 x 90
            img.width() == 468 && img.height() == 60 || // 468 x 60
            img.width() == 240 && img.height() == 400 || // 240 x 400
            img.width() == 180 && img.height() == 150 || // 180 x 150
            img.width() == 125 && img.height() == 125 || // 125 x 125
            img.width() == 234 && img.height() == 60 || // 234 x 60
            img.width() == 120 && img.height() == 60) // 120 x 60
          {
            img.addClass('top');
          }
          if (img.width() == 930 && img.height() == 180 || // 930 x 180
            img.width() == 336 && img.height() == 280 || // 336 x 280
            img.width() == 234 && img.height() == 60) // 234 x 60
          {
            img.addClass('bottom');
          }
          if (img.width() == 300 && img.height() == 250) // 300 x 250
          {
            img.addClass('middle');
          }
          if (img.width() == 300 && img.height() == 250 || // 300 x 250
            img.width() == 120 && img.height() == 600 || // 120 x 600
            img.width() == 160 && img.height() == 600) // 600 x 160
          {
            img.addClass('right');
        }
      });

    });