Topic: Space between main image and thumbnail

Where is the setting that controls two things: the amount of space between the thumbnail row and the main image (need much less), and 2. The number of thumbnails (or width) in the thumb. row. Thanks for your help!

Re: Space between main image and thumbnail

Where is the setting that controls two things: the amount of space between the thumbnail row and the main image (need much less)

Try reducing the value of the stageHPadding configuration option from its default value of 30. This option sets the amount of horizontal space between gallery elements in pixels.

and 2. The number of thumbnails (or width) in the thumb. row. Thanks for your help!

The number of thumbnails in each row is set with the thumbColumns configuration option, the width of each thumbnail is set with the thumbWidth configuration option and the distance between the thumbnails is set with the thumbPadding configuration option.

For reference, the full list of SimpleViewer-Pro configuration options can be found here.

Steven Speirs
SimpleViewer Support Team.

Re: Space between main image and thumbnail

Thanks for the reply. I can't increase the number of thumbnails past six. I can reduce it, but not increase. Is that supposed to be?

Second, the spacing has been set to as low as zero = stageHPadding="0" ... I tried other values, too, but nothing impacted the space at all. Any other ideas?

Re: Space between main image and thumbnail

I can't increase the number of thumbnails past six. I can reduce it, but not increase. Is that supposed to be?

No. You can choose to have whatever values you like for the thumbColumns and thumbRows configuration options.
Please note that thumbnails run from left to right in each row and form a new row only when the allotted number of columns have been filled in the current row.

Second, the spacing has been set to as low as zero = stageHPadding="0" ... I tried other values, too, but nothing impacted the space at all. Any other ideas?

If the thumbnails are positioned left or right, then setting stageHPadding="0" will make the edge of the widest main image in your gallery touch the edge of the innermost thumbnails. If you would like all the images in your gallery (of all aspect ratios) to touch the thumbnails, then set imageScaleMode="FILL" to ensure that all images fill the available image area.

Steven Speirs
SimpleViewer Support Team.

Re: Space between main image and thumbnail

Thanks for your help. I'm narrowing things down a bit ... this last question should do it, though. Does some of the padding issue have to do with the flex feature of the gallery? When I reduce my browser size, that gap starts to decrease quite a bit. Should I be switching to an absolute size during the creation of the gallery?

Next, when we insert the code into, say, a table cell, is there any way to reduce the rather drastic amount of padding around the stage and thumbs? I need this to fit into a 800-ish X 600-ish area ... full screen like this isn't an option because it needs to nest with other elements.

So, I tossed together two quick .html pages for you to look at. One has a flexible layout and the other is a straight-up HTML page with fixed table sizes. No matter what we try to do, they padding around the stage expands to 100 percent. How do you avoid this?

With flexible layout BUT fixed cell size: http://weefivefamily.com/test/Untitled-5.html
Straight HTML with fixed cell size: http://weefivefamily.com/test/test_home.html

Thanks!

Re: Space between main image and thumbnail

Does some of the padding issue have to do with the flex feature of the gallery? When I reduce my browser size, that gap starts to decrease quite a bit. Should I be switching to an absolute size during the creation of the gallery?

Setting:

stageHPadding="0"
imageScaleMode="FILL"

... will ensure that there is never a gap between the thumbnails and the main image (though large images may be cropped). When using the default value for imageScaleMode ('SCALE'), large images are scaled down to ensure that they are displayed in their entirety at their original aspect ratio and, depending on the dimensions of the user's browser, this may result in a gap between the thumbnails and the main image.
If using imageScaleMode="SCALE", set:

stageHPadding="0"
imageHAlign="LEFT"

Using a Fixed Layout (to absolutely position gallery elements) would be an alternative method of ensuring that there is never a gap between the thumbnails and the main image.

is there any way to reduce the rather drastic amount of padding around the stage and thumbs?

Please see the Layout Troubleshooting section of the SimpleViewer-Pro Layout Guide which deals with the question:
I have extra spacing in my gallery. How do I get rid of it?

Also, when using a percentage height for your gallery, make sure that all parent containers of the gallery have a height specified via CSS and please see the 'Using Percentage Heights' note in this section.

Steven Speirs
SimpleViewer Support Team.

Re: Space between main image and thumbnail

Thanks a lot! This should do it. I can tweak my sizing from here. You guys always provide great service!

Re: Space between main image and thumbnail

I just realized something. I manually added the stageHPadding="0" and imageScaleMode="FILL" values manually. When I use SVBuilder-Pro and export it, it overwrites those values. Will I need to manually insert those each time? Or am I missing something in SVBuilder. I've looked all over that application and don't see those settings. But I might be missing it!

Re: Space between main image and thumbnail

I'm a moron  lol  I figured it out ...