settings FB, twitter, g+ on my loyal team page

Hi, how to add or take away the fb, twitter or g+ icons which appear on the image of the teammembers on the My loyal team module.
I deleted this code: data-fb="#" data-twitter="#" data-gplus="#" at the backend but the icons are still in place. For example I want only the FB to appear, not the other ones.

Hi

If You have removed the code than it should be gone. Try clearing cache and make sure Your server doesn't have any cache solution enabled.

Hi,

you should edit the code of gk.script.js in templates/[name}/js line 215 to 238
from

Code: Select all

         if(
            figure.attr('data-fb') !== null ||
            figure.attr('data-twitter') !== null ||
            figure.attr('data-gplus') !== null
         ) {
            var overlay = new jQuery('<div class="gkTeamOverlay"></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++;
            }


to

Code: Select all

         if(
            figure.attr('data-fb') != null ||
            figure.attr('data-twitter') != null ||
            figure.attr('data-gplus') != null
         ) {
            var overlay = new jQuery('<div class="gkTeamOverlay"></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++;
            }


You can also use this part of the code to add additional icons

Best,
Dirk

Hi

Yes, that's correct. Sorry I have focused on a different module. Thank You @Banana7777 for help.

Hi all thx for your answer !!

I want to put Linkedin instead of Twitter. (logo and link to a profile) how should I proceed ?

thx

Hi

In this case a code for single photo will look like this:

Code: Select all

<figure data-scroll-reveal="enter from the top and move 50px over 0.4s after 0.6s" data-fb="#" data-linkedin="www.linkedin.com/asdasd" data-gplus="#"><span><img src="images/demo/team_4.jpg" alt="Team member" /></span><figcaption data-scroll-reveal="enter from the bottom and move 50px over 0.4s after 0.7s"><h3>John Doe</h3><small>Webmaster</small></figcaption></figure>


code in /js/gk.scripts.js should be replaced to that:

Code: Select all

   // team overlays
   if(jQuery('.gkTeam').length > 0) {
      var figures = jQuery('.gkTeam figure');

      figures.each(function(i, figure) {
         figure = jQuery(figure);
         if(
            figure.attr('data-fb') !== null ||
            figure.attr('data-twitter') !== null ||
                                figure.attr('data-linkedin') !== null ||
            figure.attr('data-gplus') !== null
         ) {
            var overlay = new jQuery('<div class="gkTeamOverlay"></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-linkedin') !== null) {
               htmloutput += '<a href="'+figure.attr('data-linkedin')+'" data-type="linkedin">Linkedin</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('gkIcons' + 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('.gkTeamOverlay a').length;
                  for(i = 0; i < linksAmount; i++) {
                     gkAddClass(figure.find('.gkTeamOverlay').find('a').eq(i), 'active', i);   
                  }
               },
               'mouseleave': function() {
                  figure.removeClass('hover');
                  figure.find('.gkTeamOverlay a').removeClass('active');
               }
            });
         }
      });
   }



and a css for icon:

Code: Select all

.gkTeamOverlay a[data-type="twitter"]:before {
    content: "\f0e1";
}