https://github.com/tea3/hexo-tag-twentytwenty
Hexo tag to embed Image Comparison Slider Scripts. Image Comparison Slider depend on jQuery Twenty Twenty plugin.
https://github.com/tea3/hexo-tag-twentytwenty
comparison hexo hexo-tag image jquery
Last synced: 8 days ago
JSON representation
Hexo tag to embed Image Comparison Slider Scripts. Image Comparison Slider depend on jQuery Twenty Twenty plugin.
- Host: GitHub
- URL: https://github.com/tea3/hexo-tag-twentytwenty
- Owner: tea3
- License: mit
- Created: 2016-09-16T10:19:45.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2019-03-18T01:01:06.000Z (over 7 years ago)
- Last Synced: 2025-10-03T06:52:42.836Z (9 months ago)
- Topics: comparison, hexo, hexo-tag, image, jquery
- Language: JavaScript
- Size: 5.86 KB
- Stars: 12
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# hexo-tag-twentytwenty
Hexo tag to embed Image Comparison Slider Scripts. Image Comparison Slider depend on JQuery Twenty Twenty plugin.
## Introduction
[Hexo](https://hexo.io/) tag to embed Image Comparison Slider Scripts. Image Comparison Slider depend on [JQuery Twenty Twenty](https://github.com/zurb/twentytwenty) plugin.
## DEMO
[https://photo-tea.com/p/hexo-tag-twentytwenty/](https://photo-tea.com/p/hexo-tag-twentytwenty/)
## Installation
```
npm install hexo-tag-twentytwenty --save
```
## Usage
Create Embedded twentytwenty with following syntax:
```
{% twtw before-image after-iamge [width] [height] %}
```
### Example 1 :
```
{% twtw before.jpg after.jpg %}
```
Will output the HTML:
```
```
### Example 2 :
if you want to set `width` and `height`.
```
{% twtw before.jpg after.jpg 800 600 %}
```
Will output the HTML:
```
```
## option
You can configure this plugin in `_config.yml`. The options are as follows .
| option | description | default |
| :--- | :--- | :--- |
| class| class name of div | `none` |
| imgClass| class name of img | `none` |
| embedAsset | if you want to read external file , please add asset file path. This actually need jQuery as a dependency.| `none` |
Example:
```
twentytwenty:
class:
- twentytwenty-container
- embeded-twentytwenty
imgClass:
- photo
- round
embedAsset:
- https://cdnjs.cloudflare.com/ajax/libs/mhayes-twentytwenty/1.0.0/css/twentytwenty.min.css
- https://cdnjs.cloudflare.com/ajax/libs/mhayes-twentytwenty/1.0.0/js/jquery.event.move.min.js
- https://cdnjs.cloudflare.com/ajax/libs/mhayes-twentytwenty/1.0.0/js/jquery.twentytwenty.min.js
- /js/twentytwenty.js
```
For example , `/js/twentytwenty.js` is as follows .
```
(function(){
$(document).ready(
function() {
initialize_twentytwenty();
}
);
function initialize_twentytwenty(){
if($(".twentytwenty-container").twentytwenty){
$(".twentytwenty-container").twentytwenty();
}else{
setTimeout(function(){
initialize_twentytwenty();
},250);
}
}
})();
```
## License
MIT
Hexo - [https://hexo.io/](https://hexo.io/)
JQuery Twenty Twenty - [https://github.com/zurb/twentytwenty](https://github.com/zurb/twentytwenty)