jQuery image each loop issue [duplicate]

Question

I am currently looping through a set of images to check each image's width. If the image width is less than the image height, I want to add 'Class A' to that particular image, if not I want to add 'Class B' to that particular image.

I can get this to work, but it is quite temperamental. It usually works, but sometimes it adds 'Class B' to an image, when it should be adding 'Class A'. I've tried to also use boolean values to make sure each part of the function fires when it should, but I still get the same result. Any ideas what the problem might be?

Code below:

loadContent = function() {
        //set up ajax
        ajaxLoader.ajaxStart(function() {
            $(this).fadeIn(200);
        }).ajaxStop(function() {
            $(this).fadeOut(200);

        //load the content
        fixedWrap.load(postLink, function() {
            var loopingImages,
                slideImage = $('.ddbSlide img'),
                slideImageFirst = $('.ddbSlide img:first');

                //start the image loop
                slideImage.each(function() {
                var imgWidth = $(this).width(),
                    imgHeight = $(this).height();
                loopingImages = true;
                //
                if (imgWidth <= imgHeight) {
                    $(this).addClass('ddbImagePortrait');
                    $(this).css({ left: '55%' });
                    loopingImages = false;
                } else {
                    $(this).addClass('ddbImage');
                    $(this).css({ left: '34%' });
                    loopingImages = false;
                }
            });

            if (loopingImages == false) {
                var checkingClass;
                if (slideImageFirst.hasClass('ddbImagePortrait')) {
                    $('.articleTextWrap').css({ left: '20%' });
                    checkingClass = false;
                } else {
                    $('.articleTextWrap').css({ left: '5%' });
                    checkingClass = false;
                }
                if (checkingClass == false) {
                addSlider();
                }
            }

            return false;
        })
    }; //END loadContent function

The most likely problem is that you're trying to check image dimensions before the image has loaded completely. See for example stackoverflow.com/questions/9787511/… — JJJ
– JJJ, Commented Feb 11, 2013 at 11:06

Johan · Accepted Answer · 2013-02-11 11:08:12Z

1

Check width and height after the image is loaded:

slideImage.each(function() {

    $(this).load(function(){
        //image successfully loaded, do stuff here
        console.log($(this).height());
    }).error(function(){
        //something went wrong
    });

answered Feb 11, 2013 at 11:08

Johan

35.4k62 gold badges191 silver badges309 bronze badges

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

1 Comment

user1391152 Over a year ago

Worked like a charm! Thanks to everyone for their help and suggestions.

Rohan Kumar · Accepted Answer · 2013-02-11 11:19:57Z

0

Your code has 2 problems

First loopingImages alway false so try this for that,

loopingImages = true;
//
if (imgWidth <= imgHeight) {
    $(this).addClass('ddbImagePortrait');
    $(this).css({ left: '55%','position':'relative' });
} else {
    $(this).addClass('ddbImage');
    $(this).css({ left: '34%' ,'position':'relative'});
    loopingImages = false;
}

Second again checkingClass is always false for this try,

var checkingClass;
if (slideImageFirst.hasClass('ddbImagePortrait')) {
    $('.articleTextWrap').css({ left: '20%','position':'relative' });
    checkingClass = true;
} else {
    $('.articleTextWrap').css({ left: '5%' ,'position':'relative'});
    checkingClass = false;
}

answered Feb 11, 2013 at 11:19

Rohan Kumar

40.7k11 gold badges81 silver badges111 bronze badges

Collectives™ on Stack Overflow

jQuery image each loop issue [duplicate]

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related