Adding Metro Grid module

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
Thu Mar 27, 2014 7:23 pm
Reply with quote
Report this post
Hi
I am replacing the Image Show GK4 by Metro Grid in homepage. I know the module will be "below" in the "header" position (below logo and menu), but that will not be a problem if I plan images well.
My problem is with the Metro Grid module, which does not respect the distances between each of the blocks. They are showing mounted and displaced. I think it's a problem with the template, but do not know where to take it. I hope your help. http://www.miraelmuro.cl
User avatar
Expert Boarder

GK User
Fri Mar 28, 2014 10:01 pm
Reply with quote
Report this post
Hi
Also my problem is animation no works. I think maybe is a library problem. You don't have a special forum for this module for this i have to ask this through template forum. I hope you can help me.
User avatar
Expert Boarder

teitbite
Tue Apr 01, 2014 9:19 pm
Reply with quote
Report this post
Hi

I'm sorry, but I do not know this module so I cannot help. Why won't You use GK Grid module instead? We have good documentation for it and it will surely cause no conflicts to templates.
User avatar
Moderator

GK User
Wed Apr 02, 2014 1:09 pm
Reply with quote
Report this post
But this is GK Grid module!
Maybe I wrote the template name that had it, but the module is GK Grid module.
The documentation is not enough 'cause don't have forum for issues: http://www.gavick.com/documentation/joo ... k5-module/
The animation don't work and also the margin or space between blocks. I have a custom html por each block with a size with a calculated by dividing 1100 px, ie each square image size is 183px. I think the module does not adjust the percentages from that size. What can be happening?
User avatar
Expert Boarder

teitbite
Wed Apr 02, 2014 9:40 pm
Reply with quote
Report this post
Hi

Haha. You said "Metro Grid" so I thought it's a different extention. Please send me an access to joomla panel. I'll try to figure it out than.
User avatar
Moderator

GK User
Thu Apr 03, 2014 1:21 pm
Reply with quote
Report this post
Well, I send you the pass through PM!
User avatar
Expert Boarder

teitbite
Thu Apr 03, 2014 7:59 pm
Reply with quote
Report this post
Hi

Please add this to override.css and make sure override is enabled in template settings:

Code: Select all
#gkHeaderNav.gkAbsoluteHeader {
    position: relative;
}

.gkGridGK5 p {
    margin: 0;
}
User avatar
Moderator

GK User
Fri Apr 04, 2014 1:49 pm
Reply with quote
Report this post
O.K! thanks you very much, now the module is not behind header and respect spaces between. But still don't have animation in each block, like this http://demo.gavick.com/joomla25/msocial/, although it's enabled.
User avatar
Expert Boarder

teitbite
Sun Apr 06, 2014 11:51 am
Reply with quote
Report this post
Hi

I've checked that and animation is a part of MSocial template, so it cannot be used here without a customisation to move it. I think it's in gk.script.js file in the part adding "loaded" class, but I'm not 100% sure if it's all. It's possible it may need some additional styling.
User avatar
Moderator

GK User
Mon Apr 07, 2014 7:51 pm
Reply with quote
Report this post
It's weird because the module is exemplified with MetroGrid template (https:/ / www.gavick.com / meter-grid-joomla-module.html), and also offers the possibility in module configuration from the dropdown menu "animation". The module must have the possibility of animation.
Anyway you think it can be a class in a. Js. I do not know how to add a class to a. Js.
Please I do not know where to ask something so simple in gavick.com, I see that there are problems with queries about the module. Where can I ask this?
User avatar
Expert Boarder

teitbite
Tue Apr 08, 2014 4:46 pm
Reply with quote
Report this post
Hi

It has an animation on it's own, when modules are loading they appear one after another with fade in effect. (m)social has an additional animation with sliding effect, but it's codded isto the msocial template and copying it to any other will require a customizations of a kind we do not support.

I may try and make it for You if You need it badly in my free time for a small fee, just email me if You are interested.
User avatar
Moderator

GK User
Tue Apr 08, 2014 11:21 pm
Reply with quote
Report this post
It's cheat, because the demo is the module in the template.
Well, please tell me how much you charge to add the code to the template storebox to have the effect of msocial. The idea is to then update the template and that the effect is maintained. Tell me by mail. Thanks.
User avatar
Expert Boarder

teitbite
Wed Apr 09, 2014 5:51 pm
Reply with quote
Report this post
Hi

Ok. I'm guessing we were talking about two different animations :/ Your last post has point me into right direction (at least I hope). It's really simple. In module settings You have a tab "Animation" and there You can select form couple of different types. Please take a look at the screen. I've change it to "Top Slide" which is used in (m)social demo.
User avatar
Moderator

GK User
Thu Apr 10, 2014 12:53 am
Reply with quote
Report this post
No, I think it's the other animation. It's the little change in the image appearance that tell me that the image is a link. It's not the "blocks emergence" when I refresh the site. The animation I want it's the "darkening of the image" to indicate that it is a sensitive area.
User avatar
Expert Boarder

teitbite
Thu Apr 10, 2014 10:04 pm
Reply with quote
Report this post
Hi

Ok, that's not even close to what I understood when You added first post :) This effect is pretty simple, doesn't even requires javascript.

Please add this code to override.css, please remember that override needs to be enabled in template settings.

Code: Select all
.gkGridElement a img {
transition: opacity 0.3s linear 0.3s;
-webkit-transition: opacity 0.3s linear 0.3s;
-moz-transition: opacity 0.3s linear 0.3s;
-ms-transition: opacity 0.3s linear 0.3s;
-o-transition: opacity 0.3s linear 0.3s;
opacity: 1;
}

.gkGridElement a img:hover {
opacity: 0.8;
}
User avatar
Moderator

GK User
Fri Apr 11, 2014 1:43 pm
Reply with quote
Report this post
Thank you very much!
I copied other styles of MSocial template to complete the effect. It goes all right, but I do not know how to fix the "edge" effect that is generated when the cursor is above the image. This border is in all images, sometimes above and sometimes in one side. Is a detail.
I have tried to modify the style gkGridElement img:. Hover but I see it do not take.
I send you a picture.
User avatar
Expert Boarder

teitbite
Sat Apr 12, 2014 3:43 pm
Reply with quote
Report this post
Hi

This will reduce the border:

Code: Select all
.gkGridGK5Wrap > .gkGridElement {
    transform: scale(1) !important;
    -webkit-transform: scale(1) !important;
    -moz-transform: scale(1) !important;
    -ms-transform: scale(1) !important;
    -o-transform: scale(1) !important;
}
User avatar
Moderator

GK User
Mon Apr 14, 2014 1:03 pm
Reply with quote
Report this post
Thanks you very very much! now it works, I'll have to learn CSS3 transform-origin because I did not know how!
:)
User avatar
Expert Boarder

teitbite
Tue Apr 15, 2014 4:39 pm
Reply with quote
Report this post
Hi

No problem. Transformations are really great. It's good that most of the browsers is supporting it already. Unfortunatelly still problems with older IE.
User avatar
Moderator


cron