lilibet lilibet - 1 year ago 201
jQuery Question

Linking image to javascript command - Tinder Swipe Cards

For a uni assignment I've been using this Tinder Swipe Card code: `

<div class="buddy" style="display: block;">
<div class="avatar" style="margin: 0 auto; display: block; background-image:url(images/girl1.jpg)"></div>
<div class="bio">
<h1>Name, 28</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

I have two images "hi" and "bye" that sit below the swipe feature I would like to link to the swipe feature so when "hi" is clicked the image swipes right and when "bye" is clicked the image swipes left, however, I'm unsure as to how to do this.

Can anyone help?

Answer Source

The easiest solution would be to call the swipeleft or swiperight events when the button is pressed, leaving the existing code untouched.

e.g. Adding something along these lines:

$("#bye").on("click", function(){
  $(".buddy[style*="display: block"]").trigger("swipeleft");
$("#hi").on("click", function(){
  $(".buddy[style*="display: block"]").trigger("swiperight");

Edit: Since there are multiple .buddy's you will need to select the current one. I've amended the code above to run the swipe on visible buddys since I can't see any "selected" type marker.