Question

I have a problem with jquery plugin called quikflip. Basically, the plugin flips an image with a flipping effect like turning cards. I’m using it to flip a list of images of cards i have 20 cards, it’s working good, but i want to flip 3 cards only and stop show alert and go to the next url.

I’m new in jquery and dont know how to make it, I tried to make counter but no success.

here is what i tried :

function count() {
  var n = $('quickFlip').length;
  if(n > 3){
   Alert('only 3' );
  }
  else {
   $('.quickFlip').quickFlip();
  //
  }
}

$('.quickFlip').click(countChecked);

the function of the plugin is called like this :

$(function() {
    $('.quickflip').quickFlip();
});

the code of the plugin is here http://jonraasch.com/blog/quickflip-2-jquery-plugin.

I just copied exactly the code and no alert has been shown. I have another script which send with ajax ids of the div every time is clicked the card i dont khnow if it is interfering with my code that send infos:

 <script> $(document).ready(function(){ $(".element").click(function () {


    var cururl = document.location.href;
     var path = $(this).attr('title') ; 
    var cardid = $(this).attr('id') ;
     $.get('ajaxprocess.php', {Path: path,url: cururl,cardid:cardid}, function(data){ 

    $('#test').text(data);});
    });
    }); 
    </script>

and the elements are like is

<div class="quickFlip"> <div class="element" id= "id" title ="title">
<a href="#" class="quickFlipCta"> </a>
</div>
 the code for fliping is now like
 <script type="text/javascript">
 $(function() { $('.quickflip').quickFlip(); }); 
$(function() { 
var timesFlipped = 0; 
var threshold = 3; $('.quickflip').quickFlip().click(function() {
 if(timeFlipped++ >= threshold) { alert("Redirecting"); // do more stuff }});
}); 
</script>

what am i doing wrong ?

Answer 1

Without having looked at the plugin’s code, I think the most easy solution is to bind another .click() event to your $('.quickflip'), keeping track of how many times the user has ‘flipped’, and doing something after n amount. Like:

$(function() {

   var timesFlipped = 0;
   var threshold = 3;

   $('.quickFlip').quickFlip().find('.quickFlipCta').click(function() {
         if(++timesFlipped >= threshold) {
            alert("Redirecting");
            // do more stuff
         }
      });
});

Basic working example: http://jsfiddle.net/sMYzS/8/

Some more info:

$('.quickFlip').quickFlip(); doesn’t actually do seem to do the flipping, it just sets up the flipping functionality (binding events to your container, etc). So your

else {
   $('.quickFlip').quickFlip();
}

seems to be the wrong approach. Basically what you are doing when your function gets invoked is

if there are more than 3
   alert something
else 
   initialize the quickflip functionality

Hope this helps.