Module "Meet our talented team"

Hi,

I want to change the module Module "Meet our talented team" a bit. Default, it shows faces with their names under it. If you hove the picture the face disappears and 3 social icons are visible.

I would like only faces are shown, and when you hover the face the name of the person appears. So instead of the icons i would like to put in some text. The colored background is fine.

Is this possible?

The code:
<figure data-fb="https://www.facebook.com/gavickpro" data-twitter="https://twitter.com/gavickpro" data-gplus="https://plus.google.com/+gavickpro/posts" class="animate_queue_element">
<img src="images/demo/about/1.jpg" border="0" alt="Tim Berners" />
<figcaption>

Yes, it can be done, but would require some js and css editing. Will you be able to proceed with that kind of changes?

No i am not able to make those changes.

Instead of the social links it would be nice you could enter some text (and change the color instead of the purple. I think this would be a feature more people would like to use.

Can you help me with this?

I can either dirrect you what files to change (Ill write what to change) - that's the preffered method. I could also do tose changes on your server but that is less prefered method

If you could write what files to changes i would be very happy!

First of all - you need to create another data-source type info and place it inside figure element.
Here is a sample one on which I was working:

Code: Select all

<figure data-info="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mollis nisi nec arcu bibendum, vitae luctus sem cursus. Vestibulum auctor adipiscing commodo. Nulla vel suscipit leo, sit amet semper metus. Mauris eu orci urna. Mauris pretium metus id turpis aliquam, id interdum lacus porta"  class="animate_queue_element">
      <img src="images/demo/about/2.jpg" border="0" alt="Julia Morena" />
      <figcaption>
         <h3>Julia Morena</h3>
         <small>Creative Director</small> </figcaption>
   </figure>


As you can see to keep compatibility, I have removed all data-fb, data-twitter etc elements, leaving only this new one.

Please create your elements this way.
Remember also to disable tineMCE as editor in configuration (change editor to none).

Now you need to edit this file:
/templates/gk_creativity/js/gk.scripts.js

please find this section:

Code: Select all

   // 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
         ) {
            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++;
            }


and modify it to this form:

Code: Select all

   // 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-info') != 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-info') != undefined) {
               htmloutput += '<span data-type="info">'+figure.attr('data-info')+'</span>';
               classcounter++;
            }
            
            jQuery(overlay).html(htmloutput);
            jQuery(overlay).addClass('gkIcons' + classcounter);


to be continued (in next post)...

Now you are almost there, as the overlay shows the info, it just needs some styling.
Please edit: /templates/gk_creativity/css/override.css and add at its end:

Code: Select all

.gkTeamOverlay span[data-type="info"] {
color: #fff;
display: block;
padding: 10px;
line-height: 20px;
}


You can play with those settings, add additional styling to that element etc.

Remember to enable "CSS override" in template settings - advanced section.

Wow thanks this is perfect! I think other people will like this also!

I hope so .
If You will have any other questions, feel free to post new forum threads.

I noticed that on my phone (windows phone 8) i can not click the image we made with the code above. It will not change. When i click the original images on my phone they do show the social links.

Any idea what part of the code can be different?

Sadly I don't have any phone with windows mobile. Please create new thread, link to this one (as it describes changes we have made) and ask for help. Also please write in the topic that problem shows on phones with windows mobile (windows phone 8).

Is it also possible to load a second image when hover the picture of the face? As it is now, i can put in text and set the background color.

Instead of using text i would like to use the second image with the same size, so it looks like the picture is turned around and you can see the backside.

It is possible, but this kind of customisation is beyond of our support. If you are known in html/css/js I can give you some hints on how to do it, but final code would need to be created by yourself.

Unfortunately i don't Isn't it just a small modification of the code you have above to show text on the backside?

No, it would require some more work
Above change was requested many times, so the small instruction was prepared.

Is there a possibility you do the work by job?

