A 'Google Image Search style' image alignment jQuery plugin.
JavaScript
Latest commit f00a557 Feb 3, 2012 @ben-lin ben-lin align package.json
Permalink
Failed to load latest commit information.
.gitignore
CHANGELOG.md
LICENSE.txt
README.md
demo.html
jquery.atteeeeention.js
jquery.atteeeeention.min.js
package.json

README.md

jQuery Atteeeeention Plugin

A 'Google Image Search style' image alignment jQuery plugin.

Description

If you have a image gallery with different width and height for each image, your page may look messy. Use this plugin to align your gallery with a 'Google Image Search' style result.

Demo

  • Please see demo.html
  • Live demo please take a look at this

Documentation

  • There is a syntax highlight version, please see this post
  • For chinese version please go here

Requires

  • jQuery 1.2.6+

Browser Compatibility

Installation

  • First, make sure you are using valid DOCTYPE
  • Include nessesary JS files
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
  <script type="text/javascript" src="path-to-file/jquery.atteeeeention.js"></script>
  • Add these css styles to your stylesheet
.clearfix:after{
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix{
  display: inline-block;
}
* html .clearfix{
  height: 1%;
}
.clearfix{
  display: block;
}

Options

margin

  • description: space between images( margin-right and margin-bottom )
  • data type: integer
  • default value: 12
  • possible value: any integer
  • example code
$( '#gallery' ).atteeeeention({
  margin: 20
});

hideLastRow

  • description: sometimes the last row might not have enough images, if you want your gallery to look prettier you can set this option to true to hide the last row
  • data type: bool
  • default value: false
  • possible value: true, false
  • example code
$( '#gallery' ).atteeeeention({
  hideLastRow: true
});

HTML markup

example code

// this is the markup for $( '#gallery' ).atteeeeention();
<div id="gallery">
  <a href="/img/a.jpg">
    <img src="/img/a-thumb.jpg"/>
  </a>
  <a href="/img/a.jpg">
    <img src="/img/a-thumb.jpg"/>
  </a>
  <a href="/img/a.jpg">
    <img src="/img/a-thumb.jpg"/>
  </a>
  ....
</div>
  • 'div' can be replaced with 'ul', 'ol' or any other block element.
  • 'class' can be used instead of 'id'
  • 'a' can be replaced with 'div', 'span', or any other tag

License

The expandable plugin is licensed under the MIT License (LICENSE.txt).

Copyright (c) 2011 Ben Lin