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

Question

这个问题与之前回答的问题相关，可以在这里找到：Jquery jscrollpane 宽度根据内容自动调整

感谢 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

好吧，我有 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 的支持！）

对，希望如此应该是吧！

Answer 2

在#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
        });
});