Intégrer jquery dans coverflow

**novis5** · 19/09/2017, 10h36

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** · 19/09/2017, 15h58

Bonjour,

Comment installer la bibliothèque jQuery ?.

**novis5** · 19/09/2017, 16h53

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** · 19/09/2017, 19h29

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** · 20/09/2017, 16h11

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** · 20/09/2017, 19h21

Je ne comprends pas...

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

**novis5** · 21/09/2017, 09h59

Toutes mes excuses... effectivement c'est un peu compliqué sans codes...désolé...

Alors le html:

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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>

dans le head:

Code :

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

1
2
3
4
5
6
<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" />

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');
 
 
    });
 
});

Par contre pour info, j'ai remarqué un truc très bizarre. Alors comme je vous disez, 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...

Merci beaucoup pour votre aide et votre patience

novis

**NoSmoking** · 21/09/2017, 19h11

Tout d'abord, c'est quoi cette ligne

Code html :

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

<script src="http://adresse code_coverflow_en.js"></script>

Pourquoi déclarer 2 fois ton coverflow ?

Code html :

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

<script> $(function() { $('#coverflow').coverflow(); }); </script>

Enfin

très bizarre mais peut-être aurez-vous une explication..

ce plugin n'est peut être pas fait pour cela , il semble être limité.

**novis5** · 22/09/2017, 13h55

Bonjour,

Alors mon premier code html correspond à mon link vers le cose 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');
 
 
    });
 
});

et le 2eme code:

Code :

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

<script> $(function() { $('#coverflow').coverflow(); }); </script>

en faite, si je ne mets pas cette partie de code, l'effet coverflow ne fonctionne pas! C'est effectivement étrange puisque dans le script editfiddle où j'ai trouvé ce coverflow il ne mettait pas cette partie de code dans le html.

Voilà j'espère que j'aurai été un peu plus clair!

**NoSmoking** · 24/09/2017, 10h40

ce plugin n'est peut être pas fait pour cela , il semble être limité.

je confirme que la structure est visiblement importante ainsi que le CSS appliqué au conteneur.

Un exemple simple qui fonctionne :

Code html :

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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>oElem.coverflow()</title>
<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>
<link type="text/css" href="https://cdn.rawgit.com/coverflowjs/coverflow/master/dist/coverflow.css" rel="stylesheet" />
<style>
#conteneur {
  width: 500px;
  height:400px;
  margin: 2em auto;
  border: 1px solid #CCC;
}
</style>
<script>
$(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');
    });
});
</script>
<body>
<div id="conteneur">
  <div id="coverflow">
    <img src="http://placehold.it/350x350/E80000/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/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/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/E80000/FFFFFF" />    
  </div>
</div>
</body>
</html>

**novis5** · 24/09/2017, 11h19

Ha d'accord, moi je pensais que ce script pouvait s'adapter et être malléable à souhait... En tout cas merci pour vos explications.
Je suis déçu car je dois recommencer ma recherche en repartant de zero.
Connaitriez- vous par hasard un coverflow pouvant contenir pas mal de photos et où il est possible d'insérer plusieurs thèmes. ex:
theme 1 theme 2 theme 3

et lorsque l'on clique sur le theme 2 ou 3, le coverflow s'affiche à la place du coverflow du theme 1

J'espère que vous pourrez m'aiguiller
Merci de votre aide

Novis

**novis5** · 24/09/2017, 12h29

re bonjour,

J'ai trouvé ce coverflow sur code pen (https://codepen.io/ozcrud/pen/MadRGM) et suis en train de le retravaillé sur edit fiddle (https://jsfiddle.net/r65xepsh/)
Pourrait-il fonctionner pour ce que je souhaite faire?
Je souhaiterai que mon coverflow ait 6 items et dans chacune d'entre elles il y aurait une dizaine de photos. Par contre j'ai remarqué que sur celui-ci, on ne pouvait pas faire aller la roulette de la souris pour faire défiler les photos. (y a -t-il un code spécial?) De même est-il possible d'insérer un code avec la fonction tactile afin de faire défiler les photos sur tablette?

