如何设置Highslide膨胀机尺寸？

Question

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

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

我想大的图像（扩展）是不超过，多说，安全工程师PX 。

但是，现在是960x720。

令人讨厌的是我无法在960x720尺寸的代码中找到一个位置。

我想在我的代码来设置安全工程师大小，但由于某种原因，这是行不通的：

$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格在你的页面中缺少。如果#gallery-area div存在，则需要更改此div的高度和宽度以适合画廊的缩小尺寸。