Created: 2014-05-26 By: Dominik Weber Licensed under GPL Version 2.
jTinder is a javascript library that makes rating people, products, images very easy and fast. It is optimized for mobile touch device but has also a desktop fallback.
Add the css file before the HEAD tag:
<link rel="stylesheet" type="text/css" href="css/jTinder.css">
Add the following before the BODY tag in your html file:
<!-- jQuery lib -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- transform2d lib -->
<script type="text/javascript" src="js/jquery.transform2d.js"></script>
<!-- jTinder lib -->
<script type="text/javascript" src="js/jquery.jTinder.js"></script>
<!-- jTinder initialization script -->
<script>$("#tinderslide").jTinder();</script>
Add this HTML code in your body for the jTinder content:
<div id="tinderslide">
<ul>
<li class="pane1"><div class="img"></div><div>Miami Beach</div><div class="like"></div><div class="dislike"></div></li>
<li class="pane2"><div class="img"></div><div>San Francisco</div><div class="like"></div><div class="dislike"></div></li>
<li class="pane3"><div class="img"></div><div>Chicago</div><div class="like"></div><div class="dislike"></div></li>
<li class="pane4"><div class="img"></div><div>New York</div><div class="like"></div><div class="dislike"></div></li>
<li class="pane5"><div class="img"></div><div>Beach</div><div class="like"></div><div class="dislike"></div></li>
</ul>
</div>
Change the CSS (jTinder.css) for your images.
onDislike (Optional) - Default value: null - Callback function, if a user dislikes a item. Parameter assigned: The current li item.
onLike (Optional) - Default value: null - Callback function if a user likes a item. Parameter assigned: The current li item.
animationRevertSpeed (Optional) - Default value: 200 - Speed in milliseconds the item reverts back to the init state.
animationSpeed (Optional) - Default value: 400 - Speed in milliseconds the item go away on like/dislike.
threshold (Optional) - Default value: 1 - The value the item must slide before a like/dislike accepted. A good value is 1-5.
likeSelector (Optional) - Default value: .like - CSS selector of a like image in the pane.
dislikeSelector (Optional) - Default value: .dislike - CSS selector of a like image in the pane.
like - Trigger like for the current item.
dislike - Trigger dislike for the current item.
Example Calls:
$("#tinderslide").jTinder('like');
$("#tinderslide").jTinder('dislike');
$("#tinderslide").jTinder({
onDislike: function (item) {
alert('Dislike image ' + (item.index()+1));
},
onLike: function (item) {
alert('Like image ' + (item.index()+1));
},
animationRevertSpeed: 200,
animationSpeed: 400,
threshold: 1,
likeSelector: '.like',
dislikeSelector: '.dislike'
});
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent