Hi,
I am having the same problem but when I tried to use the code that you provided, it doesn't seem to work for me.
This just happens intermittently. Sometimes the thumbstrip are in the bottom center (the way I want it), sometimes it goes to the left. Then when I click Next on the slideshow, the thumbstrips go to bottom center. This intermittent behaviour happens in SAFARI, FIREFOX. But it works in IE. PLEASE HELP..
When I tried debugging it with firebug, it turns out that when the thumbstrips are in the left, this is the code :
- Code: Select all
<div id="hsId1" class="highslide-thumbstrip-horizontal-overlay" style="border: medium none ; margin: 0pt 0pt 0pt -569px; padding: 0pt; overflow: hidden; position: absolute; visibility: visible; width: auto; direction: ltr; opacity: 1; left: 50%; height: auto; bottom: 5px; z-index: 4;">
<div class="highslide-thumbstrip highslide-thumbstrip-horizontal" style="display: block;">
<div class="highslide-thumbstrip-inner">
<table style="left: 0px;">
If the thumbstrips are in the bottom center, this is the code I got from firebug:
- Code: Select all
<div id="hsId1"
class="highslide-thumbstrip-horizontal-overlay"
style="border: medium none ; margin: 0pt 0pt 0pt -300px; padding: 0pt; overflow: hidden; position: absolute; visibility: visible; width: auto; direction: ltr; opacity: 1; left: 50%; height: auto; bottom: 5px; z-index: 4;">
<div class="highslide-thumbstrip highslide-thumbstrip-horizontal" style="display: block;">
<div class="highslide-thumbstrip-inner">
<table style="left: 0px;">
It seems that the right margin is
margin: 0pt 0pt 0pt -300px; How do I set the margin for the thumbstrips?
Here is the rest of my configuration:
- Code: Select all
<script type="text/javascript" src="/spring-portlet-sample/js/highslide/highslide-full.js"></script>
<script type="text/javascript" src="/spring-portlet-sample/js/swfobject/swfobject.js"></script>
<link rel="stylesheet" type="text/css" href="/spring-portlet-sample/js/highslide/highslide.css" />
<script type="text/javascript">
hs.graphicsDir = '/highslide/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.fadeInOut = true;
hs.dimmingOpacity = 0.8;
hs.outlineType = 'rounded-white';
hs.captionEval = 'this.thumb.alt';
hs.marginBottom = 105; // make room for the thumbstrip and the controls
hs.numberPosition = 'caption';
hs.autoplay = true;
// Add the slideshow providing the controlbar and the thumbstrip
hs.addSlideshow({
//slideshowGroup: 'group1',
interval: 8000,
repeat: false,
useControls: true,
overlayOptions: {
className: 'text-controls',
position: 'bottom center',
relativeTo: 'viewport',
offsetY: -60
},
thumbstrip: {
position: 'bottom center',
mode: 'horizontal',
relativeTo: 'viewport',
offsetY: -5
}
});
// Open the first thumb on page load
hs.addEventListener(window, 'load', function() {
document.getElementById('thumb1').onclick();
});
</script>
This is also how I use highslide
- Code: Select all
<a id="thumb1" name="thumb1" class='highslide' href='player.swf'
onclick="return hs.htmlExpand(this, { objectType: 'swf', swfOptions: {version: '8', flashvars: {playerready:'registerPlayer', file: '&id=player0&file=file1.mp4&backcolor=000000&frontcolor=FFFFFF&lightcolor=555555&screencolor=000000&stretching=fill&autostart=true' }, params: {allowscriptaccess: 'always', allowfullscreen: 'true'} }, width: 400,
objectWidth: 400, objectHeight: 400, maincontentText: 'You need to upgrade your Flash player'} )">
I have also attached a screenshot of the problem. Sorry if my post is very long.
Thank you sooo much! Really appreciate your help!
