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.
Switch branches/tags
Nothing to show
Clone or download
Dominik Weber
Dominik Weber update text
Latest commit b77ead7 Feb 3, 2015
Permalink
Failed to load latest commit information.
css init Nov 28, 2014
img init Nov 28, 2014
js init Nov 28, 2014
.gitignore init Nov 28, 2014
LICENSE Initial commit Nov 28, 2014
README.md update text Feb 3, 2015
index.html init Nov 28, 2014

README.md

jTinder v.1.0.0

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.

jTinder Example

http://x5c.de/jtinder/

jTinder Installation

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.

jTinder Options

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.

jTinder Methods

like - Trigger like for the current item.

dislike - Trigger dislike for the current item.

Example Calls:

$("#tinderslide").jTinder('like');

$("#tinderslide").jTinder('dislike');

jTinder Option Usage Example

$("#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'
});