问题
I'm trying to set up an in-page highslide gallery on my site. However, I'm experiencing problems with setting the size of the epxander.
The page with the gallery is http://civicsector.org.ua/multimeda/foto/208-akcya-geroyi-nezalezhnost.html (wait a moment until the page loads completely)
I want the big image (the expander) to be no more than, say, 300x200 px.
However, right now it is 960x720.
The annoying thing is that I can't find a place in the code where this 960x720 size is set.
I'm trying to set 300x200 size in my code, but for some reason it does not work:
$gallery = "
hs.align = 'auto';
hs.transitions = ['expand', 'crossfade'];
//hs.width = 200;
//hs.zIndexCounter = 1;
// Add the slideshow providing the controlbar and the thumbstrip
hs.addSlideshow({
//slideshowGroup: 'group1',
interval: 5000,
repeat: true,
useControls: true,
//relativeTo: 'viewport',
overlayOptions: {
position: 'bottom center',
offsetY: 50,
offsetX: -5
},
thumbstrip: {
position: 'above',
mode: 'horizontal',
relativeTo: 'expander',
//width: '200px', // Must be same with as the width in the inPageOptions
//offsetY: 115
}
});";
$gallery2 = "
// Options for the in-page items
var inPageOptions = {
//slideshowGroup: 'group1',
outlineType: null,
allowSizeReduction: false,
wrapperClassName: 'in-page controls-in-heading',
useBox: true,
//minWidth: 200,
//minHeight: 150,
width: 300,
height: 200,
targetX: 'gallery-area 10px',
targetY: 'gallery-area 10px',
captionEval: 'this.thumb.alt',
numberPosition: 'caption'
}
hs.onSetClickEvent = function ( sender, e ) {
// set the onclick for the element, output the group name to the caption for debugging
e.element.onclick = function () {
return hs.expand(this, inPageOptions);
}
// return false to prevent the onclick being set once again
return false;
}
// Open the first thumb on page load
hs.addEventListener(window, 'load', function() {
//$('a.highslide').hide();
$('a.highslide').first().click();
});
// 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;
}
// Keep the position after window resize
hs.addEventListener(window, 'resize', function() {
var i, exp;
hs.page = 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);
}
}
});";
echo $gallery;
echo $$gallery2;
Any ideas on why it does not work?
Thanks.
回答1:
In addition to change the width and height for inPageOptions
, you also need to change allowSizeRedution
from false
to true
.
// Options for the in-page items
var inPageOptions = {
//slideshowGroup: 'group1',
outlineType: null,
allowSizeReduction: true,
wrapperClassName: 'in-page controls-in-heading',
useBox: true,
//minWidth: 200,
//minHeight: 150,
width: 300,
height: 200,
targetX: 'gallery-area 10px',
targetY: 'gallery-area 10px',
captionEval: 'this.thumb.alt',
numberPosition: 'caption'
};
Your gallery will be placed centered at the top of your page since the #gallery-area
div is missing in your page. If the #gallery-area
div was present, you would need to change the height and width of this div to fit the reduced size of the gallery.
来源:https://stackoverflow.com/questions/26761907/how-do-i-set-highslide-expander-size