Adding 'My Team' Section

Hey,

I am hoping you can help out with this. I am wanting to have the My Team section from John Theme added to the Quark (ecommerce) theme.

What I have so far.
I have added the css styles from John and added to override.css file.
I have also grabbed the js snippet from gk.scripts.js and added it to the Quark functions.js

Code: Select all

// team overlays
      if(jQuery('.gk-team').length > 0) {
         var figures = jQuery('.gk-team figure');
   
         figures.each(function(i, figure) {
            figure = jQuery(figure);
            if(
               figure.attr('data-fb') != null ||
               figure.attr('data-twitter') != null ||
               figure.attr('data-gplus') != null
            ) {
               var overlay = new jQuery('<div class="gk-team-overlay"></div>');
   
               var htmloutput = '';
               var classcounter = 0;
   
               if(figure.attr('data-fb') != null) {
                  htmloutput += '<a href="'+figure.attr('data-fb')+'" data-type="fb">Facebook</a>';
                  classcounter++;
               }
   
               if(figure.attr('data-twitter') != null) {
                  htmloutput += '<a href="'+figure.attr('data-twitter')+'" data-type="twitter">Twitter</a>';
                  classcounter++;
               }
   
               if(figure.attr('data-gplus') != null) {
                  htmloutput += '<a href="'+figure.attr('data-gplus')+'" data-type="gplus">Google+</a>';
                  classcounter++;
               }
   
               overlay.html(htmloutput);
               overlay.addClass('gk-icons' + classcounter);
   
               figure.find('img').after(overlay);
   
               figure.bind({
                  'touchend': function() {
                     if(!figure.hasClass('hover')) {
                        figure.trigger('mouseenter');
                     } else {
                        figure.trigger('mouseleave');
                     }
                  },
                  'mouseenter': function() {
                     figure.addClass('hover');
                     var linksAmount = figure.find('.gk-team-overlay a').length;
                     for(i = 0; i < linksAmount; i++) {
                        gkAddClass(figure.find('.gk-team-overlay').find('a').eq(i), 'active', i);   
                     }
                  },
                  'mouseleave': function() {
                     figure.removeClass('hover');
                     figure.find('.gk-team-overlay a').removeClass('active');
                  }
               });
            }
         });
      }
   
   
      // team pagination
      jQuery('.gk-team').each(function(i, item) {
         item = jQuery(item);
         if(parseInt(item.attr('data-pages'), 10) > 1) {
            item.parent().css('position', 'relative');
            var current_page = 0;
            var amount_of_pages = item.attr('data-pages');
            var prevLink = new jQuery('<a class="gk-team-prev" href="#"><i class="gk-icon-arrow-left"></i></a>');
            var nextLink = new jQuery('<a class="gk-team-next" href="#"><i class="gk-icon-arrow-right"></i></a>');
            var wrap = item.find('div').first();
            var pages = wrap.children('div');
            jQuery(pages[0]).addClass('active');
            
            item.after(prevLink);
            item.after(nextLink);
            
            prevLink.click(function(e) {
               e.preventDefault();
               current_page = (current_page > 0) ? current_page - 1 : amount_of_pages - 1;
               wrap.css('margin-left', (current_page * -100) + "%");
               pages.removeClass('active');
               jQuery(pages[current_page]).addClass('active');
            });
            
            nextLink.click(function(e) {
               e.preventDefault();
               current_page = (current_page < amount_of_pages - 1) ? current_page + 1 : 0;
               wrap.css('margin-left', (current_page * -100) + "%");
               pages.removeClass('active');
               jQuery(pages[current_page]).addClass('active');
            });
         }
      });


My issue is that it works except for the addition of 'active' class to be added on hover to the the following a tags:

Code: Select all

<div class="gk-team-overlay gk-icons3">
<a data-type="fb" href="#">Facebook</a>
<a data-type="twitter" href="#">Twitter</a>
<a data-type="gplus" href="#">Google+</a>
</div>

It will strip the 'active' class away after you hover off (as it should do) if I add it manually in firebug. It is just not adding it in the first place as it should.

screenshot-john.jpg

screenshot-quark.jpg

Any help would be greatly appreciated.

Kind Regards

Hi,
Could you please provide me with a URL to your website, either here or via PM (click the “Private Message” text underneath my avatar) so that I may analyze it?

Hey Joshua,

PM sent.

Hi, you don't have gkAddClass function in your quark script:

Code: Select all

function gkAddClass(element, cssclass, i, delay) {
       element = jQuery(element);
       if(!delay) {
             delay = 150;
       }
   
       if(!delay) {
          delay = (i !== false) ? i * 150 : 0;
       }
   
       setTimeout(function() {
          element.addClass(cssclass);
       }, delay*i);
    }


Please add it and should be fine.