title: Vertical centering images within a slideshow using JS code?
body: <p>I have a problem that I need to sort out in javascript I believe, but dont know how to begin with it, so hopefully someone from the javascript community may be able to help please.</p>
  
  <p>Basically, the following code allows me to load 10 images into a slideshow carousel. 
  However, these images are either 600px x 400px Portrait or 400px x 600 Landscape. The problem I have is that the Landscape images 
  are vertically aligned to the top of the container.</p>
  
  <p>I have managed to get around this by creating two classes in my CSS file image-P &amp; image-L</p>
  
  <p>image-L has a "padding-top:100px " which successfully vertially aligns the landscape images in the centre.</p>
  
  <p>What I'd like to do is for the code to check which images are landscape and then create </p>
  
  <pre><code>return '&lt;img src="Images/' + item.url + '" class="image-L" alt="" /&gt;';
  </code></pre>
  
  <p>and anything else use</p>
  
  <pre><code>return '&lt;img src="Images/' + item.url + '" class="image-P" alt="" /&gt;';
  </code></pre>
  
  <p>many thanks in advance. </p>
  
  <p>Cheers Rob.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
      var mycarousel_itemList = [
          { url: "Image1.jpg" },
          { url: "Image2.jpg" },
          { url: "Image3.jpg" },
          { url: "Image4.jpg" },
          { url: "Image5.jpg" },
          { url: "Image6.jpg" },
          { url: "Image7.jpg" },
          { url: "Image8.jpg" },
          { url: "Image9.jpg" },
          { url: "Image10.jpg" }
      ];
  
      function mycarousel_itemLoadCallback(carousel, state) {
          for (var i = carousel.first; i &lt;= carousel.last; i++) {
              if (carousel.has(i)) {
                  continue;
              }
  
              if (i &gt; mycarousel_itemList.length) {
                  break;
              }
  
              carousel.add(i, mycarousel_getItemHTML(mycarousel_itemList[i - 1]));
          }
      };
  
      /**
      * Item html creation helper.
      */
      function mycarousel_getItemHTML(item) {
          return '&lt;img src="Images/' + item.url + '" class="image-L" alt="" /&gt;';
      };
  
      jQuery(document).ready(function () {
          jQuery('#mycarousel').jcarousel({
              size: mycarousel_itemList.length,
              itemLoadCallback: { onBeforeAnimation: mycarousel_itemLoadCallback }
          });
      });
  </code></pre>
  
  <p></p>