html - 如何设置 Highslide 扩展器尺寸？

Question

我正在尝试在我的网站上设置页内 highslide 画廊。但是，我在设置 epxander 的大小时遇到​​了问题。

画廊的页面是http://civicsector.org.ua/multimeda/foto/208-akcya-geroyi-nezalezhnost.html (稍等片刻，直到页面完全加载)

我希望大图像(扩展器)不超过，比如说，300x200 像素。

但是，现在是 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;

关于为什么它不起作用的任何想法？

谢谢。

Answer 1

除了更改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 的高度和宽度以适应缩小后的画廊尺寸。