jQuery Plugin To Arrange Images In Magazine-like Layout

Image Auto Place is a jQuery web typography plugin that displays your images of an article in magazine-like layout. With this plugin, the images will be auto arranged and pushed to the left or right in sequence using CSS float property, allowing your text to wrap around them. For instance, the first image will be placed on the left side, the second on the right, the third on left, and so on.

How to use it:

1. Wrap your images and text into a container.

<div id="content">
  <img src="1.jpg">
  <img src="2.jpg">
  <img src="3.jpg">

  Your text goes here

</div>

2. Load jQuery library and the jQuery Image Auto Place plugin at the bottom of the web page.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="jquery-image-auto-place.min.js"></script>

3. Call the function on the container element to initialize the plugin. It's very important to use window.load in order to wait all images to load before the plugin starts.

$(window).load(function() {
  $('#content').imageAutoPlace();
});

4. All the default options.

// Image padding
padding: 10,

// Minimum vertical space (px) btween images.
offset: 200,

// Minimum vertical space (px) before first image.
initialOffset: 0,

// Image selector. Ex: use 'img.foo' to only auto place 
// imgs containing class foo.
imgSelector: 'img',

// Ex: 'p'. Images will be placed btween chunks. 
// If set to empty, the element content will be converted to 
// pure text (tags will be removed) and each word will be a chunk.
chunkSelector: '',

// Images will be placed in this order.
// To only use left and rightimages, 
// use ['left', 'right'].
loopPattern: ['center', 'left', 'right']

Change log:

2015-03-20

• Fix last image issue.

---

This awesome jQuery plugin is developed by eduardomb. For more Advanced Usages, please check the demo page or visit the official website.