New RC with integrated thumbstrip

[torstein.honsi]

The time has come to announce version 4.1 RC, ready for testing online and download in this zip package. The greatest news in this version is the thumbstrip, and the possibility to place it - and other overlays - directly relative to the viewport. The thumbstrip can be rendered as a vertical or horizontal strip, or just an unordered list. With this addition Highslide steps up to become a complete gallery frontend, as seen in the new examples under "With Gallery" in the download package. So please, go on and test it, report bugs and help us on the way to a stable release!

[EarlyOut]

The easing equations are being done incorrectly. For example:

hs.easing = 'easeInBack';
hs.easingClose = 'easeInQuad';

The hs.easing is correct, but the hs.easingClose is actually producing the 'easeInBack' effect, instead of 'easeInQuad'.

I'm also having trouble with the thumbstrip sizing, but I'm just cobbling together experiments from existing pages, so I'm sure I'm missing something critical. But in brief, a horizontal thumbstrip is resizing the thumbnails, but not preserving their aspect ratio. So, a thumbnail that's actually 144x102 is being resized to 144x40, and is stretched. Does this ring a bell, and can you steer me towards what I should be looking for? If not, I'll see if I can put together a clean working example. The samples provided in the package are working fine, of course.

[EarlyOut]

I found the problem with the improperly resized thumbstrip images. If the HTML includes a width for the thumbnail, the thumbstrip images don't preserve their aspect ratio.

Doesn't work:

[code]<img src="thumbs\mydog.jpg" width="144" height="102">[/code]
Get rid of width, and it's fine.

Edit: BBcode seems to be off, but it's set to Yes in my posting preferences. How do I turn it on again?

Edit again: I see it's only disabled in this section of the forums. BBcode works fine for me in the "usage" forum.

[EarlyOut]

Another problem: if there are only a few thumbnails, 'bottom center' for the thumbstrip doesn't center properly in IE7 - it left-justifies. OK in FF. In the distributed example, gallery-horizontal-strip.html, delete the calls to all but 5 or 6 of the thumbnails to see the problem.

[torstein.honsi]

Thanks Jeff, I'll fix the bugs you have pointed out.

Regarding the ascpect ratio of the thumbnails, in highslide.css the height is set to 40px to make the thumbstrip look cleaner. As you say, this works when no width is set. Perhaps setting width:auto in the same CSS rule will fix the problem without actually removing the attributes on the img tag itself.

Code: Select all

.highslide-thumbstrip-horizontal img {
   width: auto;
   height: 40px;
}

[EarlyOut]

Yes, width: auto provides an instant cure for that little problem!

[EarlyOut]

Another odd bit of behavior: using the gallery-horizontal-strip.html example, click a thumbnail to expand, then click to close the expander. Now resize the browser window. Now, nothing responds to a click unless you refresh with an F5. This is in Firefox. In IE7, it works OK.

[EarlyOut]

A transition problem. In the gallery-horizontal-strip.html example, replace the first image and its thumbnail with the attached two files. Now, in either IE7 or FF with a 1280x1024 screen resolution, open the first thumbnail. Arrow right to the next one. Now arrow back to the first one again, and notice the scrollbars (both horizontal and vertical) that appear, then disappear. Oddly, it works OK with a smaller browser window.

[torstein.honsi]

Thanks again EarlyOut,

I fixed the four bugs you have reported except the centered thumbstrip which I am still working on for IE6.

PS: I haven't uploaded the fixes.

[EarlyOut]

That was fast! Are the fixes in the Javascript, the CSS, or both? I don't use highslide.css, but instead extract the chunks of it that I need for my own stuff, so if there are changes in there, I'll need to hunt them down.

Even though about 10% of my visitors use IE6, I confess that I've pretty much thrown them to the wolves (along with the 800x600 monitor people). If someone complains that something doesn't work properly in IE6, my response is, "use IE7 or FF!"

[torstein.honsi]

Some are changes to the CSS, some to the JS.

I wish I could do that to IE6 users, but 10% is still a lot and many of those users don't know better. If someone told my father that "IE6 is bad, you need to upgrade to Firefox" he wouldn't have the slightest idea what it meant. All he knows is that the red fox icon on my T-shirt is the same as I have told him to click when he wants to go on the internet

Anyway, in the 4.1 version I have moved more IE6 specific stuff out to the highslide-ie6.css style sheet. In some years we can forget about those hacks.

[DCS]

so is there some way I can fix the thumbstrip not centering issuing in IE7 in the interim until the fixes are uploaded?

[EarlyOut]

The current HS 4.1.2 includes proper centering of the thumbstrip in IE7. And, as Torstein's previous post indicates, it's just a one-liner in the CSS, anyway.

[DCS]

Okay I'll check it out - I just downloaded 4.1 RC last week - thought that was still the latest version

...update... just downloaded and installed 4.1.2 and still have the thumbstrip that doesn't centre in IE - displays left-justified

[RoadRash]

I assume you are talking about the gallery with thumbstrip above inside the expander ÔÇô gallery-thumbstrip-above.html.
Here is how to center the thumbstrip for that gallery:
Set position to top center and add negative offsetY to the thumbstrip.
Add an empty headingText and add height to the .highslide-heading to make room to the thumbstrip.

See example page here: http://www.roadrash.no/hs-support/galle ... tered.html