Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 

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

About

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

Resources

License

Packages

No packages published
You can’t perform that action at this time.