News Show Pro GK5 in 2 columns

Hi,

I need to place the module in 2 columns

and I is not

http://cityglobal.cl/

Hi

It's missconfigured a little bit. You have used links layout which do not have columns settings. But please leave it like that and in "article layout" enable to show one page with article in one row and one column. So an article layout will take the left side and put links layout You have there already to right.

Hi,

I prefer a single column, 2 columns need to be



I have another question

I want to place this module html5

MY
LOYAL
TEAM

http://demo.gavick.com/joomla25/john/


in this other template

http://cityglobal.cl/directores.html


I put the html in a module

Code: Select all

<div class="gkTeam" data-cols="4" data-pages="2">
   <div>
      <div class="active">
         <span><img alt="Team member" src="images/demo/team_1.jpg" /></span>
         <h3>
            John Hammond</h3>
         <small>CEO, Creative Director</small><span><img alt="Team member" src="images/demo/team_2.jpg" /></span>
         <h3>
            Dennis Hawkings</h3>
         <small>Lead Developer</small><span><img alt="Team member" src="images/demo/team_3.jpg" /></span>
         <h3>
            Tom Weerd</h3>
         <small>General manager</small><span><img alt="Team member" src="images/demo/team_4.jpg" /></span>
         <h3>
            John Doe</h3>
         <small>Webmaster</small></div>
      <div>
         <span><img alt="Team member" src="images/demo/team_1.jpg" /></span>
         <h3>
            John Hammond</h3>
         <small>CEO, Creative Director</small><span><img alt="Team member" src="images/demo/team_2.jpg" /></span>
         <h3>
            Dennis Hawkings</h3>
         <small>Lead Developer</small><span><img alt="Team member" src="images/demo/team_3.jpg" /></span>
         <h3>
            Tom Weerd</h3>
         <small>General manager</small><span><img alt="Team member" src="images/demo/team_4.jpg" /></span>
         <h3>
            John Doe</h3>
         <small>Webmaster</small></div>
   </div>
</div>


configure it


and I put this css

Code: Select all

