Support Forum

Please note that this forum is only available to you in read only mode. In order to contribute to this conversation you will need to renew your subscription.

zentools grid layout on demo

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

Hi

In the Grid 3 demo, the images have no margins, and they zoom when you hold the mouse over. I'd like to achieve both these effects at staging.honley.info/ in the sidebar.

Are these standard features of the zentools module? If so, where are the settings. It feels like I've tried them all!
  • jonburdon's Avatar
  • jonburdon
  • LIfetime Developer - Big Bamboo
  • 860 posts
  • Karma: 0
The administrator has disabled public write access.
Have you tried -

Disable "margin between grid items?" set to Yes -
in the grid settings

and
in image settings trying "Add image effect?" set to yes

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
That looks better now.

I also needed the setting:
Make images fill 100% of the container = yes

.. but I still have a horizontal gap.... hmmm...
  • jonburdon's Avatar
  • jonburdon
  • LIfetime Developer - Big Bamboo
  • 860 posts
  • Karma: 0
The administrator has disabled public write access.
You need some css

Try

#zentools106 .grid li {padding: 0;}

This is targetting this module only

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
perfect! Thanks so much.
  • jonburdon's Avatar
  • jonburdon
  • LIfetime Developer - Big Bamboo
  • 860 posts
  • Karma: 0
The administrator has disabled public write access.
no problem

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
One other thing - on my instance of this, the photos go large and resize back very slowly and sometimes seem to 'stick' at the large size.

Whereas on the demo they zoom rather than enlarging and go back to small straight away - nice and slick.

I'm using the same browser etc.
  • jonburdon's Avatar
  • jonburdon
  • LIfetime Developer - Big Bamboo
  • 860 posts
  • Karma: 0
The administrator has disabled public write access.
Looking at the demo site I installed locally for this to work as per the demo you need the same settings for title and overlay

e.g. title in the drag and drop list and in the grid settings both overlay options enabled
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Thanks

Is there any way to get the zooming without the black bar? (I don't want any captions titles at all - not even image name when you hold the mouse over - just zooming)

It still also seems to zoom out very slowly compared to the demo.
  • jonburdon's Avatar
  • jonburdon
  • LIfetime Developer - Big Bamboo
  • 860 posts
  • Karma: 0
The administrator has disabled public write access.
Does the speed vary if you add titles as a quick test?
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
I think it's settled down now and the speed is the same - maybe I changed a setting or something.

My only requirements now are:

1) no black bar and title
2) no image name on mouseover

If these aren't possible, I'll live with it.
  • jonburdon's Avatar
  • jonburdon
  • LIfetime Developer - Big Bamboo
  • 860 posts
  • Karma: 0
The administrator has disabled public write access.
I've asked a developer to take a look to see if he has a suggestion

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Hi,

1) To remove the black bar and title, make sure you have only the "image" added to "Layout" field, remove the "title".

In Grid Settings, change Animate Overlay effect to False and add this CSS:

#zentoolslist104 .allitems.text.container {
visibility: hidden;
}

2) To remove the image name on mouseover, you need to strip the image title attribute.
You can add this javascript to your template.js (at the end of file)

jQuery(function(){
jQuery('#zentoolslist104 .image img').attr('title', '');
jQuery('#zentoolslist104 .zenimage a').attr('title', '').data('title', '').data('thumbtooltip', '');
});


About the slow animations, make sure you haven't the browser's Code Inspector (developer tools) opened while testing, because it uses a lot of processing while animating.

Thanks
  • Anderson Grüdtner Martins's Avatar
  • Anderson Grüdtner Martins
  • LIfetime Developer - Big Bamboo
  • 94 posts
  • 10 Thanks
  • Karma: 8
The administrator has disabled public write access.
I have added the following to the end of my custom.css file.

#zentoolslist104 .allitems.text.container {
visibility: hidden;
}

Also, I have changed Grid settings / Animate Overlay effect to: NO

There is still a permanent black bar though :(

I pasted that js script at the end of js/template.js after all the other code, but I can still see the image name on mouseover. Am I doing something wrong?
  • jonburdon's Avatar
  • jonburdon
  • LIfetime Developer - Big Bamboo
  • 860 posts
  • Karma: 0
Last Edit: 8 years 2 months ago by jonburdon.
The administrator has disabled public write access.
Can you try this css

#zentoolslist106 .allitems.text.container{visibility: hidden;}

Thanks
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
That did the trick.
  • jonburdon's Avatar
  • jonburdon
  • LIfetime Developer - Big Bamboo
  • 860 posts
  • Karma: 0
The administrator has disabled public write access.
I'm not sure on the js to be honest but I will check back with the developer when he is next online

Cheers
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
I'd really appreciate that.
  • jonburdon's Avatar
  • jonburdon
  • LIfetime Developer - Big Bamboo
  • 860 posts
  • Karma: 0
The administrator has disabled public write access.
no problem will check and get back to you

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Hi,

I'm really sorry. I see the problem in my css and js :)
It is specific to the module ID, so I sent you the code with the module ID from my test installation... I should have changed it before sent you... sorry, missed that.


Could you try this JS code?

jQuery(function(){
jQuery('#zentoolslist106 .image img').attr('title', '');
jQuery('#zentoolslist106 .zenimage a').attr('title', '').data('title', '').data('thumbtooltip', '');
});

Thanks
  • Anderson Grüdtner Martins's Avatar
  • Anderson Grüdtner Martins
  • LIfetime Developer - Big Bamboo
  • 94 posts
  • 10 Thanks
  • Karma: 8
The administrator has disabled public write access.

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

Happy Campers