How to dynamically add images and a link to a carousel?

Question

I would like to understand how this works.

The jQuery carousel I would like to use is Elastislide.
http://tympanus.net/codrops/2011/09/12/elastislide-responsive-carousel/

The site gives us the code we need to use :

var carousel = $('#carousel').elastislide();
...
$('#carousel').append("<li><a href="#"><img src="images/10.jpg" alt="image03" /></a></li>");
carousel.add();

I also found those lines in the jquery.elastislide.js file but it's being ignored by /*

This is the HTML :

      <div>
        <div class="fixed-bar">
           <!-- Elastislide Carousel -->
           <ul id="carousel" class="elastislide-list">     
              <li><a href="http://www.site1.com"><img src="images/1.jpg" alt="img1" /></a></li>
              <li><a href="http://www.site2.com"><img src="images/2.jpg" alt="img2" /></a></li>
              <li><a href="http://www.site3.com"><img src="images/3.jpg" alt="img3" /></a></li>
              <li><a href="http://www.site4.com"><img src="images/4.jpg" alt="img4" /></a></li>
           </ul>
           <!-- End Elastislide Carousel -->
        </div>
     </div>
         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
         <script type="text/javascript" src="js/jquerypp.custom.js"></script>
         <script type="text/javascript" src="js/jquery.elastislide.js"></script>
         <script type="text/javascript">      
            $( '#carousel' ).elastislide( {
            minItems : 1
             } );
          </script>

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 ?

So my guess is the html needs to look like this before I do anything with it :

               <!-- Elastislide Carousel -->
           <ul id="carousel" class="elastislide-list">     
           </ul>
           <!-- End Elastislide Carousel -->

And I need to add Javascript to it. Otherwise how is it going to add list items like images and links ?
Can someone confirm this is correct ?
I don't think I'm done after that, I will need to add the path somewhere, probably in the javascript as well.
Otherwise how will it know in what folder it needs to look ?

To make matters more complicated (or maybe not), I'm trying to do this in Joomla.
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.

Thank you.

Answer 1

But it's the javascript that decides what gets shown in the html, based on what's available, right ?

There may be Javascript, PHP script or even static HTML markup to 'decide' what gets shown. Calling $('#carousel').elastislide(); you just tell Elastislide plugin to make carousel out of your ul with id="carousel" regarding its current contents. These contents (lis with images and links) may come from any source:

• Just reside in static HTML code, like in your second sample

• Be generated by PHP or any other server script

• Be generated on client side (in viewer's browser) by Javascript code like $('#carousel').append("<li><a href="#"><img src="images/10.jpg" alt="image03" /></a></li>");
  If you generate them with JS before calling $('#carousel').elastislide(); you do not have to do anything else.
  But if you want to add items to already-formed carousel, after calling var carousel = $('#carousel').elastislide(); - you use the same code to append new li to the carousel source (ul), but after that you must call carousel.add(); to 'inform' Elastislide plugin that you have changed carousel source and so plugin must update its visual representation accordingly.

Addition: Practically, in Joomla you should rather use server-side PHP code to form HTML carousel source (based on some data from that CMS) and on client-side just call $('#carousel').elastislide();.

Answer 2

Here is the full working static HTML page with Elastislide carousel to start with

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="css/elastislide.css" />
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript" src="js/jquerypp.custom.js"></script>
  <script type="text/javascript" src="js/modernizr.custom.17475.js"></script>
  <script type="text/javascript" src="js/jquery.elastislide.js"></script>
<head>
<body>

</body>
<ul id="carousel" class="elastislide-list">     
  <li><a href="1.jpg"><img src="1.jpg" alt="img1" /></a></li>
  <li><a href="2.jpg"><img src="2.jpg" alt="img2" /></a></li>
  <li><a href="3.jpg"><img src="3.jpg" alt="img3" /></a></li>
  <li><a href="4.jpg"><img src="4.jpg" alt="img4" /></a></li>
</ul>
<script type="text/javascript">      
  $('#carousel').elastislide();
</script>

<body>
</html>

Notice that file structure is important - for such HTML you must have:
/ filanme.htm (or .php) - the page itself
/ css/* - css files included
/ js/* - javascripts included
/ images/* - Elastislide supplementary images (contained in its package)

To generate such a page with PHP hypertext preprocessor your steps could be like these.

1. Retrieve PHP data from Joomla CMS (or MySQL database directly) about which images and links site administrator wish to be loaded into the carousel. It's hard for me to say how to do this with Joomla, because I do not use it very often, so I would give an example of simple function, always returning 'precooked' PHP array with data.

2. After you got data, generate markup of ul and lis that forms carousel source and insert script with $('#carousel').elastislide(); call after it.

Here is simplistic, but working PHP code sample:

<?
// such a funciton would be inside CMS, not in your code
function CMS_get_carousel_data( $carousel_name ) {
  return array(
    array( 'link'=>'1.jpg', 'image'=>'1.jpg', 'alt_text'=>'1' ),
    array( 'link'=>'2.jpg', 'image'=>'2.jpg', 'alt_text'=>'2' ),
    array( 'link'=>'3.jpg', 'image'=>'3.jpg', 'alt_text'=>'3' ),
    array( 'link'=>'4.jpg', 'image'=>'4.jpg', 'alt_text'=>'4' )
  );
}
?>
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="css/elastislide.css" />
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript" src="js/jquerypp.custom.js"></script>
  <script type="text/javascript" src="js/modernizr.custom.17475.js"></script>
  <script type="text/javascript" src="js/jquery.elastislide.js"></script>
<head>
<body>
<?
// calling 'CMS' function to retrieve data to be displayed in the carousel
$data = CMS_get_carousel_data('carousel_A');
?>
</body>
<ul id="carousel_A" class="elastislide-list">
  <? foreach( $data as $item ) { /* generating markup */ ?>
  <li>
    <a href="<?=$item['link']?>">
      <img src="<?=$item['image']?>" alt="<?=$item['alt_text']?>" />
    </a>
  </li>
  <? } ?>
</ul>
<script type="text/javascript">      
  $('#carousel_A').elastislide();
</script>

<body>
</html>

To get this really working you should place the code above in .php file on your site, place other required files to appropriate folders and, of course, find real API in Joomla CMS to retrieve data for carousel and and make use of it.