As I have written in pw - I will do the tutorial, just one more question - should it only show different picture, or also current links (fb, tw, g+)?

Different picture is all i need!

And caption under the image should stay same (only image animates/changes)?

yes please, http://cafe-pol.nl/new/

the picture now change in a red square, that should be a second picture. And the caption stays the same. thanks!

Ok. Lets get started.
1. html:

Code: Select all

<div class="gkTeam col4 animate_queue">
   <figure data-alt-img="images/demo/about/2.jpg" class="animate_queue_element">
      <img src="images/demo/about/1.jpg" border="0" alt="Tim Berners" />
      <figcaption>
         <h3>Tim Berners</h3>
         <small>CEO Executive Officer</small> </figcaption>
   </figure>
   <figure data-alt-img="images/demo/about/1.jpg" class="animate_queue_element">
      <img src="images/demo/about/2.jpg" border="0" alt="Julia Morena" />
      <figcaption>
         <h3>Julia Morena</h3>
         <small>Creative Director</small> </figcaption>
   </figure>
   <figure data-alt-img="images/demo/about/1.jpg" class="animate_queue_element">
      <img src="images/demo/about/3.jpg" border="0" alt="Eddy Doe" />
      <figcaption>
         <h3>Eddy Doe</h3>
         <small>Customer Support</small> </figcaption>
   </figure>
   <figure data-alt-img="images/demo/about/1.jpg" class="animate_queue_element">
      <img src="images/demo/about/4.jpg" border="0" alt="Robert Frost" />
      <figcaption>
         <h3>Robert Frost</h3>
         <small>Web Designer</small> </figcaption>
   </figure>
</div>
<p style="text-align: center;"><a class="border bigbutton" href="#">Learn More</a></p>


This is jus a sample but as you can see data-alt-img is used to provide link to the second image. Tats about it. If you will use it in only one figure and will leave social icons in other - it shoudl work, but don't mix it with social attributes as next code is just not prepared for that.

2. JavaScript.
Please edit file:
templates/gk_creativity/js/gk.scripts.js
and find this part:

Code: Select all

      // team overlays
      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
         ) {
            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++;
            }
            
            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');
            });
         }


Now insert this code just under above part, so it looks this way:

Code: Select all

   // 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
         ) {
            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++;
            }
            
            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');
            });
         }
         if(
            figure.attr('data-alt-img') != undefined
         ) {
            var overlayElement = new jQuery('<div class="gkTeamImgOverlayWrap">');
            var overlayImg = new jQuery('<img class="gkTeamImgOverlay">');
            overlayImg.attr('src', figure.attr('data-alt-img'));
            overlayElement.append(overlayImg);
            figure.find('img').after(overlayElement);
            
            figure.mouseenter(function() {
               figure.addClass('hover');
            });
            figure.mouseleave(function() {
               figure.removeClass('hover');
            });
         }


In short - it tests if figure has data-alt-img attribute and if so it constructs additional element (div with image inside) and inserts it just under original image.
Now you have two visible images.

3. CSS
Please edit: /templates/gk_creativity/css/override.css and add at its end:

Code: Select all

.gkTeamImgOverlayWrap {
    height: 100%;
    left: 0;
    opacity: 0;
    filter: alpha(opacity=0);
    position: absolute;
    top: 0;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
    width: 100%;
    z-index: 1;
}

figure.hover .gkTeamImgOverlayWrap {
    opacity: 1;
    filter: alpha(opacity=100);
}


What it does - it makes new wrapping element full width and height, sets it opacity to 0, and whet user hevers mouse over figure, hover class is added in JS, so the element can be shown.

Remember to enable "CSS override" in template settings - advanced section.

Thanks for your work, i think i did it. In step 2 you say

"Now insert this code just under above part, so it looks this way:"

First i added the code after this, but its instead of putting it under its replacing the first part. Am i right?

No, you need to leave the original part and just add what is under it. I left all code just as reference.
So add just:

