Jquery jscrollpane中的宽度以适应不同的宽度

Question

此问题与之前已回答的问题有关，可在此处找到：Jquery jscrollpane width to adjust automatically according to content

感谢用户Mac提供了以下解决方案：

JS应该如下所示：

$(function(){
var totalImages = $("#images img").length;
var imgWidth = 661 + 5; //width of an image plus the margin
$("#imagesContainer").css("width",totalImages*imgWidth - 5);

$('.scroll-pane').jScrollPane({
showArrows: true,
autoReinitialise: true
});
});

CSS就是这样：

#imagesContainer {
width:5000px; /*fallback width*/
overflow:hidden;
}

#imagesContainer img {
display:block;
margin:0 5px 0 0; /*adding a 5px margin to the right*/
padding:0;
float:left;
width: 661px;
height: 440px;
}

.lastImage {
margin-right:0 !important; /*removing the margin right from the last img*/
}

最后是HTML：

<div id="imagesContainer">
<img src="images/food.jpg" />
<img src="images/food.jpg" />
<img src="images/food.jpg" />
<img src="images/food.jpg" />
<img class="lastImage" src="images/food.jpg" />
</div>

此解决方案根据内容（在本例中为图像）解决了根据需要扩展jScrollPane的宽度。您可以在此处查看结果：http://www.giamarescotti.com/v2/index.html 您会注意到肖像照片在侧面扭曲。

在我试图解决这个问题时，我尝试为肖像图像创建以下css：

#imagesContainer img.portrait {
display:block;
margin: 0 5px 0 0; /*adding a 5px margin to the right*/
padding:0;
float:left;
width: 293px;
height: 440px;
}

.lastImagePortrait {
margin-right:0 !important; /*removing the margin right from the last img*/
width: 293px;
height: 440px;
}

现在HTML中有以下类：

<img src="images/food_bev/kara07.jpg" />
<img src="images/food_bev/kara08.jpg" />
<img class="portrait" src="images/food_bev/kara09.jpg" />
<img class="portrait" src="images/food_bev/kara10.jpg" />

您可以在此处查看我的尝试：http://www.giamarescotti.com/v2/attempt.html

它解决了失真，但由于JS：

，现在在幻灯片的末尾有额外的空间

    var imgWidth = 661 + 5; //661 applies only to landscape, not portrait

显然，661px宽度仅适用于风景图像。肖像的宽度应为293像素。那你怎么告诉JS有2个宽度需要计算？

非常感谢任何建议。非常感谢你！

Answer 1

在#sourcecode：

中试试

$(function(){
var totalLandscapeImages = $("#images img").length - $("img.portrait").length;
var totalPortraitImages = $("img.portrait").length;
var imgLandscapeWidth = 661+5; //width of a landscape image plus any margins or padding it might have
var imgPortraitWidth = 293+5; //width of a portrait image plus any margins or padding it might have
$("#imagesContainer").css("width",(totalLandscapeImages*imgLandscapeWidth) + (totalPortraitImages*imgPortraitWidth) - 5);

$('.scroll-pane').jScrollPane({
        showArrows: true,
        autoReinitialise: true
        });
});

Answer 2

好吧所以我有一个5分钟的备用时间并且希望能够完成一些CSS魔术来修复这个问题，因为正如我在上一个回答你的另一个问题时所说的那样，CSS唯一的方式将是你的最佳方式案例：）

这意味着你不再需要任何JavaScript来计算你的宽度，这也意味着如果访问者禁用了JavaScript，那么对他们来说这将是一个更好的用户体验，显然你现在不需要担心扭曲的图像：）

首先，我首先要害怕你需要删除任何计算宽度等的JavaScript，你应该为你的JavaScript（jscrollpane代码）留下这个。

$(function(){

$('.scroll-pane').jScrollPane({
    showArrows: true,
    autoReinitialise: true
});

});

您的HTML需要稍微更改一下，

<div id="images">
    <div class="scroll-pane horizontal-only">
        <ul id="imagesContainer">
            <li><img height="440" src="images/food.jpg" /></li>
            <li><img height="440" src="images/food.jpg" /></li>
            <li><img height="440" src="images/food.jpg" /></li>
            <li><img height="440" src="images/food.jpg" /></li>
            <li><img height="440" class="lastImage" src="images/food.jpg" /></li>
        </ul>
    </div>
</div>

请注意，您需要设置图片的高度（应该始终为440px，就像您在代码中设置的那样）。这样，如果图像很慢，无法加载滚动区域就可以使用了！

我已经设置了CSS和滚动区域等来拍摄高度为440px的图像，但是图像的宽度并不重要，CSS会照顾它！ ：）

最后，您需要对CSS进行一些更改，如下所示：

#images {
    width: 100%;
    margin: 20px auto 40px auto;
}

#imagesContainer {
    list-style:none; 
    display:inline-block; 
    white-space: nowrap; 
    height:auto; 
    margin:0 5px 0 5px; 
    padding:0 0 0 5px;
    zoom:1; /*required for IE 6 and 7*/
    *display: inline; /*required for IE 6 and 7*/
}

#imagesContainer li {
    height:440px;
    width:auto;
    margin:0 5px 0 0;
    padding:0;
    display:inline-block;
    zoom:1; /*required for IE 6 and 7*/
    *display: inline; /*required for IE 6 and 7*/
}

#imagesContainer li img {
    padding:0;
    margin:0;
}

.lastImage {
    margin-right:0 !important; /*removing the margin right from the last img*/
}


.scroll-pane {
    width: 100%;
    height: auto;
    overflow: auto;
}

.horizontal-only {
    height:470px;
}

编辑：在Safari，Chrome，Firefox，Opera，IE6 +中测试浏览器（增加了对IE6和IE7的支持！）

是的，希望应该是它！