[英]How do I set Highslide expander size?
我正在尝试在我的网站上建立页内高幻灯片画廊。 但是,我在设置epxander的大小时遇到问题。
带有画廊的页面是http://civicsector.org.ua/multimeda/foto/208-akcya-geroyi-nezalezhnost.html (稍等片刻,直到页面完全加载)
我希望大图(扩展器) 不超过 300x200 px 。
但是, 现在是960x720 。
令人讨厌的是,我无法在代码中找到设置此960x720大小的位置。
我正在尝试在代码中设置300x200的尺寸,但是由于某些原因,它不起作用:
$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;
关于为什么它不起作用的任何想法?
谢谢。
除了更改inPageOptions
的宽度和高度,还需要将allowSizeRedution
从false
更改为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'
};
由于您的页面中缺少#gallery-area
div,因此您的图片库将位于页面顶部的居中位置。 如果存在#gallery-area
div,则需要更改此div的高度和宽度以适合缩小的画廊尺寸。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.