It is currently Thu Oct 23, 2014 2:40 am Advanced search

Thumbstrip only left aligned 'below center' does not work

Technical support, bug reports, feature requests and more.

Thumbstrip only left aligned 'below center' does not work

Postby RainerK » Wed Feb 03, 2010 4:25 pm

the value "below" for thumbstrip position: works but is aligned left
and not centered like 'bottom center' and the combination
position: 'below center',
does'nt work

How can I center the thumbstrip with below?

Thanks for help

Rainer

my 1st workaround in highslide-with-gallery.js:
line 2177
Code: Select all
   } else if (/^below$/.test(p)) {
      hsld0div = 600 - overlay.style.width;
      hsld0divwidth = hsld0div/2;
      hs.setStyles(overlay, {
         position: 'relative',
/* new  with expander Box width 600px */
         left: (300 - Math.round(overlay.offsetWidth / 2)) +'px',
/* new  end*/
         top: '100%',
         marginTop: this.y.cb +'px',
         width: 'auto'
RainerK
 
Posts: 29
Joined: Tue Jul 08, 2008 3:23 pm

Re: Thumbstrip only left aligned 'below center' does not work

Postby torstein.honsi » Thu Feb 04, 2010 11:06 am

The logic for centering the overlays is quite complicated, and it hasn't been implemented for the above and below positions yet. But there is a hackish workaround if you can live with that. Just position the overlay in 'bottom center', give it an y offset, and add a dummy overlay as the background for the thumbstrip. See it live at http://www.highslide.com/studies/galler ... enter.html.

Code: Select all
// Add the slideshow providing the controlbar and the thumbstrip
hs.addSlideshow({
   //slideshowGroup: 'group1',
   interval: 5000,
   repeat: false,
   useControls: true,
   fixedControls: 'fit',
   overlayOptions: {
      position: 'bottom center',
      opacity: 0.75,
      hideOnMouseOut: true
   },
   thumbstrip: {
      position: 'bottom center',
      offsetY: 60,
      mode: 'horizontal',
      relativeTo: 'expander'
   }
});

// Add a dummy overlay as a background for the thumbstrip
hs.registerOverlay({
   html: '<div style="height: 60px"></div>',
   position: 'below'
});
Torstein Hønsi
CTO, Founder
Highsoft Solutions
User avatar
torstein.honsi
Site Admin
 
Posts: 9200
Joined: Thu Nov 09, 2006 1:22 pm
Location: Vik i Sogn, Norway

Re: Thumbstrip only left aligned 'below center' does not work

Postby RainerK » Thu Feb 04, 2010 2:38 pm

Thanks for help,

the hack does'nt work in Firefox the thumbnail links are not accessible
(probably dummy overly in higher z-index (4) over thumbstrip) ?
RainerK
 
Posts: 29
Joined: Tue Jul 08, 2008 3:23 pm

Re: Thumbstrip only left aligned 'below center' does not work

Postby torstein.honsi » Fri Feb 05, 2010 10:17 am

Okay, the old overlay zIndex problem. I've fixed that, but until the next Highslide release you'll have to live with an edit in the highslide-gallery.js file.

1) Use the updated code, including zIndex: 5, in http://highslide.com/studies/gallery-th ... enter.html.

2) In highslide-with-gallery.js, find this line:
Code: Select all
o.style.zIndex = o.hsId == 'controls' ? 5 : 4;


Replace it with this:
Code: Select all
o.style.zIndex = o.zIndex || o.hsId == 'controls' ? 5 : 4;
Torstein Hønsi
CTO, Founder
Highsoft Solutions
User avatar
torstein.honsi
Site Admin
 
Posts: 9200
Joined: Thu Nov 09, 2006 1:22 pm
Location: Vik i Sogn, Norway

Re: Thumbstrip only left aligned 'below center' does not work

Postby RainerK » Sat Feb 06, 2010 8:27 pm

Thanks a lot,
now it's working fine.

Rainer
RainerK
 
Posts: 29
Joined: Tue Jul 08, 2008 3:23 pm

Re: Thumbstrip only left aligned 'below center' does not work

Postby torstein.honsi » Mon Feb 08, 2010 10:01 am

You're welcome!
Torstein Hønsi
CTO, Founder
Highsoft Solutions
User avatar
torstein.honsi
Site Admin
 
Posts: 9200
Joined: Thu Nov 09, 2006 1:22 pm
Location: Vik i Sogn, Norway

Re: Thumbstrip only left aligned 'below center' does not work

Postby kaichanvong » Wed Jun 09, 2010 5:02 pm

Hey. First off, thank you for making this awesome bit of code and sharing it with us. It's really great to see stuff like this.

I took like RainerK, was looking to center align the thumbstrip...

I've found it quite tough because the mark up is injecting HSid# and then doing it's own thing for various elements when really it could be done using something a bit more semantic. What do you think? If you need any help working on it in the future - let me know, I'd really like to try give back or help out in any way possible.

I know you're working with lots of dynamic scaling for images etc so it cant be easy - but I'd love to help if I could.

Thanks,
Kai
kaichanvong
 
Posts: 1
Joined: Wed Jun 09, 2010 4:58 pm

Re: Thumbstrip only left aligned 'below center' does not work

Postby torstein.honsi » Thu Jun 10, 2010 12:50 pm

Thanks Kai,

It is indeed complicated. If you have suggestions for improvents of the code, you are welcome to post them.
Torstein Hønsi
CTO, Founder
Highsoft Solutions
User avatar
torstein.honsi
Site Admin
 
Posts: 9200
Joined: Thu Nov 09, 2006 1:22 pm
Location: Vik i Sogn, Norway

Re: Thumbstrip only left aligned 'below center' does not work

Postby iamjuvy » Thu Aug 26, 2010 12:18 pm

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! :)
Attachments
slideshow_tracker_bug_1.PNG
slideshow_tracker_bug_1.PNG (196.75 KiB) Viewed 7818 times
Last edited by iamjuvy on Thu Aug 26, 2010 1:14 pm, edited 1 time in total.
iamjuvy
 
