Discussion :

[novis5]

Bonjour,

Je souhaite insérer ce coverflow (http://jsfiddle.net/rudygotya/7q8eapr2/2/) sur mon site.
Seulement je ne comprends pas comment intégrer jquery afin que l'effet se mette en place.

le html

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<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:

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
.ui-coverflow-wrapper{
    height:400px;
    margin-top: 100px;
}
.ui-state-active{
    border:0px;
}

le js:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$(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'ai essayé pas mal de chose mais je n'y arrive pas! Un grand merci à ceux qui voudront bien m'aider...

Merci de votre aide

zoro

[NoSmoking]

Bonjour,
Comment installer la bibliothèque jQuery ?.

[novis5]

Bonjour,
J'ai réussi à installer le coverflow!!

Le hic... oui, il y a un hic... J'aimerai qu'il y ai beaucoup de photos et donc j'ai multiplié les images. seulement en faisant ça, les images supplémentaires n'apparaissent pas. j'ai même testé avec un autre coverflow JQuery (et oui maintenant que je sais comment les installer ) Mais rebelote... les premières images rien à dire.. mais les suivantes n'apparaissent pas et un carré gris apparait à la place.

Je vous transmets le code html au cas ou vous verriez une erreur:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<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" /> <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" /> <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" /> <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" /> <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">&nbsp;</div>
<script> $(function() { $('#coverflow').coverflow(); }); </script>
<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 vers code_coverflow_en.js"></script>

et dans le head:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<link type="text/css" href="https://cdn.rawgit.com/coverflowjs/coverflow/master/dist/coverflow.css" rel="stylesheet" />
<link href="http://adresse code_coverflow_en.css" rel="stylesheet" type="text/css" />

Je n'ai pas touché au css ni au js.
J'espère que vous pourrez m'aider

merci d'avance

Novis

[NoSmoking]

Il serait bon de mettre les trois lignes suivantes dans ta <head> avant toutes utilisations

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<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 vers code_coverflow_en.js"></script>

[novis5]

Bonjour NO smoking,

même en modifiant cet emplacement le problème persiste. Je n'ai que 6 images qui s'affichent normalement et après les autres n'apparaissent pas...
Je ne comprends pas...

Merci de votre aide

Novis

[NoSmoking]

Je ne comprends pas...

comment veux tu que l'on comprenne sans plus d'explication et/ou de code !?!