.gkTeam {
    box-sizing: border-box;
    margin: 0 40px;
    overflow: hidden;
    position: relative;
    top: -35px;
    z-index: 1;

override.css



but not me, can it be done?

What mistake I am making?

Hi

I need to see this code on this new website to tell, but I suspect there is more CSS in gk_stuff.css and some Javascript in /js/gk.scripts.js file.

I sent you the ftp access by private message

Hi

Ok, but moving functionality from one template to another is out of our support. I can advice but cannot do this for You. Simply it will take the time I need to help other users.

Anyway. Please disable using editor in user settings. Than add this code to where You want to use it:

Code: Select all

<div class="gkTeam" data-cols="4" data-pages="1">
<div>
<div class="active">
<figure data-scroll-reveal="enter from the top and move 50px over 0.4s" data-fb="#" data-twitter="#" data-gplus="#"><span><img src="images/demo/team_1.jpg" alt="Team member" /></span><figcaption data-scroll-reveal="enter from the bottom and move 50px over 0.4s after 0.1s"><h3>John Hammond</h3><small>CEO, Creative Director</small></figcaption></figure>
<figure data-scroll-reveal="enter from the top and move 50px over 0.4s after 0.2s" data-fb="#" data-twitter="#" data-gplus="#"><span><img src="images/demo/team_2.jpg" alt="Team member" /></span><figcaption data-scroll-reveal="enter from the bottom and move 50px over 0.4s after 0.3s"><h3>Dennis Hawkings</h3><small>Lead Developer</small></figcaption></figure>
<figure data-scroll-reveal="enter from the top and move 50px over 0.4s after 0.4s" data-fb="#" data-twitter="#" data-gplus="#"><span><img src="images/demo/team_3.jpg" alt="Team member" /></span><figcaption data-scroll-reveal="enter from the bottom and move 50px over 0.4s after 0.5s"><h3>Tom Weerd</h3><small>General manager</small></figcaption></figure>
<figure data-scroll-reveal="enter from the top and move 50px over 0.4s after 0.6s" data-fb="#" data-twitter="#" 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>
</div>
</div>
</div>


here is a CSS code You should copy to override.css:

Code: Select all

/* Team */
.gkTeam {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
   margin: 0 40px;
   overflow: hidden;
   position: relative;
   top: -35px;
   z-index: 1;
}
.gkTeam > div {
   -webkit-transition: all .5s ease-out;
   -moz-transition: all .5s ease-out;
   -ms-transition: all .5s ease-out;
   -o-transition: all .5s ease-out;
   transition: all .5s ease-out;
}
.gkTeam > div > div {
   opacity: 0;
   float: left;
   -webkit-transition: all .5s ease-out;
   -moz-transition: all .5s ease-out;
   -ms-transition: all .5s ease-out;
   -o-transition: all .5s ease-out;
   transition: all .5s ease-out;
}
.gkTeam > div > div.active {
   opacity: 1;
}
.gkTeam[data-pages="1"] > div { width: 100%; }
.gkTeam[data-pages="2"] > div { width: 200%; }
.gkTeam[data-pages="3"] > div { width: 300%; }
.gkTeam[data-pages="4"] > div { width: 400%; }
.gkTeam[data-pages="5"] > div { width: 500%; }
.gkTeam[data-pages="1"] > div > div { width: 100%; }
.gkTeam[data-pages="2"] > div > div { width: 50%; }
.gkTeam[data-pages="3"] > div > div { width: 33.333333%; }
.gkTeam[data-pages="4"] > div > div { width: 25%; }
.gkTeam[data-pages="5"] > div > div { width: 20%; }
.gkTeam[data-cols="1"] figure { width: 100%; }
.gkTeam[data-cols="2"] figure { width: 50%; }
.gkTeam[data-cols="3"] figure { width: 33.333333%; }
.gkTeam[data-cols="4"] figure { width: 25%; }
.gkTeam figure {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
   float: left;
   padding: 0 21px;
   position: relative;
   text-align: center;
}
.gkTeam figure img {
   display: block;
}
.gkTeam figure span {
   display: inline-block;
   position: relative;
}
.gkTeam h3 {
   color: #3a3636;
   font-size: 18px;
   font-weight: bold;
   margin: 40px 0 10px 0;
   position: relative;
   text-align: center;
   text-transform: uppercase;
}
.gkTeam h3:before {
   content: "-";
   font-size: 14px;
   font-weight: normal;
   left: 0;
   position: absolute;
   text-align: center;
   top: -24px;
   width: 100%;
}
.gkTeam small {
   color: #3a3636;
   display: block;
   font-size: 13px;
   text-align: center;
}

/* Team pagination */
.gkTeamPrev {
   left: -50px;
   position: absolute;
   top: 50%;
}
.gkTeamNext {
   position: absolute;
   right: -50px;
   top: 50%;
}
.gkTeamPrev,
.gkTeamNext {
   color: #333;
   font-size: 32px;
   line-height: 32px;
   margin-top: -100px;
}
.gkTeamPrev i,
.gkTeamNext i {
   font-size: 32px;
   line-height: 32px;
}
.gkTeamPrev:hover,
.gkTeamNext:hover {
   color: #1dbaf4;
}

/* Team overlays */

.gkTeamOverlay {
   background: #1dbaf4;
   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 .gkTeamOverlay {
   opacity: 1; filter: alpha(opacity=100);
}

.gkTeamOverlay > a {
   border: 2px solid #fff;
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   border-radius: 50%;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   display: block;
   height: 50px;
   left: 50%;
   margin-left: -25px;
   opacity: 0; filter: alpha(opacity=0);
   overflow: hidden;
   position: absolute;
   text-indent: -9999px;
   top: 64%;
   -webkit-transition: all .2s ease-out;
   -moz-transition: all .2s ease-out;
   -ms-transition: all .2s ease-out;
   -o-transition: all .2s ease-out;
   transition: all .2s ease-out;
   width: 50px;
}

.gkTeamOverlay a.active {
   opacity: 1.0; filter: alpha(opacity=100);
   top: 50%;
}

.gkTeamOverlay a:hover {
   background: #f1c40f;
}


and JavaScript for /js/gk.scripts.js file

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-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++;
            }

            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');
               }
            });
         }
      });
   }


   // team pagination
   jQuery('.gkTeam').each(function(i, item) {
      item = jQuery(item);
      if(parseInt(item.attr('data-pages'), 10) > 1) {
         item.parent().css('position', 'relative');
         var current_page = 0;
         var amount_of_pages = item.attr('data-pages');
         var prevLink = new jQuery('<a class="gkTeamPrev" href="#"><i class="gk-icon-arrow-left"></i></a>');
         var nextLink = new jQuery('<a class="gkTeamNext" href="#"><i class="gk-icon-arrow-right"></i></a>');
         var wrap = item.find('div').first();
         var pages = wrap.children('div');
         pages[0].addClass('active');
         
         item.after(prevLink);
         item.after(nextLink);
         
         prevLink.click(function(e) {
            e.preventDefault();
            current_page = (current_page > 0) ? current_page - 1 : amount_of_pages - 1;
            wrap.css('margin-left', (current_page * -100) + "%");
            pages.removeClass('active');
            pages[current_page].addClass('active');
         });
         
         nextLink.click(function(e) {
            e.preventDefault();
            current_page = (current_page < amount_of_pages - 1) ? current_page + 1 : 0;
            wrap.css('margin-left', (current_page * -100) + "%");
            pages.removeClass('active');
            pages[current_page].addClass('active');
         });
      }
   });


it may be all, but to be honest I doubt it. I bet icons and animations will be missing still.

Hi

Indeed lack animation and icons ....

but as I do that, which is at least to copy and paste a template to another

thanks!

Hi

I can see You've used NSP instead Looks great and was much easier to do.

if I was taking too long ...


should make an animation module with that photo placed on an icon with social networking .... I find it very nice, I liked it .... it was the effect I wanted ....



to take it into consideration