JS Image Align

Alternate image alignment within a div via jQuery

by mread1208

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div class="post-text">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dapibus pharetra massa, in maximus ipsum feugiat vitae. Cras vehicula efficitur iaculis. Maecenas nec gravida libero, non viverra lacus. Vestibulum maximus sodales quam vitae ultricies. Morbi sodales pellentesque vehicula. Suspendisse vitae dolor sed tortor pulvinar euismod. Curabitur posuere cursus molestie. Donec vitae nunc venenatis, mattis erat in, suscipit elit. Nunc ultricies odio nec nunc finibus molestie. Nulla rutrum tortor ut ex semper feugiat. Phasellus blandit, libero et volutpat venenatis, lacus diam ultrices mi, at pharetra mauris est rhoncus turpis. Sed sed felis ut dui sagittis blandit ut quis velit. Curabitur eget ullamcorper orci.</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse fermentum risus leo, sed interdum nibh cursus vel. &nbsp;<a href="#" rel="attachment wp-att-281"><img class="alignnone size-medium wp-image-281" src="http://placehold.it/300x202.jpg" ></a></p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dapibus pharetra massa, in maximus ipsum feugiat vitae. Cras vehicula efficitur iaculis. Maecenas nec gravida libero, non viverra lacus. Vestibulum maximus sodales quam vitae ultricies. Morbi sodales pellentesque vehicula. Suspendisse vitae dolor sed tortor pulvinar euismod. Curabitur posuere cursus molestie. Donec vitae nunc venenatis, mattis erat in, suscipit elit. Nunc ultricies odio nec nunc finibus molestie. Nulla rutrum tortor ut ex semper feugiat. Phasellus blandit, libero et volutpat venenatis, lacus diam ultrices mi, at pharetra mauris est rhoncus turpis. Sed sed felis ut dui sagittis blandit ut quis velit. Curabitur eget ullamcorper orci.</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse fermentum risus...

CSS

.alignright { float: right; }
.alignleft { float: left; }

JavaScript

$( document ).ready(function() {
	var imgCount = 0;
  $('.post-text img').each(function(){
  	$(this).removeClass('alignnone');
    // If the count is even, alignright, else align left
    if(imgCount%2 == 0){
      $(this).addClass('alignright');
    } else {
			$(this).addClass('alignleft');
    }
    imgCount++;
  });
});