flag Image Sizes

by jorgeluis

HTML

<ul class="thumbs">
    <li><a href="#"><img class="art" src="http://d3qcb5osaw6g5.cloudfront.net/i/f/s/030929.jpg" alt=""></a>
    </li>
    <li><a href="#"><img class="art" src="http://d3qcb5osaw6g5.cloudfront.net/i/f/s/6000074332.jpg" alt=""></a>
    </li>
    <li><a href="#"><img class="art" src="http://d3qcb5osaw6g5.cloudfront.net/i/f/s/6000075956.jpg" alt=""></a>
    </li>
    <li><a href="#"><img class="art" src="http://d3qcb5osaw6g5.cloudfront.net/i/f/s/031570.jpg" alt=""></a>
    </li>
    <li><a href="#"><img class="art" src="http://d3qcb5osaw6g5.cloudfront.net/i/f/s/030589.jpg" alt=""></a>
    </li>
    <li><a href="#"><img class="art" src="http://d3qcb5osaw6g5.cloudfront.net/i/f/s/111272.jpg" alt=""></a>
    </li>
    <li><a href="#"><img class="art" src="http://d3qcb5osaw6g5.cloudfront.net/i/f/s/031297.jpg" alt=""></a>
    </li>
    <li><a href="#"><img class="art" src="http://d3qcb5osaw6g5.cloudfront.net/i/f/s/6000050641.jpg" alt=""></a>
    </li>
    <li><a href="#"><img class="art" src="http://d3qcb5osaw6g5.cloudfront.net/i/f/s/030903.jpg" alt=""></a>
    </li>
    <li><a href="#"><img class="art" src="http://d3qcb5osaw6g5.cloudfront.net/i/f/s/6000058092.jpg" alt=""></a>
    </li>
    <li><a href="#"><img class="art" src="http://d3qcb5osaw6g5.cloudfront.net/i/f/s/6000028626.jpg" alt=""></a>
    </li>
    <li><a href="#"><img class="art" src="http://d3qcb5osaw6g5.cloudfront.net/i/f/s/030436.jpg" alt=""></a>
    </li>
    <li><a href="#"><img class="art" src="http://d3qcb5osaw6g5.cloudfront.net/i/f/s/6000035169.jpg" alt=""></a>
    </li>
    <li><a href="#"><img class="art" src="http://d3qcb5osaw6g5.cloudfront.net/i/f/s/030577.jpg" alt=""></a>
    </li>
    <li><a href="#"><img class="art" src="http://d3qcb5osaw6g5.cloudfront.net/i/f/s/6000008119.jpg" alt=""></a>
    </li>
    <li><a href="#"><img class="art" src="http://d3qcb5osaw6g5.cloudfront.net/i/f/s/030935.jpg" alt=""></a>
    </li>
    <li><a href="#"><img class="art"...

CSS

ul {
    list-style:none;
}
li {
    position: relative;
    float:left;
}
img {
    display:block;
}
.flag {
    display: block;
    position: absolute;
    background: red;
    color: white;
    left: 10px;
    top: 10px;
}

JavaScript

$.fn.flagMovImgs = function () {
    $(this).find(".art").each(function () {
        var $this = $(this);
        $this.load(function () {
            var w = $this.width();
            var h = $this.height();
            var mult = h / w;
            if (mult != 1.5) {
                $this.after("<em class='flag'>" + mult + "</em>");
            }
        });
    });
};

$(".thumbs").flagMovImgs();