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

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