Code: Select all

         if(
            figure.attr('data-alt-img') != undefined
         ) {
            var overlayElement = new jQuery('<div class="gkTeamImgOverlayWrap">');
            var overlayImg = new jQuery('<img class="gkTeamImgOverlay">');
            overlayImg.attr('src', figure.attr('data-alt-img'));
            overlayElement.append(overlayImg);
            figure.find('img').after(overlayElement);
           
            figure.mouseenter(function() {
               figure.addClass('hover');
            });
            figure.mouseleave(function() {
               figure.removeClass('hover');
            });
         }


Yes, but i read put this code under above part. So then you have the first part twice

It's working,

Thanks for great help!

I'm glad this solution worked for you .

Hi,

i have done the same (as you have explained above) and in IE it works perfectly, but in Firefox doesn't. What might be a problem here?

Thanks

Sorry, I meant text inside of a figure element.

Could you please post an url to your site?

Hi,
I have a similar quesition. I want to replace the social links (icons and link) into one weblink (incl. icon for link - if available).

The code (class) for the social links are f.e.:
<figure class="animate_queue_element" data-fb="https://www.facebook.com/xyz" />
similar for twitter, google+

Is there a figure class element for web or link? Or do I have to use another class?
I am not pretty good in coding. So it would be nice if you can write the whole class tag.

Thanks a lot and geetz from Germany.
Mentioned beside: the page isn't online yet, just on my computer.

Martina

I don't quite get your question, this part:
"Is there a figure class element for web or link? Or do I have to use another class?"
what do you mean exactly?

Hi Cyberek,

I see that there are more than one question about the changes in the gk-team module.
I am not shure if, my question is answered, after I read your answeres of another question.

My wish is, to leave the social media icons out and have instead a link (open new window), to another webpage. It would be cool, if there is an icon visible on the (full-color) hover-field.

The page I am building at the moment is local on my computer. I cannot give you an URL yet.

When answering please put my Name "Martina" on top of you answer, than I know I was ment.

Thx at all

I don't quite get your question, this part:
"Is there a figure class element for web or link? Or do I have to use another class?"
what do you mean exactly?

I mean the DIV tag class for figure: in our case the icons and links to social media like fb, twitter and g+

f.e. <figure class="animate_queue_element" data-fb="https://www.facebook.com/gavickpro"...

that class says "animate_queue_element" and use the data-fb (show the fb icon) and use the link (facebook link)

But I don't want a link to a social media account. I want a link to another website. And of course another icon that shows that there is a link on the full colored hover element. F. e. an icon that shows the symbol for a link (chain, what we know from the wysiwyg editors).

My first is: have you programmed another "data-xx". The "xx" means another icon, like the chain-symbol for links. If yes, I can substitute the code easily.

For example: <figure class="animate_queue_element" data-link="https://www.facebook.com/gavickpro"...

I tried it, but it did not work.

So, if you have not programmed another "data-xx" (Icon) except of the social media icons, what do I have to do, that there is just one possibiliy given: a linkt to another (extern) webpage.

And therefore I probably need another div class tag, don't I? But which?

Thanks

Martina

The "data-link" would be the rquest that the icon for a link (chain) would be shown instead of the icon for fb orr twitter

But I don't want a link to a social media account and a social media icon. I want a link to another website. And of course with an icon that shows that there is a link on the full colored hover element. F. e. an icon that shows the symbol for a link (chain, what we know from the wysiwyg editors).

That you know what I mean here is a pic on dropbox:
https://dl.dropboxusercontent.com/u/47467211/chain.png

This is how I would like it
No social media icons and links to fb, twitter and co.
An icon for link and the link goes to en external website.

Martina

@Martina - first rule - do not bump your question. It makes the topic quite hard to read, also it makes you wait longer.
Use the search. I'm sure there was already a question on how to replace social icons with link icon answered. If not, please create a separate thread as your topic isn't related to this thread.