jquery.atteeeeention
文件大小: unknow
源码售价: 5 个金币 积分规则     积分充值
资源说明:A 'Google Image Search style' image alignment jQuery plugin.
# 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](http://dreamerslab.com/demos/google-image-search-style-image-alignment-with-jquery-atteeeeention-plugin)



## Documentation
  - There is a syntax highlight version, please see [this post](http://dreamerslab.com/blog/en/google-image-search-style-image-alignment-with-jquery-atteeeeention-plugin/)
  - For chinese version please go [here](http://dreamerslab.com/blog/tw/google-image-search-style-image-alignment-with-jquery-atteeeeention-plugin/)



## Requires
  - jQuery 1.2.6+



## Browser Compatibility
  - [Firefox](http://mzl.la/RNaI) 2.0+
  - [Internet Explorer](http://bit.ly/9fMgIQ) 6+
  - [Safari](http://bit.ly/gMhzVR) 3+
  - [Opera](http://bit.ly/fWJzaC) 10.6+
  - [Chrome](http://bit.ly/ePHvYZ) 8+



## Installation
  - First, make sure you are using valid [DOCTYPE](http://bit.ly/hQK1Rk)
  - Include nessesary JS files



      
      

  - 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' 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](http://dreamerslab.com)

本源码包内暂不包含可直接显示的源代码文件,请下载源码包。