First, I want to say great job on the script! I'm really excited as I am close to having a completed prototype.
I've looked all over and tried a ton of different things but can't fix 2 problems I having. The first is during a slide show - the action during the transition from one slide to the next is weird. At the beginng of the transition, It looks like the border width of the image starts out at like 2 or 3 pixels but then increases to 5 or 6 pixels for just a second or so before going back to a 2 or 3 pixel width on the following image. Its easiest to see when transitioning between photos with the same dimensions, e.g landscape to landscape. You can see this issue here:
http://www.richmond-webhosting.com/test ... 992_hyatt/
The second problem seems to be unrelated to the first and only occurs with Internet Explorer. Viewing the same slide show above, you will notice that the left side of the controls (at bottom center of the image) looks to be cut off on the right side. This does not occur with Firefox.
I am using this in an Adobe Lightroom web engine. I have two highslide expanders on the page. One to handle a slide show of images (which is where the problem is) and another to handle an html form popup. There are no problems with the popup - although I don't want any suggested changes to affect the html popup. Thanks for any help.
Here are pertinent code and settings I'm using for the expanders:
Code: Select all
<link rel="stylesheet" type="text/css" href="$theRoot/resources/highslide/highslide.css" >
<script type="text/javascript" src="$theRoot/resources/highslide/highslide-full.js"></script>
<style type="text/css">
/* CSS for highslide cart */
.narrow { width: 300px; }
.container { width: 130px; overflow: hidden; }
</style>
<style type="text/css">
/* CSS for wrapperClassName: 'no-move-close's */
.highslide-html-content {
display: none;
width: 150px;
padding: 0 5px 5px 5px;
}
.no-move-close .highslide-header .highslide-move {
display: none;
}
.no-move-close .highslide-header .highslide-close {
display: none;
}
/* start */
.highslide-wrapper, .highslide-outline {
background: #000000;
}
.highslide-image {
border: none;
}
.highslide img {
border: 1px solid #D0D0D0;
}
.highslide:hover img {
border-color: #A0A0A0;
}
.highslide-active-anchor img {
visibility: visible;
border-color: #808080 !important;
}
.highslide-heading {
display: none;
margin: 0;
font-weight: bold;
padding: 2px;
}
.highslide-loading {
color: black;
border: 1px solid black;
background-color: white;
background-image: url(./resources/highslide/graphics/loader.white.gif);
}
.highslide-controls {
position: static !important;
margin-bottom: 0;
width: 135px !important;
}
.large-dark .highslide-controls, .large-dark .highslide-controls ul, .large-dark .highslide-controls a {
background-image: url(resources/highslide/graphics/controlbar-black-border.gif);
}
.highslide-controls .highslide-move {
display: none;
}
.highslide-controls .highslide-full-expand {
display: none;
}
/* end */
</style>
<script type="text/javascript">
hs.graphicsDir = './resources/highslide/graphics/';
hs.transitions = ['expand', 'crossfade'];
hs.fadeInOut = true;
hs.showCredits = false;
hs.allowMultipleInstances = true;
hs.enableKeyListener = false;
hs.headingEval = 'this.thumb.title';
hs.headingOverlay.position = 'top center';
hs.dragByHeading = false;
hs.outlineType = null;
hs.useBox = false;
hs.minWidth = 100;
hs.minHeight = 100;
hs.Width = 100;
hs.Height = 100;
hs.marginTop = 1;
hs.marginRight = 1;
hs.marginBottom = 1;
hs.marginLeft = 1;
hs.blockRightClick = true;
//hs.dimmingOpacity = 0.75;
// Add the controlbar
hs.addSlideshow({
slideshowGroup: 'group1', /* This slideshowGroup reflects the slideshowGroup added to the image popups in the gallery */
interval: 2500,
repeat: false,
useControls: true,
fixedControls: false,
overlayOptions: {
className: 'large-dark',
opacity: '0.75',
offsetX: '0',
offsetY: '-15',
position: 'bottom center',
hideOnMouseOut: true
}
});
// gallery config object
var config1 = {
slideshowGroup: 'group1',
transitions: ['expand', 'crossfade'],
align: 'center'
}
var config2 = {
contentId: 'highslide-html',
usebox: true,
allowSizeReduction: true,
objectType: 'iframe',
outlineType: 'rounded-white',
width: 52,
objectWidth:40,
height: 100
}
// close if mouse is not over on expand (using the internal mouseIsOver property)//
hs.Expander.prototype.onAfterExpand = function (sender) {
if(this.slideshowGroup != 'group1' && !sender.mouseIsOver) sender.close();
}
// close on mouse out
hs.Expander.prototype.onMouseOut = function (sender) {
if(this.slideshowGroup != 'group1')
sender.close();
}
</script>
