[RESOLU] JQuery - Jcarousel

par **sadeq** » 11 nov. 2014, 15:51

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

par **Ducreyr** » 11 nov. 2014, 12:01

Résolu

par **Ducreyr** » 10 nov. 2014, 15:43

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/

[RESOLU] JQuery - Jcarousel

Répondre

Étendre la vue Revue du sujet : [RESOLU] JQuery - Jcarousel

Re: [RESOLU] JQuery - Jcarousel

Re: JQuery - Jcarousel

JQuery - Jcarousel