By default data-linkedin is not available but you can customize this in template.You need to replace the existing team overlays code with the below fragment. This code adds ability to support up to 5 icons - in this example I've added linkedin and WWW URL.
- Code: Select all
/*
You need to replace the existing team overlays code with the below fragment
This code adds ability to support up to 5 icons - in this example I've added linkedin and WWW URL.
*/
// team overlays
if(jQuery(document).find('.gkTeam')) {
var figures = jQuery(document).find('.gkTeam figure');
jQuery(figures).each(function(i, figure) {
figure = jQuery(figure);
if(
figure.attr('data-fb') != undefined ||
figure.attr('data-twitter') != undefined ||
figure.attr('data-gplus') != undefined ||
figure.attr('data-linkedin') != undefined ||
figure.attr('data-www') != undefined
) {
var overlay = new jQuery('<div class= "gkTeamOverlay"></div>');
var htmloutput = '';
var classcounter = 0;
if(figure.attr('data-fb') != undefined) {
htmloutput += '<a href="'+figure.attr('data-fb')+'" data-type="fb">Facebook</a>';
classcounter++;
}
if(figure.attr('data-twitter') != undefined) {
htmloutput += '<a href="'+figure.attr('data-twitter')+'" data-type="twitter">Twitter</a>';
classcounter++;
}
if(figure.attr('data-gplus') != undefined) {
htmloutput += '<a href="'+figure.attr('data-gplus')+'" data-type="gplus">Google+</a>';
classcounter++;
}
if(figure.attr('data-linkedin') != undefined) {
htmloutput += '<a href="'+figure.attr('data-linkedin')+'" data-type="gplus">LinkedIn</a>';
classcounter++;
}
if(figure.attr('data-www') != undefined) {
htmloutput += '<a href="'+figure.attr('data-www')+'" data-type="www">WWW</a>';
classcounter++;
}
jQuery(overlay).html(htmloutput);
jQuery(overlay).addClass('gkIcons' + classcounter);
figure.find('img').after(overlay);
//overlay.inject(figure.getElement('img') , 'after');
figure.mouseenter(function() {
figure.addClass('hover');
var linksAmount = figure.find('.gkTeamOverlay a').length;
for(i = 0; i < linksAmount; i++) {
gkAddClass(figure.find('.gkTeamOverlay').find('a')[i], 'active', i);
}
});
figure.mouseleave(function() {
figure.removeClass('hover');
figure.find('.gkTeamOverlay a').removeClass('active');
});
}
});
}
Then to gk.stuff.css file please add this code :
- Code: Select all
/*
You need to add the below code.
This code adds ability to support up to 5 icons - in this example I've added linkedin and WWW URL.
*/
.gkTeamOverlay.gkIcons4 a {
margin-top: -110px!important;
}
.gkTeamOverlay.gkIcons4 a + a {
margin-top: -52px!important;
}
.gkTeamOverlay.gkIcons4 a + a + a {
margin-top: 5px!important;
}
.gkTeamOverlay.gkIcons4 a + a + a + a {
margin-top: 64px!important;
}
.gkTeamOverlay.gkIcons5 a {
margin-top: -138px!important;
}
.gkTeamOverlay.gkIcons5 a + a {
margin-top: -82px!important;
}
.gkTeamOverlay.gkIcons5 a + a + a {
margin-top: -26px!important;
}
.gkTeamOverlay.gkIcons5 a + a + a + a {
margin-top: 30px!important;
}
.gkTeamOverlay.gkIcons5 a + a + a + a + a {
margin-top: 86px!important;
}
.gkTeamOverlay a[data-type="linkedin"]:before {
content: '\f0e1';
}
.gkTeamOverlay a[data-type="www"]:before {
content: '\f0c1';
}
Of course the code for gk.script.js is for J!3 version because it is created in jQuery - if you want to use it in J!2.x you need to rewrite this to mootools library.
