如何設置Highslide擴展器尺寸？

Question

我正在嘗試在我的網站上建立頁內高幻燈片畫廊。 但是，我在設置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;

關於為什么它不起作用的任何想法？

謝謝。

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的高度和寬度以適合縮小的畫廊尺寸。