Как установить размер расширителя Highslide?

Question

Я пытаюсь создать галерею высокого уровня на моем сайте. Однако у меня возникают проблемы с настройкой размера эпсандера.

страница с галереи 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, чтобы они соответствовали уменьшенному размеру галереи.