width within Jquery jscrollpane to accommodate different width

问题

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

Thanks to user Mac who has provided the following solution:

JS should look like below:

$(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 as such:

#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*/
}

And finally the 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>

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.html You will notice that portrait pictures are distorted sideways.

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;
}

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" />

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

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

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!

回答1:

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 :)

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 :)

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

});

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>

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!

I have setup the CSS and scrolling area etc to take images with a height of 440px, but the width of your images does not matter, the CSS takes care of that! :)

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;
}

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

Right, hopefully that should be it!

回答2:

Try this in #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
        });
});

来源：https://stackoverflow.com/questions/6715554/width-within-jquery-jscrollpane-to-accommodate-different-width

标签

jquery

jscrollpane