Framework : CakePHP 2.0
Library : JQuery

Bonjour à tous.

J'essaie depuis quelques heures de mettre en place des "Carousel" sur le site web où je travaille, cependant, cela ne fonctionne pas. J'ai suivi un tutoriel qui m'a déjà amené pas mal de connaissances. Le problème que j'ai est que lors du clic sur Prev/Next, l'image ne change pas... J'ai des objets "Reference" qui comportent plusieurs images pourtant.
Voici mes codes sources :

View: index.ctp :

		<?php echo $this->Html->css('news', null, array('inline' => false));
			  echo $this->Html->script("https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js",false);
			  echo $this->Html->script("navigation.js");
			  echo $this->Html->script("navigationImage.js");
			  echo $this->Html->script("jquery.jcarousel.min.js");
			  echo $this->Html->script("jquery.jcarousel.js");
			  echo $this->Html->script("carouselReference.js");
		?>
		<div id="news">
			<div class="container">
				<div id="infos">
                    <h3><?php echo $news[0]['News']['title']; ?></h3>
                    <?php echo $news[0]['News']['content']; ?>
                    <!-- Affichage des catégories -->
					<?php foreach($categories as $k=>$v):?>
			                <div class="catRef">
			                    <a href="#" class="ajax" data-url = "<?php echo $this->Html->url(array('controller' => 'references','action' => 'show_references', $v['Category']['id'])); ?>">
			                    	<?php echo $v['Category']['name']; ?>
			                    </a>
			                </div>
			        <?php endforeach; ?>
			        <!-- Affichage des références -->
			        <div id="refShow"></div>
			        <!-- Affichage des images -->
				    <div id="picShow"></div>
				</div>
			</div>
			<div id="projects">
			</div>

Controller : ReferencesController.php :

<?php
  App::uses('AppController', 'Controller');

  class ReferencesController extends AppController{

    private $uploadDir = "";

    public function beforeFilter(){
      $this->Auth->allow('index', 'show_references', 'show_images');
      $this->uploadDir = WWW_ROOT . 'img' . DS . "references";
      parent::beforeFilter();
    }

    function index(){
      $this->loadModel('Slideshow');
      $this->loadModel('News');
      $this->loadModel('Category');

      $slideshows = $this->Slideshow->find('all');

      $d['categories'] = $this->Category->find('all',array(
        'group' => 'Category.name'
        ));
      $this->set($d);

      $d['news'] = $this->News->find('all', array(
        'conditions' => array('News.type' => 'references'),
        ));

      $this->set('title_for_layout', "Nos références ");
      $this->set($d);
    }

    function show_references($id){ 
      $references = $this->Reference->find('all',array('conditions' => array('category_id' => $id)));
      echo '<div class="jcarousel-wrapper">';
      foreach($references as $reference){
                  $urlAndId = Router::url(array(
                  'controller' => 'references',
                  'action' => 'show_images',
                  $reference["Reference"]["id"]));
                  echo '<div class="jcarousel" data-jcarousel="true>';
                  echo '<ul>';
                  echo '<li>';
                  echo '<div class="refOfCat">';
                  if(!empty($reference['Image'][0])){
                    $images = $reference['Image'];
                    foreach($images as $image){
                     echo '<img src="img/'.$image['path'].'" alt="Image">';
                    }   
                  }
                  echo '<a href="#" class="ajaxImage" data-url="'.$urlAndId.'">'.$reference['Reference']['name'];
                  echo '</a>';
                  echo '</div>';
                  echo '</li>';
                  echo '</ul>';
                  echo '</div>';
                  echo '<a class="jcarousel-control-prev" href="#" data-jcarouselcontrol="true">Prev</a>';
                  echo '<a class="jcarousel-control-next" href="#" data-jcarouselcontrol="true">Next</a>';
     }
                  echo '</div>';
      exit();
    }

Javascript : carouselReference.js :

[javascript](function($) {
$(function() {

$('.jcarousel').jcarousel();

$('.jcarousel-control-prev')
.on('jcarouselcontrol:active', function() {
alert("PREV");
$(this).removeClass('inactive');
})
.on('jcarouselcontrol:inactive', function() {
alert("PREV");
$(this).addClass('inactive');
})
.jcarouselControl({
target: '-=1'
});

$('.jcarousel-control-next')
.on('jcarouselcontrol:active', function() {
$(this).removeClass('inactive');
alert("NEXT");
})
.on('jcarouselcontrol:inactive', function() {
$(this).addClass('inactive');
alert("NEXT");
})
.jcarouselControl({
target: '+=1'
});
});
})(jQuery);
[/javascript]

CSS : news.css :

.jcarousel {
    position: relative;
    overflow: hidden;
    width: 180px;
    height: 180px;
}

.jcarousel ul {
    width: 20000em;
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}

.jcarousel li {
    float: left;
}

Merci pour vos futures réponses et d'avoir pris le temps de lire/comprendre le problème.

PS: Voici un exemple de ce que j'aimerais faire pour chacune de mes références, une Box navigable => http://sorgalla.com/jcarousel/examples/basic/

Résolu

Pour ceux qui veulent, voici une classe Carrousel en php qui implémente une solution comme celle que tu as présenté. http://dl.free.fr/gfUpzH32c