animation on "what we do" and "about" pages

Rate this topic: Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.1.00 out of 6 based on 1 vote(s)
GK User
Fri Mar 07, 2014 11:08 pm
Reply with quote
Report this post
Hi,

last week I made some changes in the "What we do" page and changed the animation on each image. Now, when I mouse over the image, it becomes like "About" (with the color and the play icon). Unfortunately I don't remember where I made these changes because in the override file there is that code.
Can you please tell me where I can find this code in case I need to change the icon?

Then I have another question about the "about" animation as well. I only left the Fb icon but would like to insert the fa-arrow-circle-o-right and link it to the about page. Where can I make this change?

Thank you very much and sorry for the questions...
User avatar
Expert Boarder

GK User
Sat Mar 08, 2014 9:35 am
Reply with quote
Report this post
Could You please post an url to your site?
User avatar
Moderator

GK User
Sat Mar 08, 2014 3:09 pm
Reply with quote
Report this post
the site is not online yet....
User avatar
Expert Boarder

GK User
Sat Mar 08, 2014 4:32 pm
Reply with quote
Report this post
I moved the site within the official one. You can see it at www.nitrofilm.it/nuovosito
User avatar
Expert Boarder

GK User
Mon Mar 10, 2014 12:19 pm
Reply with quote
Report this post
You haven't made those changes in override.css. Probably in gk.stuff.css. I would suggest to use some kind of visual diff tool to compare original files with those on your site.

Generation of "about" icons is made in file:
templates/gk_creativity/js/gk.scripts.js
with this code:
Code: Select all
// team overlays
   if(document.getElement('.gkTeam')) {
      var figures = document.getElements('.gkTeam figure');
      
      figures.each(function(figure, i) {
         if(
            figure.getProperty('data-fb') != null ||
            figure.getProperty('data-twitter') != null ||
            figure.getProperty('data-gplus') != null
         ) {
            var overlay = new Element('div', {
               'class': 'gkTeamOverlay'
            });
            
            var htmloutput = '';
            var classcounter = 0;
            
            if(figure.getProperty('data-fb') != null) {
               htmloutput += '<a href="'+figure.getProperty('data-fb')+'" data-type="fb">Facebook</a>';
               classcounter++;
            }
            
            if(figure.getProperty('data-twitter') != null) {
               htmloutput += '<a href="'+figure.getProperty('data-twitter')+'" data-type="twitter">Twitter</a>';
               classcounter++;
            }
            
            if(figure.getProperty('data-gplus') != null) {
               htmloutput += '<a href="'+figure.getProperty('data-gplus')+'" data-type="gplus">Google+</a>';
               classcounter++;
            }
            
            overlay.set('html', htmloutput);
            overlay.addClass('gkIcons' + classcounter);
            
            overlay.inject(figure.getElement('img') , 'after');
            
            figure.addEvents({
               'mouseenter': function() {
                  figure.addClass('hover');
                  var linksAmount = figure.getElements('.gkTeamOverlay a').length;
                  for(i = 0; i < linksAmount; i++) {
                     gkAddClass(figure.getElement('.gkTeamOverlay').getElements('a')[i], 'active', i);   
                  }
               },
               'mouseleave': function() {
                  figure.removeClass('hover');
                  figure.getElements('.gkTeamOverlay a').removeClass('active');
               }
            });
         }
      });
   }


You would need to either modify one of available data types or create your own.
User avatar
Moderator


cron