CODEWITHSUNDEEP
jquery
agustd
agustd

Reputation: 21

Apply css to images based on width (jquery)

(Pertaining to Tumblr's photosets)

Photosets automatically resize images to the post (div) width, and this means that if the post div is 540px, then the photoset will automatically resize itself to fit that. The issue with this is that it resizes the smaller image types (it ranges from 540px, to 268px, and then 177~178px in size, but we're focusing on 268px) without considering the margin, which should be 4px. This means that where the 268px images should be 268px, they resize to around 270px. I found a temporary fix by setting the width of post divs to 536px instead, but that resized the largest images to be slightly smaller than I want, and I have yet to figure out to fix this.

Is there a way to use a jquery code to apply a max-width of 268px to anything that is 268px and smaller in photosets, but leave anything larger alone? I've tried a couple codes floating around, but I can't seem to get Tumblr to respond to them, so I'll post one of them here to see if I made a mistake. I can apply/modify the margin separately without the usage of jquery, so I already have that handled, I just need the images themselves to be resized properly. Thank you.

$(document).ready(function(){
    $('.posts img').each(function(){
        if($(this).width() > 268){
        $(this).css('max-width', '268px');}
    });
});

Upvotes: 0

Views: 49

Answers (1)

Carl Edwards
Carl Edwards

Reputation: 14474

Based on your comments it looks like you need to place your query.min.js above the rest of your scripts in order for jQuery to work properly:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script> 
<script src="http://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></s‌​cript>

And to find all images less than or equal to 268px try:

$(document).ready(function(){
    $('.posts img').each(function(){
      if ($(this).width() <= 268) {
        $(this).css('max-width', '268px');
      }
    });
});

Upvotes: 2

Related Questions