Hello -
The size of the scroller is auto-calculated based on the following:
1) Number of products in view during scrolling. If you say you want four items to show up between scrolls, then the scroller must be big enough to show those four. That size depends on the following options.
2) Image width plus padding. For Horizontal Scrollers: The width specified plus 5 pixels will be multiplied by the number of Visible items specified. That number plus 80 pixels will be used to determine the width of the entire scroller. For example if image width is 150 and Visible is set to 4, the calculation would be 150 + 5 = 155. 155 x 4 = 620. 620 + 80 = 700. The entire scroller would be 700 pixels. For Vertical Scrollers: The width specified plus 40 pixels will be the height.
3) Image height plus padding and Title Height. For Vertical Scrollers: The height specified + the Title Height + 5 pixels will be multiplied by the number of Visible items specified. That number plus 80 pixels will be used to determine the height of the entire scroller. For example if image height is 120, the Title height is 30, and Visible is set to 4, the calculation would be 150 + 5 = 155. 155 x 4 = 620. 620 + 80 = 700. The entire scroller would be 700 pixels tall. For Horizontal Scrollers: The height specified here, plus the Title Height, plus 40 pixels will be the height.
4) Title Height. The 'title height' must be set high enough to accommodate whatever you plan to show. The Title Height isn't needed if you are not showing the title, the short description, or the add-to-cart button. However, depending on what you are planning to show, you must allow enough height to cover the Title, Short Description, and Add-to-Cart options. If you have too little space here, then some information can be cut off.
Rather than setting a size for the scroller and forcing the objects to display in that space, we let you specify the object sizes and then we size the scroller to render the display you want.
The entire scroller doc is here:
www.corshops.com/VM_JProduct_Scroller_doc.html
All CSS files for the module are found here:
modules/mod_vm_jproduct_scroller/js/skins/default/
in your install.
If you open that directory up, you will see two different kinds of CSS files - one for full size and one for thumbs. The first decision to make when customizing is - are you using full size images or thumbnails? Or both, on different pages?
After you decide full or thumb, you will then notice that you have different files ranging from skinFull.css to skinThumb9.css. Each scroller can have an instance ID, here is the documentation on that:
Number to use to make this scroller unique. 0-9 are available for up to 10 scrollers per page. Only change this if you will have multiple scrollers on the same page!
The number you put in this slot in the module configuration equates to the same numeric equivalent on the CSS. So if you module has a '1' in this field to make it unique, then to customize the skin you would look for skinFull1.css
As delivered by CorFun, all of these skins are the same. We have to provide 10 of them so that if you want more than one scroller on the page (the way we have them on CorShops), then each instance must have a corresponding CSS. If you only ever have one scroller per page, then you only need to change one CSS file. If you have multiple to a page, then you may need to change two of more of these files.
The excellent possibility this opens up, as well, is that you can customize the scrollers in different ways and use them differently. If you put an identifier of '3' on a scroller, then it will use that corresponding CSS, even if it is the only scroller on the page! So the flexibility is quite high.
Regards,