Problem in cloud carousel
<p>All, </p>

<p>Im very new to jquery and am wanting to incorporate 'Cloud Carousel' plugin in another jquery plugin (jquery popup with grayed out background). However, I am struggling to make it work.</p>

<p>whereas normally the 'Cloud Carousel' displays as you seen on their website, in my implementation, all the images are sitting on top of each other, as if, they are sitting in a stack and one by one they appear on top. Any guidance for a newbie please?</p>

<p>Best,
here is the code Below</p>

<pre><code>&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
    &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
    &lt;link href="facebox.css" media="screen" rel="stylesheet" type="text/css" /&gt;
    &lt;link href="css/example.css" media="screen" rel="stylesheet" type="text/css" /&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt; 
    &lt;script src="facebox.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="js/cloud-carousel.1.0.4.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="js/cloud-carousel.1.0.4.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="js/jquery.mousewheel.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="js/jquery.mousewheel.min.js"&gt;&lt;/script&gt;


    &lt;script type="text/javascript"&gt;
    jQuery(document).ready(function($) {
      $('a[rel*=facebox]').facebox({
        loadingImage : 'images/loading.gif',
        closeImage   : 'images/close.png'
      })
      $("#carousel1").CloudCarousel(
        {
                        xPos: 170,
            yPos: 40,
            buttonLeft: $("#left"),
            buttonRight: $("#right"),
            altBox: $("#alt-text"),
            titleBox: $("#title-text")
        }
    );

    })
  &lt;/script&gt;

  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="example"&gt;
          &lt;p&gt; &lt;a href="#info" rel="facebox"&gt;Templates&lt;/a&gt; &lt;/p&gt;
      &lt;/div&gt; 

&lt;div id="info" style="display:none;"&gt;
    &lt;div id = "carousel1" style="width:400px; height:200px;position: relative;overflow:scroll;"&gt;
            &lt;img class = "cloudcarousel" src="button_images/1.png" alt="Flag 1 Description" title="Flag 1 Title" width="100px" height="100px" /&gt;
            &lt;img class = "cloudcarousel" src="button_images/10.png" alt="Flag 2 Description" title="Flag 2 Title" width="100px" height="100px"/&gt;
            &lt;img class = "cloudcarousel" src="button_images/11.png" alt="Flag 3 Description" title="Flag 3 Title" width="100px" height="100px"/&gt;
            &lt;img class = "cloudcarousel" src="button_images/14.png" alt="Flag 4 Description" title="Flag 5 Title" width="100px" height="100px"/&gt;
            &lt;img class = "cloudcarousel" src="button_images/18.png" alt="Flag 4 Description" title="Flag 5 Title" width="100px" height="100px"/&gt;
            &lt;img class = "cloudcarousel" src="button_images/19.png" alt="Flag 4 Description" title="Flag 5 Title" width="100px" height="100px"/&gt;
            &lt;img class = "cloudcarousel" src="button_images/2.png" alt="Flag 4 Description" title="Flag 5 Title" width="100px" height="100px"/&gt;
            &lt;img class = "cloudcarousel" src="button_images/20.png" alt="Flag 4 Description" title="Flag 5 Title" width="100px" height="100px"/&gt;
            &lt;img class = "cloudcarousel" src="button_images/21.png" alt="Flag 4 Description" title="Flag 5 Title" width="100px" height="100px"/&gt;
            &lt;img class = "cloudcarousel" src="button_images/4.png" alt="Flag 4 Description" title="Flag 5 Title" width="100px" height="100px"/&gt;
            &lt;img class = "cloudcarousel" src="button_images/5.png" alt="Flag 4 Description" title="Flag 5 Title" width="100px" height="100px"/&gt;
            &lt;img class = "cloudcarousel" src="button_images/6.png" alt="Flag 4 Description" title="Flag 5 Title" width="100px" height="100px"/&gt;
            &lt;img class = "cloudcarousel" src="button_images/7.png" alt="Flag 4 Description" title="Flag 5 Title" width="100px" height="100px"/&gt;
            &lt;img class = "cloudcarousel" src="button_images/8.png" alt="Flag 4 Description" title="Flag 5 Title" width="100px" height="100px"/&gt;
            &lt;button id="left"&gt; Left&lt;/button&gt;
            &lt;button id="right" onclick="alert('right')"&gt;Right&lt;/button&gt;
      &lt;/div&gt;
   &lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>
