jscrollpane jquery按钮来改变高度和宽度

我有一个水平的jscrollpane包含图像。jscrollpane jquery按钮来改变高度和宽度

图像的默认高度为400px，我想制作一个“小”的按钮，将图像的高度改为200px（例如）。当然宽度也会改变以保持比例。

第一我有这样的代码来计算图像的总宽度：

$(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 ，但一旦点击完成。

有什么想法？

感谢所有的时间

来源

2012-12-08 bboy

而不是把代码在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。请注意，您也可以使用名为reinitialise的jscrollPane API方法，但您需要更熟悉它。从经验来看，通过API更好，但再次调用函数会得到相同的结果。

来源

2012-12-09 05:45:47

hi @ComputerArts！感谢您花时间来解释和展示如何使这项工作，但是看起来我做错了什么，jscrollpane根本不工作。你可以在这里看到我的尝试：http://bit.ly/TJaqC6 – bboy

嗯，你没有设置正确的wrapperWidth容器一旦它更小。这里：'$（“。scroll-content，.jspContainer”）.css（'width'，wrapperWidth）;'你正在设置窗口加载函数上计算的相同wrapperWidth。 –

这是我现在的代码：http://snipt.org/xgiid3 我需要初始加载。所以我可以告诉jscrollpane宽度是多少。如果我在收到一些错误后添加你的。非常感谢您花时间在此 – bboy

jscrollpane jquery按钮来改变高度和宽度

回答

相关问题