Change the roll-over in About-section

In the "About"-Section of the Creativity-Show-Homepage, there is a roll-over wich shows links to twitter, facebook, etc. I want to have a roll-over with normal text, like "Instructor of Jun Fan Gung-Fu"... my site: http://wissen.sai-fon.de

Should the text be also a link, or just sample text?

It should be only text.

I still need an answer

First of all, please edit About us module and change:

Code: Select all

   <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>
         <h3>Tim Berners</h3>
         <small>CEO Executive Officer</small> </figcaption>
   </figure>


to:

Code: Select all

   <figure data-text="My sample text" 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>


Thats the easiest part .

Now, please edit file:
/templates/gk_creativity/js/gk.scripts.js
And change:

Code: Select all

            figure.getProperty('data-fb') != null ||
            figure.getProperty('data-twitter') != null ||
            figure.getProperty('data-gplus') != null


to:

Code: Select all

            figure.getProperty('data-fb') != null ||
            figure.getProperty('data-twitter') != null ||
            figure.getProperty('data-gplus') != null



After this code:

Code: Select all

            if(figure.getProperty('data-gplus') != null) {
               htmloutput += '<a href="'+figure.getProperty('data-gplus')+'" data-type="gplus">Google+</a>';
               classcounter++;
            }


add another block:

Code: Select all

            if(figure.getProperty('data-text') != null) {
               htmloutput += '<span>'+figure.getProperty('data-text')+'</span>';
               classcounter++;
            }   


That will generate the text in overlay.

Now the final thing is to add some css'ing to it, but you havent mention anything about it, so just to be general, you can use override.css (please enable it in template settings, advanced section) with this code:

Code: Select all

.gkTeamOverlay > span {
display: block;
text-align: center;
position: absolute;
top: 64px;
color: #fff;
width: 100%;
font-weight: bold;
}


Ps - next time plase don't bump your questions - every time you reply to your question it goes down in the queue.

First: Sorry for my requests. The change in the module was easy.

In addition: In the script of "gk.scripts.js" there is no code namend

Code: Select all

            figure.getProperty('data-fb') != null ||
            figure.getProperty('data-twitter') != null ||
            figure.getProperty('data-gplus') != null


Do you use Joomla 2.x or 3.x?

I use Joomla 3.2

Changes for 3.x:

Code: Select all

            figure.attr('data-fb') != undefined ||
            figure.attr('data-twitter') != undefined ||
            figure.attr('data-gplus') != undefined ||
            figure.attr('data-text') != undefined


next:

Code: Select all

            if(figure.attr('data-gplus') != undefined) {
               htmloutput += '<a href="'+figure.attr('data-gplus')+'" data-type="gplus">Google+</a>';
               classcounter++;
            }
            
            if(figure.attr('data-text') != undefined) {
               htmloutput += '<span>'+figure.getProperty('data-text')+'</span>';
               classcounter++;
            }            
            
            jQuery(overlay).html(htmloutput);
            jQuery(overlay).addClass('gkIcons' + classcounter);


Sorry, but is that correct:

Code: Select all

if(figure.attr('data-text') != undefined) {
               htmloutput += '<span>'+figure.getProperty('data-text')+'</span>';
               classcounter++;
            }

I don't think so. I've tried it with this code, but is still not quite right ... what is missing here?

Code: Select all

if(figure.attr('data-text') != undefined) {
                     htmloutput += '<a href="'+figure.attr('data-text')+'" data-type="text">Text</a>]';
                     classcounter++;

I have change the <span>-tag to <a>-tag

You have written that you don't need link, just text, so <a> tag is not a solution. But there is also a mistake in the code I did:

Code: Select all

            if(figure.attr('data-gplus') != undefined) {
               htmloutput += '<a href="'+figure.attr('data-gplus')+'" data-type="gplus">Google+</a>';
               classcounter++;
            }
           
            if(figure.attr('data-text') != undefined) {
               htmloutput += '<span>'+figure.attr('data-text')+'</span>';
               classcounter++;
            }       


Great, it works! Thx a lot...!

Sorry it took so long
If You will have any other questions, feel free to post new forum threads.