title: width within Jquery jscrollpane to accommodate different width
body: <p>This question is related to a previous answered question which can be found here: <a href="https://stackoverflow.com/questions/6677707/jquery-jscrollpane-width-to-adjust-automatically-according-to-content">Jquery jscrollpane width to adjust automatically according to content</a></p>
  
  <p>Thanks to user Mac who has provided the following solution:</p>
  
  <p>JS should look like below:</p>
  
  <pre><code>$(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
  });
  });
  </code></pre>
  
  <p>CSS as such:</p>
  
  <pre><code>#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*/
  }
  </code></pre>
  
  <p>And finally the HTML:</p>
  
  <pre><code>&lt;div id="imagesContainer"&gt;
  &lt;img src="images/food.jpg" /&gt;
  &lt;img src="images/food.jpg" /&gt;
  &lt;img src="images/food.jpg" /&gt;
  &lt;img src="images/food.jpg" /&gt;
  &lt;img class="lastImage" src="images/food.jpg" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This solution solved width of jScrollPane expanding as needed according to content (in this case images). You may view the result here: <a href="http://www.giamarescotti.com/v2/index.html" rel="nofollow noreferrer">http://www.giamarescotti.com/v2/index.html</a>
  You will notice that portrait pictures are distorted sideways. </p>
  
  <p>In my attempt to solve that, I tried creating the following css for portrait images:</p>
  
  <pre><code>#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;
  }
  </code></pre>
  
  <p>And now have the following class in the HTML:</p>
  
  <pre><code>&lt;img src="images/food_bev/kara07.jpg" /&gt;
  &lt;img src="images/food_bev/kara08.jpg" /&gt;
  &lt;img class="portrait" src="images/food_bev/kara09.jpg" /&gt;
  &lt;img class="portrait" src="images/food_bev/kara10.jpg" /&gt;
  </code></pre>
  
  <p>You may view my attempt here: <a href="http://www.giamarescotti.com/v2/attempt.html" rel="nofollow noreferrer">http://www.giamarescotti.com/v2/attempt.html</a></p>
  
  <p>It solves the distortion but now has extra space at the end of the slide due to the JS:</p>
  
  <pre><code>    var imgWidth = 661 + 5; //661 applies only to landscape, not portrait
  </code></pre>
  
  <p>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? </p>
  
  <p>Any advice is greatly appreciated. Thank you very much!</p>