JQuery кнопку jscrollpane для изменения высоты и ширины

Question

У меня есть горизонтальная jscrollpane с изображениями.

высота изображений по умолчанию составляет 400 пикселей, и я хочу сделать кнопку "маленькая", которая бы изменила высоту изображений до 200 пикселей (например). конечно ширина также изменяется, чтобы сохранить пропорции.

Сначала у меня есть этот код для расчета общей ширины изображений:

$(window).load(function(){

$('.scroll-content').each(function(){
var wrapper = $(this);
var wrapperWidth = 0;


    wrapper.find('.scroll-content-item img').each(function(){
        wrapperWidth += $(this).outerWidth(true) + 20;
    });

    wrapper.css('width', wrapperWidth);

и делает работу отлично. затем я инициализирую jscrollpane:

$('.scroll-pane').jScrollPane();

а затем кнопка:

$('.minus-button').click(function() {
$(".scroll-content-item img, .scroll-content-item, .jspContainer").css('height', 300); 
});

Как я могу добавить функцию или вызвать ее снова, чтобы пересчитать общую ширину изображений и дать ей .scroll-content, но как только щелчок сделан.

есть идеи?

спасибо всем за время

Answer 1

Вместо помещения кода в функцию window.load создайте отдельную функцию и снова вызовите эту функцию.

пример

function calculateWidth() {}
    $('.scroll-content').each(function(){
      var wrapper = $(this);
      var wrapperWidth = 0;

      wrapper.find('.scroll-content-item img').each(function(){
        wrapperWidth += $(this).outerWidth(true) + 20;
      });

      wrapper.css('width', wrapperWidth);
    }
    $('.scroll-pane').jScrollPane();
}

$(window).load(function() { calculateWidth(); })

$('.minus-button').click(function() {
    $(".scroll-content-item img, .scroll-content-item, .jspContainer").css('height', 300);
    calculateWidth(); 
});

Вы заметите, что я вызываю функцию jScrollPane() в функции calcHeight. То есть для повторной инициализации jscrollpanes после его изменения размера. Обратите внимание, что вы также можете использовать метод API jscrollPane под названием reinitialise, но вам нужно больше с ним ознакомиться. Исходя из опыта, лучше пройти через API, но повторный вызов функции даст тот же результат.