Intégrer jquery dans coverflow

Version imprimable

Voir 40 message(s) de cette discussion en une page

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:

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:

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

le js:

Code:

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

19/09/2017, 15h58
NoSmoking

Bonjour,
:faq: Comment installer la bibliothèque jQuery ?.

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

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:

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:

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

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

Code:

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>

20/09/2017, 16h11
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
20/09/2017, 19h21
NoSmoking

Citation:

Je ne comprends pas...

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

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

Alors le html:

Code:

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:

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:

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

le js:

Code:

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

21/09/2017, 19h11
NoSmoking

Tout d'abord, c'est quoi cette ligne

Code:

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

Pourquoi déclarer 2 fois ton coverflow ?

Code:

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

Enfin

Citation:

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

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

Bonjour,

Alors mon premier code html correspond à mon link vers le cose js:
Code:

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:

<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!

Citation:

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:

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>

24/09/2017, 11h19
novis5

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
24/09/2017, 12h29
novis5

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
24/09/2017, 15h01
novis5

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...
24/09/2017, 17h27
NoSmoking
Citation:

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.

Citation:

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 ...
24/09/2017, 17h28
Toufik83

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 />.
25/09/2017, 09h31
novis5

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

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:

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:

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

25/09/2017, 10h02
novis5

j'ai oublié de vous montrer les quelques autres modifications https://jsfiddle.net/1sx1oja2/2/
25/09/2017, 17h50
novis5

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
25/09/2017, 20h48
NoSmoking

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.

Voir 40 message(s) de cette discussion en une page