Posts: 9
Joined: Tue Aug 24, 2010 8:40 am

Re: Thumbstrip only left aligned 'below center' does not work

Postby RoadRash » Thu Aug 26, 2010 12:26 pm

You problem isnÔÇÖt the same as in the original post. The original post was about thumbstrip relative to the expander, but you are using thumbsrip relative to the viewport so the fix from admin will not work in your case.
Can we please see your live page?
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
User avatar
RoadRash
 
Posts: 8225
Joined: Tue Jul 15, 2008 8:43 pm
Location: Fredrikstad, Norway

Re: Thumbstrip only left aligned 'below center' does not work

Postby iamjuvy » Fri Aug 27, 2010 11:07 am

Hi,

Opps, sorry. I thought there just about the same problem. Anywayz, here is the live page. This is in our staging server that I will demo to my project lead next week.. :(

http://202.172.34.148:8080/spring-portl ... @gmail.com

On the initial launch, the thumbnails are in below center but when you go to page 2, page 3... it goes to the left, when you click next on the slideshow, it goes to below center.

This only happens in firefox, safari. But it works well on IE.

Thank you soo much for the help. Much appreciated! :)
iamjuvy
 
Posts: 9
Joined: Tue Aug 24, 2010 8:40 am

Re: Thumbstrip only left aligned 'below center' does not work

Postby RoadRash » Fri Aug 27, 2010 2:06 pm

Hi,

I canÔÇÖt access your page. I'm being redirecet to this url: http://202.172.34.148:8080/jetspeed/portal/login
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
User avatar
RoadRash
 
Posts: 8225
Joined: Tue Jul 15, 2008 8:43 pm
Location: Fredrikstad, Norway

Re: Thumbstrip only left aligned 'below center' does not work

Postby iamjuvy » Sat Aug 28, 2010 2:07 am

Oh. sorry about that. Must have been a mistake with the auto-login. You can use our test account to login.

Username: [email protected]
Password: 222222

Then go to received contents tab, there are a lot of pictures and videos there for testing. Go to page2, 3..

Thank you soo much!
iamjuvy
 
Posts: 9
Joined: Tue Aug 24, 2010 8:40 am

Re: Thumbstrip only left aligned 'below center' does not work

Postby torstein.honsi » Mon Aug 30, 2010 9:45 am

For some reason, the width and height of your thumbnails isn't known, which is strange since you open the gallery on window load. Try adding width and height styles to your thumbnail markup to tell the client JavaScript obout the thumbnail sizes.
Torstein Hønsi
CTO, Founder
Highsoft Solutions
User avatar
torstein.honsi
Site Admin
 
Posts: 9200
Joined: Thu Nov 09, 2006 1:22 pm
Location: Vik i Sogn, Norway

Re: Thumbstrip only left aligned 'below center' does not work

Postby iamjuvy » Mon Aug 30, 2010 4:12 pm

Hi,

Sorry if this seems to be a dumb question. :) When you say "adding width and height styles to your thumbnail markup to tell the client JavaScript obout the thumbnail sizes." Does that mean like this?

Code: Select all
<a id="thumb1" class="highslide" onclick="return hs.expand(this)" style="color: rgb(85, 170, 0);" href="27081018170725_closing-20.jpg">
<img [b]width="156" height="117"[/b] src="27081018170725_closing-20.jpg" alt="Aug 27, 2010 | 06:17 PM GMT+0800"/></a>


I tried this but it still did not work. :(

Where is my thumbnail markup ? Is it the <a> or the <img> ? :?

Thanks so much for the help.
iamjuvy
 
Posts: 9
Joined: Tue Aug 24, 2010 8:40 am

Next

Return to Highslide JS Usage

Who is online

Users browsing this forum: Bing [Bot] and 1 guest