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.
Any help would be greatly appreciated.
Kind Regards