Hi,

great job with the component.

Quick question. when i click on the next button, i want to send a request to load more images. how do i do this?

I can already load images dynamically the first time i load the page. Now i want to do it when i click on next button.
Is this using the runRequest function, how do i use it. Am using PHP 5.

This is what i have so far:

<div id="horizontal_carousel">
      <div class="previous_button"></div>  
      <div class="container">
        <ul>
        </ul>
<div id="spinner" style="display: none;">Loading ...<br /></div>
      </div>
      <div class="next_button"></div>
    </div>
    <p style="clear: both;"></p>

<script type="text/javascript">
    // <![CDATA[
      // Delay response
      Ajax.Request.prototype.originalInitialize = Ajax.Request.prototype.initialize;
      Ajax.Request.prototype.initialize = function(url, options) {
        options.onSuccess = options.onSuccess.wrap(function(proceed, request, json) {
          proceed.curry(request, json).delay(1);
        });
        this.originalInitialize(url, options);
      }

      // Mock ajax response

      var carousel = null;
      function runTest() {
        updateCarouselSize();
        carousel = new UI.Ajax.Carousel("horizontal_carousel", {url: "/ajax_carousel_content.php", elementSize: 250})
          .observe("request:started", function() {
                $('spinner').show().morph("opacity:0.8", {duration:0.5});
            })
          .observe("request:ended", function() {
                $('spinner').morph("opacity:0", {duration:0.5, afterFinish: function(obj) { obj.element.hide(); }});
            })            
            .observe('scroll:ended', function(event) {
             carousel.runRequest();    
         });   
      }

      function resized() {
        updateCarouselSize();  
        if (carousel)
          carousel.updateSize();
      }

      function updateCarouselSize() {
            var dim = document.viewport.getDimensions(); 
            dim.width -= 20;                             
        $("horizontal_carousel").style.width = (dim.width - 430) + "px";
        $$("#horizontal_carousel .container").first().style.width =  (dim.width - 500) + "px";
      }

      Event.observe(window, "load", runTest);
      Event.observe(window, "resize", resized);
    // ]]>
    </script>

Not sure to understand what you want to do.
Next/Prev button with ajax mode is handle by Carousel component, you do not have to do anything.
You set an url in options, then you php server has to return correct JSON

This sample code from functional test simulates server response, just use it to check JSON response