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

问题描述

此问题与以前的回答的问题有关，可以在这里找到:

This question is related to a previous answered question which can be found here: Jquery jscrollpane width to adjust automatically according to content

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

Thanks to user Mac who has provided the following solution:

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 您会注意到人像图片侧向变形.

This solution solved width of jScrollPane expanding as needed according to content (in this case images). You may view the result here: http://www.giamarescotti.com/v2/index.htmlYou will notice that portrait pictures are distorted sideways.

为解决这个问题，我尝试为人像图像创建以下CSS:

In my attempt to solve that, I tried creating the following css for portrait images:

#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中具有以下类:

And now have the following class in the 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/try.html

You may view my attempt here: http://www.giamarescotti.com/v2/attempt.html

它解决了变形问题，但是由于JS现在在幻灯片的末尾有额外的空间:

It solves the distortion but now has extra space at the end of the slide due to the JS:

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

显然661px的宽度仅适用于风景图像.人像的宽度应为293px.那么，如何告诉JS需要计算2个宽度?

Obviously the 661px width applies only to landscape images. Portrait should have a 293px width. So how do you tell JS that there are 2 widths that needs to be calculated?

任何建议都将不胜感激.非常感谢你！

Any advice is greatly appreciated. Thank you very much!

推荐答案

好，所以我有5分钟的空闲时间，并希望做一些CSS魔术来解决整个问题，因为正如我在对另一个问题的最后一个回答中所说的那样，仅CSS方式将成为您的最佳方式:)

Ok so I had a spare 5 minutes and have hopefully done some CSS magic to fix this entire issue, because as I said in my last answer to your other question, a CSS only way is going to be the best way in your case :)

这意味着您不再需要任何JavaScript来计算宽度，这也意味着如果访问者禁用了JavaScript，这将为他们带来更好的用户体验，并且您现在无需担心图像失真:)

This means you no longer need any JavaScript to calculate your width's which also means that if visitors have JavaScript disabled it will be a much better user experience for them and obviously you now don't need to worry about distorted images :)

因此，首先要做的是，恐怕您需要删除所有计算宽度等的JavaScript，您应该只保留此代码以用于JavaScript(jscrollpane代码).

So first things first I'm afraid you will need to remove any JavaScript that calculates widths etc, you should be left with just this for your JavaScript (the jscrollpane code).

$(function(){

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

});

您的HTML需要对此稍作更改

Your HTML will need slightly changing, to this

<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，因为这是您当前在代码中设置的高度).这样一来，如果图像很慢，则无法加载滚动区域，则需要处理某些问题！

Please note that you need to set the height of the image (which should always be 440px as that is what you have it currently set to in your code). This is so that if an image is slow, of fails to load the scrolling area has something to work with!

我已设置CSS和滚动区域等以拍摄高度为440px的图像，但是图像的宽度无关紧要，CSS会解决这一问题！ :)

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

Lastly you need to make some changes to your CSS, to look like this:

#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的支持！)

Browser tested in Safari, Chrome, Firefox, Opera, IE6+ (added in support for IE6 and IE7!)

对，希望是这样！

这篇关于jQuery jscrollpane中的宽度以适应不同的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！