jQuery Set Image Margins Based on Float Alignment Style

by echobitz 13. February 2013 05:12

I like to have my images aligned with my text margins and the text wrapped nicely along side with a generous gap. Most blog software uses some form of inserting images and then allowing you to float it right or left. But there isn't a margin setting that I have ever seen. Well if I float my image right I want to have no margin on the right and a margin on the left to keep the text away and vice versa when floating left. You can usually set the the alignment with the online editors but not the margins without going into the source.

So what we want to do is look at our image alignment and set a class based on that alignment. I had a look around the net and couldn't find any code to do it, so I wrote a couple lines. It's a simple piece of code that some might find handy. 


The idea is to go through images in our target div and add a class based on whether they are floated to the left or right. We narrow down the scope of the jQuery function as we don't want it formatting every image on the site, just the ones in the blog posts. First we have to check and make sure our image has a style attribute by making sure it's not undefined. Next we make it lower case (IE sends back float in all caps) and strip off any semicolons before matching. If any other styles are added inline with the float style the script will miss and not add the class, which is probably what we would want anyway. It could have also been written with a replace function or a couple of other ways that may be faster and fewer lines, but here is my version.  

 

HTML Code:

<div class="text">
	<p>
	<img alt="" src="http://www.echobits.com/images/buggy400.png" style="float: right;" />The 
	text aligned to the top and side of the image. </p>
</div>

 

jQuery Javascript:

$('.text img').each(function () {  
	    if ($(this).attr('style') != undefined) {
			var isStyled = $(this).attr('style');       
			isStyled = isStyled.toLowerCase();
		    var chkr = isStyled.slice(isStyled.length-1,isStyled.length)
		    
		    if (chkr == ";") {
				isStyled = isStyled.slice(0,isStyled.length-1);
			}        
		    if (isStyled == "float: left") {
		    	$(this).addClass('imgisleft');
		    }
		    if (isStyled == "float: right") {
		        $(this).addClass('imgisright');
		    }
		}
    });

 

The styles can be moved around differently and you can add your borders, shadows, padding and even the size if you want. These are the styles I use on this site. I give all the images in the div with the class of text a general style and the jQuery adds the other classes to my matching images.  

The CSS style sheet formatting:

.text img {
	margin:4px 8px 10px 8px;
	padding: 20px;
	border: 1px solid #131212;
	border-radius: .4em;
	-moz-border-radius: .4em;
	-webkit-border-radius: .4em;
	box-shadow: inset 0 0 15px #000000,0px 0px 22px 2px #000000,inset 2px 2px 12px 1px rgba(0, 0, 0, .4);
	-moz-box-shadow: inset 0 0 15px #000000,0px 0px 22px 2px #000000,inset 2px 2px 12px 1px rgba(0, 0, 0, .4);
	-webkit-box-shadow: inset 0 0 15px #000000,0px 0px 22px 2px #000000,inset 2px 2px 12px 1px rgba(0, 0, 0, .4);
	background-image: url('img/wood-grain.jpg');
	background-attachment: fixed;
	background-repeat: repeat-x;
	background-position: center center;
}
.text .imgisright {
	margin-left: 30px;
	margin-right: 0px;
}
.text .imgisleft {
	margin-right: 30px;
	margin-left: 0px;
}

Add comment

biuquote
  • Comment
  • Preview
Loading