Swap Images via Mouseover or Click Add-on: how to add CSS Style?

[vojager]

Swap Images via Mouseover or Click Add-on:

http://www.zen-cart.com/index.php?ma...roducts_id=311

Is it possible to add some CSS Style attributes to additional images thumbnails in this add-on? (aligning them properly below the main image, setting border style, margin) The additional pics does not look good without some styling. If this possible, where to add the CSS rules?

[gjh42]

It should be possible, but we can't give exact directions without seeing it live on your site.

You always add CSS rules in your stylesheet (/includes/templates/your_template/css/stylesheet.css).

[vojager]

It should be possible, but we can't give exact directions without seeing it live on your site.

You always add CSS rules in your stylesheet (/includes/templates/your_template/css/stylesheet.css).

demo site:
http://sunstream.isgreat.org/index.p...products_id=27

For some reason, image swap on Mouseover not work for me.
I want place additional images under the main product image, align additional images left, set 1px border around small images, and around product viewport.

Something like this
sample

Can the CSS rules be added into add-on itself?

[gjh42]

Can the CSS rules be added into add-on itself?
No, you always add CSS rules to a stylesheet. It is possible to use inline styling, but not recommended.

[vojager]

Can the CSS rules be added into add-on itself?
No, you always add CSS rules to a stylesheet. It is possible to use inline styling, but not recommended.

Some add-ons have own CSS files. The Product Additional Images is feature of Zen cart itself, not the specific template? So, have to adjust template and css to arrange additional images like in above sample?

[gjh42]

Yes, "a" stylesheet - can be the main one or an individual mod's stylesheet.

To get the additional images displayed just below the main image instead of at the bottom of the page, you first need to move the additional images block of code up in
/includes/templates/your_template/templates/tpl_product_info_display.php.
Then you can style #productAdditionalImages {} and .additionalImages {} as desired for fine-tuning.

[vojager]

Yes, "a" stylesheet - can be the main one or an individual mod's stylesheet.

To get the additional images displayed just below the main image instead of at the bottom of the page, you first need to move the additional images block of code up in
/includes/templates/your_template/templates/tpl_product_info_display.php.
Then you can style #productAdditionalImages {} and .additionalImages {} as desired for fine-tuning.

by individual mod's stylesheet you mean the additional one which belongs to my_template?

What is difference between #productAdditionalImages and .additionalImages?

Some idea why swap images via Mouseover not work?

[vojager]

Oops, I forgot I have set image swap via onclick event, sorry.

Does these thumbnails are controlled by id #productAdditionalImages or class .additionalImages ? What is difference between them?

[vojager]

In the default onMouseOver mode, clicking on additional images bring a popup window with the "large" version displayed, whereas this option not work for main product image. I want to make this on contrary, i.e. to disable popup option for additional images and enable it for main product image. How to implement this?

[gjh42]

For that you need to talk to someone familiar with the mod's code.
#productAdditionalImages is the id of the whole additional images group, while .additionalImages is the class for each additional image.

"by individual mod's stylesheet you mean the additional one which belongs to my_template?"
Either your template's stylesheet, or a stylesheet just for the mod, which may be in your template's /css/ folder.