BlackFire BlackFire - 6 months ago 8
jQuery Question

Adding horizontal overflow:auto to all images which are wider than 500px

using jquery i am trying to add css overflow:auto to all images which are wider than 500px but the code is not working, anyone know where is the problem? am i doing something wrong?

.bigimg{ overflow:auto; }

<img src="http://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/frontier_macsj0717.jpg?itok=V4q9UgHD">
<img src="http://wowslider.com/sliders/demo-85/data1/images/southtyrol350698.jpg">

$(document).ready(function() {

$('img').each(function() {
var width = $(this).width();
if (width > 400) {
$(this).wrap("<div class='bigimg'></div>");
}
})

});


EDIT:

I SOLVED IT ON MY OWN:
FIDDLE:https://jsfiddle.net/xtudgz4c/1/

SCRIPT FOR WEBSITE:

$(window).on("load resize",function(e){
$("img").each(function() {
if ($(this).width() > 500) {
$(this).wrap("<div class='bigimg'></div>");
}
});
});


Is there any jquery selector which automatically selects greater than *px images?

Answer

Please check below updated codeon Fiddle

$(document).ready(function() {
$("img").each(function() {
    if($(this).width() > 500){
        $(this ).wrap( "<div class='bigimg'></div>" );
    }
    });
});
Comments