title: How to dynamically add images and a link to a carousel?
body: <p>I would like to understand how this works.  </p>
  
  <p>The jQuery carousel I would like to use is Elastislide.<br>
  <a href="http://tympanus.net/codrops/2011/09/12/elastislide-responsive-carousel/" rel="nofollow">http://tympanus.net/codrops/2011/09/12/elastislide-responsive-carousel/</a> </p>
  
  <p>The site gives us the code we need to use :</p>
  
  <pre><code>var carousel = $('#carousel').elastislide();
  ...
  $('#carousel').append("&lt;li&gt;&lt;a href="#"&gt;&lt;img src="images/10.jpg" alt="image03" /&gt;&lt;/a&gt;&lt;/li&gt;");
  carousel.add();
  </code></pre>
  
  <p>I also found those lines in the jquery.elastislide.js file but it's being ignored by /*</p>
  
  <p>This is the HTML :</p>
  
  <pre><code>      &lt;div&gt;
          &lt;div class="fixed-bar"&gt;
             &lt;!-- Elastislide Carousel --&gt;
             &lt;ul id="carousel" class="elastislide-list"&gt;     
                &lt;li&gt;&lt;a href="http://www.site1.com"&gt;&lt;img src="images/1.jpg" alt="img1" /&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="http://www.site2.com"&gt;&lt;img src="images/2.jpg" alt="img2" /&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="http://www.site3.com"&gt;&lt;img src="images/3.jpg" alt="img3" /&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="http://www.site4.com"&gt;&lt;img src="images/4.jpg" alt="img4" /&gt;&lt;/a&gt;&lt;/li&gt;
             &lt;/ul&gt;
             &lt;!-- End Elastislide Carousel --&gt;
          &lt;/div&gt;
       &lt;/div&gt;
           &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"&gt;&lt;/script&gt;
           &lt;script type="text/javascript" src="js/jquerypp.custom.js"&gt;&lt;/script&gt;
           &lt;script type="text/javascript" src="js/jquery.elastislide.js"&gt;&lt;/script&gt;
           &lt;script type="text/javascript"&gt;      
              $( '#carousel' ).elastislide( {
              minItems : 1
               } );
            &lt;/script&gt;
  </code></pre>
  
  <p>The HTML obviously looks for all those items. 
  But it's the javascript that decides what gets shown in the html, based on what's available, right ?    </p>
  
  <p>So my guess is the html needs to look like this before I do anything with it :</p>
  
  <pre><code>               &lt;!-- Elastislide Carousel --&gt;
             &lt;ul id="carousel" class="elastislide-list"&gt;     
             &lt;/ul&gt;
             &lt;!-- End Elastislide Carousel --&gt;
  </code></pre>
  
  <p>And I need to add Javascript to it. 
  Otherwise how is it going to add list items like images and links ?<br>
  Can someone confirm this is correct ?<br>
  I don't think I'm done after that, I will need to add the path somewhere, probably in the javascript as well.<br>
  Otherwise how will it know in what folder it needs to look ?     </p>
  
  <p>To make matters more complicated (or maybe not), I'm trying to do this in Joomla.<br>
  I could install extensions that more or less do something similar than this carousel but I don't want to because all that comes down to is clicking buttons without really understanding it.   </p>
  
  <p>Thank you.</p>