jQuery Isotope navigating with filters

jQuery Isotope navigating with filters

I have a Joomla site with a bought template containing a portfolio based on isotope and touchtouch

The portfolio contains a gallery of thumbnails. You can click on the thumbnails and then cycle trough the images with the touchtouch plugin. Now the thing is, when the gallery is being filtered, the touchtouch plugin still cycles trough all the images. Even the ones who are not showing up when the filter is applied.

At this point I nearly get what I wanted but there is a bug in my code and I can't see where it does come from.

The solution I have try to realize is to introduce a new class MyCat and my modifications try to make sure that this class is only present if the image corresponds to the current category and that the jquery takes in account this class. 

But my solution only works if I'm filtering only once. 

I'm certainly not a jquery expert. 

For my understanding at this time I think the bug of my solution comes from the fact that I had to move the call of the touchtouch function FROM the script.js file loaded 1 time at page loading time TO the filter click function executed whenever the filter changes. Because I observed the variable gtritems in the console and can see that each time I filter I'm adding something like a new occurence and the accumulation of all this seems to provoke the error. Is there a way to cleanup the old occurences so that when I call :

jQuery ( 'a.touchGalleryLink.MyCat' ). touchTouch ();

Here is some code I modified :

gallery.php :

  1. ...
  2. jQuery(document).ready(function() {
  3. (function($){ 
  4.   $(window).load(function(){
  5.   var $container = $('#isotopeContainer');
  6.   // filter items when filter link is clicked
  7.   $('#filters a').click(function(){
  8.     var selector = $(this).attr('data-filter');
  9.     $container.isotope({ filter: selector });
  10.     if(selector == "*"){
  11.       $(".touchGalleryLink").addClass("MyCat");
  12.     } else { 
  13.       $(".touchGalleryLink").removeClass("MyCat");
  14.       $(".touchGalleryLink").each(function() {
  15.       var tmpvar = $(this).parent().parent().attr('class').split(" ",2);
  16.       if(tmpvar[1] == selector.substr(1)){
  17.         $(this).addClass("MyCat");
  18.       }
  19.     });
  20.   }
  21.   jQuery('a.touchGalleryLink.MyCat').touchTouch();
  22.   return false;
  23. });
  24. $( "#filters a:first" ).trigger( "click" );
  25. ...
Would be nice to get some help on this !