开通博客赚积分
发布资源赚积分
分类

源码开发语言/平台
flickGal
文件大小： unknow
源码售价： 5 个金币 积分规则     积分充值
充值1元得10金币   
资源说明：A light weight jQuery plugin for a flick gallery in smart phone.
# flickGal
![flickGal](https://raw.github.com/piglovesyou/flickGal/master/src/title.png)

A light weight jQuery plugin to implement flick gallery for smart phone.

## Features
Main features of this plugin are:
- Light weight. (3.4k)
- Designer friendly. (HTML based)

This plugin __cannot__ do:
- Vertical flick scroll (who ever wants?)
- Auto scrolling with timer. This will need a lot of options that I don't like.

## Demo

Here is a quick demo.

http://stakam.net/jquery/flickgal/demo

Tested on iOS Safari and Android 4.0. PC browsers? Yeah. IE? Na.


## Download
[Right click on this link](https://raw.github.com/piglovesyou/flickGal/master/jquery.flickgal.min.js) or you can just clone this project.


## How to use
Only 3 steps!
### 1. Build HTML like below.
```html



  

    

      

      

      

    

  


  

    
  


  

    Previous
    Next
  




```

### 2. Write CSS.
```css
.yourElement .item { width: 200px } /* This is required if you have  element in .item element. */
.yourElement .moving {
  /* You can change transition-duration of course. */
  transition: transform .2s ease-out;
  -webkit-transition: -webkit-transform .2s ease-out;
  -moz-transition: -moz-transform .2s ease-out;
}
```

### 3. Include javascripts and run.
```html



```

## Available options
```javascript
$(function(){
  $(".yourElement").flickGal({
    infinitCarousel : false,
    lockScroll      : true
  });
});
```
| Options | Default value | Description |
| ------------ | ------------- | ------------ |
| infinitCarousel | false  | If true and you have prev/next elements, the last item slides to the first item and vise versa.  |
| lockScroll | true  | Lock horizontal scroll while sliding. If you have large images in .item element, you may want this fasle. |


## Advanced use
FlickGal provides 3 custom events.
```javascript
$(function(){
  $(".yourElement").flickGal()
    .on('fg_flickstart', function (e, index) {
      // Emitted when a user starts flicking.

    }).on('fg_flickend', function (e, index) {
      // Emitted when a user ends flicking.

    }).on('fg_change', function (e, index) {
      // Emitted when the item on center changed.
    });
});
```


## Lisence
```
Copyright (c) 2012 Soichi Takamura (http://stakam.net/)
Dual licensed under the MIT and GPL licenses:
 http://www.opensource.org/licenses/mit-license.php
 http://www.gnu.org/licenses/gpl.html
```

部分文件列表（点击文件名可查看文件内容）
本源码包内暂不包含可直接显示的源代码文件，请下载源码包。