我如何设置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：'horizo​​ntal'，
 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 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.

                        
这篇关于我如何设置Highslide膨胀机尺寸？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！