Cela fait déjà pas mal de questions... Je vous remercie pour votre aide

Novis

**novis5** · 24/09/2017, 15h01

autant pour moi, j'avais mal lu votre message.
Du coup je vais de ce pas faire des tests avec edit fiddle, je reviendrai vers vous...
merci du coup de main

novis

alors voilà ce que cela donne: https://jsfiddle.net/03a4xdr6/
je n'aarive pas à faire fonctionner le coverflow...

**NoSmoking** · 24/09/2017, 17h27

alors voilà ce que cela donne: https://jsfiddle.net/03a4xdr6/
je n'aarive pas à faire fonctionner le coverflow...

Il te faut paramètrer correctement ton test et notament ajouter dans les « External Resources » les fichiers CSS/JS de la librairie coverflow.

Connaitriez- vous par hasard un coverflow pouvant contenir pas mal de photos et où il est possible d'insérer plusieurs thèmes. ex:
theme 1 theme 2 theme 3

et lorsque l'on clique sur le theme 2 ou 3, le coverflow s'affiche à la place du coverflow du theme 1

avec celui que tu as ou même avec le nouveau que tu as trouvé le schéma sera le même et fonctionnera sur le type des onglets.

Au clic sur le bouton theme #1 on masque toutes les galeries sauf la #1 ;
Au clic sur le bouton theme #2 on masque toutes les galeries sauf la #2 ;
... etc ...

**Toufik83** · 24/09/2017, 17h28

bonjour,
apparemment tu fais des erreurs au niveau de l'importation des fichiers externes dans jsfiddle, il faut mettre que la source dans les fichiers externes, et pas toute les balises <script>,<link />.

**novis5** · 25/09/2017, 09h31

Merci pour vos messages. (effectivement je ne mettais pas que les liens mais également <script>...

Je vais tester ce coverflow en essayant d'intégrer les différents thèmes comme vous me l'expliquez no smoking. J'espère y arriver

**novis5** · 25/09/2017, 10h01

J'ai modifié quelques éléments mais je ne parviens pas à mettre en place les différents thèmes.
Je vous montre ce que j'ai fait:

Code html :

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
21
 <li><a href="#theme 1">Thème 1</a> 
     <a href="#theme 2">Thème 2</a>
     <a href="#theme 3">Thème 3</a> </li>
 
<div id="conteneur">
  <div id="coverflow">
    <img src="http://placehold.it/350x350/E80000/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/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/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/E80000/FFFFFF" />  
  </div>
 </div>

et j'avais ajouté entre div id coverflow et img :

Code html :

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

1
2
3
4
5
 <div id="coverflow">
<div id="#theme 1">
    <img src="http://placehold.it/350x350/E80000/FFFFFF" /> 
 
</div>

et plus bas j'avais fait de même pour le theme 2. En faisant cela, l'effet coverflow ne fonctionnait plus et bien entendu les différents thèmes ne fonctionnaient pas pour autant...

Merci pour votre aide

Novis

**novis5** · 25/09/2017, 10h02

j'ai oublié de vous montrer les quelques autres modifications https://jsfiddle.net/1sx1oja2/2/

**novis5** · 25/09/2017, 17h50

bonjour,

juste une question...
Pourquoi le fichier coverflow crée avec edit fiddle a été supprimé? maintenant il y a une page d erreur et je ne le retrouve plus

**NoSmoking** · 25/09/2017, 20h48

Modifié/supprimé par erreur, le mieux est de voir avec eux.

Le mieux reste quand même de te créer ton fichier sur ton PC pour travailler. Une fois que cela sera fait montre nous ton travail.

Intégrer jquery dans coverflow

jQuery

Discussions similaires

Partager

Partager