Intégrer jQuery sur coverflow

Bonjour,
Juste pour info... j'ai hésité entre le forum dédié javascript et celui pour les débutants (à savoir grand débutant en ce qui concerne js et jQuery).

J'ai trouvé ce coverflow qui me convient tout à fait : http://jsfiddle.net/rudygotya/7q8eapr2/2/

Seulement le problème est que je ne parviens pas à insérer le JQuery, j'ai essayé pas mal de choses mais pas moyen... je ne sais plus quoi essayer. Pouvez vous m'aider s'il vous plait...

Le html:

<div>
	<div id="coverflow">
		<img src="http://placehold.it/350x350" />
		<img src="http://placehold.it/350x350/E8117F/FFFFFF" />
		<img src="http://placehold.it/350x350" />
		<img src="http://placehold.it/350x350/E8117F/FFFFFF" />
		<img src="http://placehold.it/350x350" />
	</div>
</div>
<div id="coverflow-slider"></div>

le css:

.ui-coverflow-wrapper{
    height:400px;
    margin-top: 100px;
}
.ui-state-active{
    border:0px;
}

et le js:

$(function() {

    $('#coverflow').coverflow({
        active: 2,
        select: function(event, ui){
            console.log('here');
        }
    });
    
    $('#coverflow img').click(function() {
        if( ! $(this).hasClass('ui-state-active')){
            return;
        }
        
        $('#coverflow').coverflow('next');
        
        
    });
    
});

J'espère vraiment que vous pourrez m'éclairer...
Merci d'avance pour votre aide
Novis

Bonjour,
As-tu chargé la librairie jquery dans ta page ?
Le fiddle que tu cites charge cette version de jquery: http://code.jquery.com/jquery-2.1.3.js

Salut,
Tu devrais avoir des erreurs dans ta console du style "$ is not defined" cela signifie comme le dit loic que tu n'a pas intégrer jquery. Il est possible qu'il y ai d'autre erreurs. à toi de nous les dires.
Modifié par JENCAL (19 Sep 2017 - 11:22)

Bonjour,
Merci beaucoup, j'ai fini par trouver (avec ceci étant quelques bug)...
Alors je vous montre:

le js et le css sont inchangés.
Dans le head :

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/coverflowjs/coverflow/master/dist/coverflow.min.js"></script>
<script src="http://adresse code_coverflow_en.js"></script> 
 
  <link type="text/css" href="https://cdn.rawgit.com/coverflowjs/coverflow/master/dist/coverflow.css" rel="stylesheet" />
<link href="adresse code_coverflow_en.css" rel="stylesheet" type="text/css" />

et le html donne:

<div id="coverflow">
  <img src="http://placehold.it/350x350" /> 
  <img src="http://placehold.it/350x350/E8117F/FFFFFF" /> 
  <img src="http://placehold.it/350x350" /> 
  <img src="http://placehold.it/350x350/E8117F/FFFFFF" /> 
  <img src="http://placehold.it/350x350" />
<img src="http://placehold.it/350x350" /> 
  <img src="http://placehold.it/350x350/E8117F/FFFFFF" /> 
  <img src="http://placehold.it/350x350" /> 
  <img src="http://placehold.it/350x350/E8117F/FFFFFF" /> 
  <img src="http://placehold.it/350x350" />
 
</div>
<script> $(function() { $('#coverflow').coverflow(); }); </script>

Par contre, le souci qui se pose est qu'il n'y a toujours que 6 images maximum qui apparaissent les autres sont invisible ou alors on voit un carré gris. Et par contre, lorsque je descend la molette pour regarder en bas de ma page, là, toutes les images se mettent à apparaitre!! très bizarre mais peut-être aurez-vous une explication...

autre chose; je voulais créer plusieurs liens... je m'explique:
theme 1 theme 2 theme 3 (petit menu)
le coverflow 1 apparait sous le petit menu
et si l'on clique sur theme 2 ou theme 3 les photos de ce theme apparaissent à la place du theme 1 et non comme actuellement en bas de la page.

J'espère avoir été claire, pas facile de m'expliquer.

Merci de votre aide
Novis
Modifié par novis (22 Sep 2017 - 14:35)