How do I set Highslide expander size?

Question

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.

Answer 1

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.