jTinderについて

jTinderとは

人物、製品、画像の評価を非常に簡単かつ高速にするJavaScriptライブラリ。
モバイルタッチデバイス用に最適化されていますが、デスクトップのフォールバックも備えています。
評価を素早く行いたい場合等に役立ちます！

使い方

1.HEADタグの前にcssファイルを追加します。

application.html.erb

<link rel="stylesheet" type="text/css" href="css/jTinder.css">

2.HTMLファイルのBODYタグの前に次を追加します。

application.html.erb

<!-- 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>

3.次のHTMLコードをjTinderコンテンツの本文に追加します。

<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>

4.画像のCSS（jTinder.css）を変更します。

※公式ドキュメントを見ればほぼコピペするだけで大丈夫だと思います。。

参考

jTinderの公式ドキュメント
https://github.com/do-web/jTinder