Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wayou/SlipHover
apply direction aware animation to images caption
https://github.com/wayou/SlipHover
Last synced: about 1 month ago
JSON representation
apply direction aware animation to images caption
- Host: GitHub
- URL: https://github.com/wayou/SlipHover
- Owner: wayou
- License: mit
- Created: 2013-12-31T01:12:26.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2018-05-29T10:52:33.000Z (over 6 years ago)
- Last Synced: 2024-06-25T09:43:15.182Z (3 months ago)
- Language: JavaScript
- Homepage: http://wayou.github.io/SlipHover/
- Size: 8.31 MB
- Stars: 507
- Watchers: 46
- Forks: 158
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# SlipHover
SlipHover apply direction aware hover animation for the caption of an image.
## Index
* [Quick start](#quick-start)
* [Options](#options)
* [Demo](#demo)
* [Compatibility](#compatibility)
* [License](#license)
## Quick start
include the files
```html
```
call the the plugin on a container as your wish
```js
$("#container").sliphover();
```
All done!
## Options
you can custom the caption by passing options when call the plugin, all available options are listed below.
call the the plugin on a container wish you wish
```js
$("#container").sliphover({
option: value,
option2: value2,
...
});
```
| Option | type | default | Description | Example |
|-----------------|---------------|------------------|--------------------------------------------------|------------- |
| height | string | 100% | The height of the overlay. e.g.`200px`,`50%` | [view](http://wayou.github.io/SlipHover/target.html) |
| target | string | `'img'` | Specify witch element the overlay will aplly on. Any valid CSS selector will do.| [view](http://wayou.github.io/SlipHover/target.html) |
| caption | string | `'title'` | Witch attribute will be the content of the overlay. You can use custom HTML5 data attribute. e.g. `data-caption` | [view](http://wayou.github.io/SlipHover/caption.html) |
| duration | number/string | `'fast'` | How long will the animation will be in millisecond, `fast` equals to `200` and `slow` equals to `600`. You can give you own number. e.g.`500` | [view](http://wayou.github.io/SlipHover/duration.html) |
| fontColor | string | `'#fff'` | The color of the text within the overlay | [view](http://wayou.github.io/SlipHover/fontcolor.html) |
| backgroundColor | string | `'rgba(0,0,0,.5)'` | The background color of the overlay. Any valid CSS color value will do | [view](http://wayou.github.io/SlipHover/backgroundcolor.html) |
| backgroundColorAttr | string | `'data-background'` | Also you can specify individual color for each overlay via the `data-background` attribute like this `data-background="rgba(120,100,240,0.85)"` | [view](http://wayou.github.io/SlipHover/differentbackgrounds.html) |
| reverse | bool | false | Whether the animation direction is reversed | [view](http://wayou.github.io/SlipHover/reverse.html) |
| textAlign | string | `'center'` | The horizon align of the caption | [view](http://wayou.github.io/SlipHover/textalign.html) |
| verticalMiddle | bool | true | The vertical align of the caption | [view](http://wayou.github.io/SlipHover/textalign.html) |
| withLink | bool | true | if image is wraped with a link the overlay will be clickable, set false to disable click | [view](http://wayou.github.io/SlipHover/withlink.html) |
## Demo
Besides examples in the option table above, there are a few nice demos shows sliphover can work well with other image gallery plugins such as [Wookmark](http://www.wookmark.com/jquery-plugin), [freewall](http://vnjs.net/www/project/freewall/) and [isotope](http://isotope.metafizzy.co/).
* [working with wookmark](http://wayou.github.io/SlipHover/wookmark.html)
* [working with freewall](http://wayou.github.io/SlipHover/freewall.html)
## Compatibility
* Requirs jQuery 1.7+
* Works well with all modern browsers and IE9+.
## License
Licensed under the MIT License