ps for some strange reason the slideshow isn't crossfading (which is vital to me, as I'm showing transitions between elements of a program). I'm using the following code, which has hs.transitions = ['expand', 'crossfade']; in it:
Code: Select all
<script type="text/javascript">
//<![CDATA[
// in-page gallery + plain image popups without controlbar
hs.graphicsDir = '/highslide/graphics/';
hs.transitions = ['expand', 'crossfade'];
hs.restoreCursor = null;
hs.lang.restoreTitle = 'Click for next image';
hs.align = 'center';
hs.captionEval = 'this.a.title';
hs.dimmingOpacity = 0.6;
hs.wrapperClassName = 'borderless';
//close button
hs.registerOverlay({
html: '<div class="closebutton" onclick="return hs.close(this)" title="Close"></div>',
position: 'top right',
fade: 2
});
// Add the slideshow providing the controlbar and the thumbstrip for the in-page gallery
hs.addSlideshow({
slideshowGroup: 'group1',
interval: 4000,
repeat: true,
useControls: true,
overlayOptions: {
position: 'bottom right',
offsetX: -7,
offsetY: 23
},
thumbstrip: {
position: 'above',
mode: 'horizontal',
relativeTo: 'expander'
}
});
// Options for the in-page gallery
var inPageOptions = {
slideshowGroup: 'group1',
outlineType: null,
dimmingOpacity: 0,
allowSizeReduction: false,
wrapperClassName: 'in-page controls-in-heading',
thumbnailId: 'gallery-area',
useBox: true,
width: 920,
height: 350,
targetX: 'gallery-area 10px',
targetY: 'gallery-area 10px',
numberPosition: 'caption',
autoplay: true
};
// Open the first thumb on page load with a small delay
setTimeout(function () {
try {
document.getElementById('thumb1').onclick();
} catch (e) {}
}, 1000);
// Cancel the default action for image click and do next instead
hs.Expander.prototype.onImageClick = function() {
if (/in-page/.test(this.wrapper.className)) return hs.next();
};
// Under no circumstances should the static popup be closed
hs.Expander.prototype.onBeforeClose = function() {
if (/in-page/.test(this.wrapper.className)) return false;
};
// ... nor dragged
hs.Expander.prototype.onDrag = function() {
if (/in-page/.test(this.wrapper.className)) return false;
};
// in-page focus mod - prevent in-page gallery to focus above other expanders
hs.Expander.prototype.onAfterExpand = function() {
if (/in-page/.test(this.wrapper.className) && this.slideshow && this.slideshow.zIndex === undefined) {
this.slideshow.zIndex = this.wrapper.style.zIndex;
}
};
hs.Expander.prototype.onFocus = function() {
if (/in-page/.test(this.wrapper.className)) {
if (this.slideshow && this.slideshow.zIndex) {
this.wrapper.style.zIndex = this.slideshow.zIndex;
}
if (this.outline) {
this.outline.table.style.zIndex = this.slideshow.zIndex - 1;
}
}
};
// Neccessary for dynamic zIndex mod
hs.expandDuration = (this.slideshowGroup == 'group1') ? 0 : 250;
hs.transitionDuration = (this.slideshowGroup == 'group1') ? 500 : 0;
// Dynamic dimmer zIndex mod:
hs.dim = function (exp) {
if (!hs.dimmer) {
hs.dimmer = hs.createElement('div', {
className: 'highslide-dimming highslide-viewport-size',
owner: '',
onclick: function () {
if (hs.fireEvent(hs, 'onDimmerClick')) hs.close();
}
}, {
visibility: 'visible',
opacity: 0
}, hs.container, true);
}
hs.dimmer.style.zIndex = exp.wrapper.style.zIndex - 2;
hs.dimmer.style.display = '';
hs.dimmer.owner += '|' + exp.key;
if (hs.geckoMac && hs.dimmingGeckoFix) hs.setStyles(hs.dimmer, {
background: 'url(' + hs.graphicsDir + 'geckodimmer.png)',
opacity: 1
});
else hs.animate(hs.dimmer, {
opacity: exp.dimmingOpacity
}, hs.dimmingDuration);
};
// Keep the position after window resize
hs.addEventListener(window, 'resize', function() {
var i, exp;
hs.getPageSize();
for (i = 0; i < hs.expanders.length; i++) {
exp = hs.expanders[i];
if (exp) {
var x = exp.x,
y = exp.y;
// get new thumb positions
exp.tpos = hs.getPosition(exp.el);
x.calcThumb();
y.calcThumb();
// calculate new popup position
x.pos = x.tpos - x.cb + x.tb;
x.scroll = hs.page.scrollLeft;
x.clientSize = hs.page.width;
y.pos = y.tpos - y.cb + y.tb;
y.scroll = hs.page.scrollTop;
y.clientSize = hs.page.height;
exp.justify(x, true);
exp.justify(y, true);
// set new left and top to wrapper and outline
exp.moveTo(x.pos, y.pos);
}
}
});
//]]>
</script>
Windows 8.1 Pro. Firefox 32.0.3 with Firebug.