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

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() в функции calculateHeight. То есть для повторной инициализации jscrollpanes после ее изменения. Обратите внимание, что вы также можете использовать метод API jscrollPane, называемый reinitialise, но вам нужно быть более знакомым с ним. По опыту, лучше пройти через API, но вызов функции снова даст тот же результат.