我如何设置Highslide膨胀机尺寸? [英] 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;
//添加提供con的幻灯片trolbar和thumbstrip
hs.addSlideshow({
// slideshowGroup:'group1',
interval:5000,
repeat:true,
useControls:true,
// relativeTo:'viewport',
overlayOptions:{
位置:'bottom center',
offsetY:50,
offsetX:-5
} ,
thumbstrip:{
position:'above',
mode:'horizontal',
relativeTo:'expander',
// width:'200px', //必须与inPageOptions中的宽度相同
// offsetY:115
}
});;
$ gallery2 =
//页内项目的选项
var inPageOptions = {
// slideshowGroup:'group1',
outlineType :null,
allowSizeReduction:false,
wrapperClassName:'页内控件标题',
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){
/ /设置元素的onclick,输出组名称到标题以便调试
e.element.onclick = function(){
return hs.expand(this,inPageOptions);
}
//返回false以防止再次设置onclick
返回false;
}
//打开页面加载的第一个缩略图
hs.addEventListener(window,'load',function(){
//$('a.highslide ')。隐藏();
$('a.highslide')。first()。click();
});
//取消图片点击的默认动作并执行下一步操作
hs.Expander.prototype.onImageClick = function(){
if(/in-page/.test (this.wrapper.className))return hs.next();
}
//在任何情况下都不应该关闭静态弹出窗口
hs.Expander.prototype.onBeforeClose = function(){
if(/ in-page /.test(this.wrapper.className))return false;
}
// ...也不拖动
hs.Expander.prototype.onDrag = function(){
if(/in-page/.test(this.wrapper。 className))return false;
}
//保留窗口大小后的位置
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;
//获取新的拇指位置
exp。 tpos = hs.getPosition(exp.el);
x.calcThumb();
y.calcThumb();
//计算新的弹出位置
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);
//设置新的左边和顶部包装并勾勒
exp.moveTo(x.pos,y.pos);
});;
echo $ gallery;
echo $$ gallery2;
谢谢。
$ $ b有任何想法,为什么它不起作用?除了改变
inPageOptions
的宽度和高度外,还需要更改解决方案 code> allowSizeRedution 从false
到true
。//页内项目的选项
var inPageOptions = {
// slideshowGroup:'group1',
outlineType:null,
allowSizeReduction:true,
wrapperClassName:'页内控件标题',
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的高度和宽度以适应图库的缩小尺寸。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.
解决方案In addition to change the width and height for
inPageOptions
, you also need to changeallowSizeRedution
fromfalse
totrue
.// 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.这篇关于我如何设置Highslide膨胀机尺寸?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文