Awesome

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.

refreshOnNext (Optional) - Default value: false - Refresh container with panes on Like or Dislike (Do DOM manipulation before call to jTinder like or dislike methods, i.e. use jTinder like or dislike as cb on DOM manipulation)

cleanUp (Optional) - Default value: true - Cleanup hidden (swiped) panes (LI element) from DOM; number of items needed to reach cleanup can be set within cleanUpItems option.

cleanUpOptions (Optional) - Default value: 10 - See above

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'
});