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!

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

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...

You need some css

Try

#zentools106 .grid li {padding: 0;}

This is targetting this module only

Cheers
Paul

perfect! Thanks so much.

no problem

Cheers
Paul

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.

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

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.

Does the speed vary if you add titles as a quick test?

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.

I've asked a developer to take a look to see if he has a suggestion

Cheers
Paul

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

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?

Can you try this css

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

Thanks
Paul

That did the trick.

I'm not sure on the js to be honest but I will check back with the developer when he is next online

Cheers

I'd really appreciate that.

no problem will check and get back to you

Cheers
Paul

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