Intégrer jquery dans coverflow

Version imprimable

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.

Bonjour,
Merci du conseil, je serai plus prudent désormais...

Alors voilà j'ai de nouveau retravaillé le coverflow et je ne parviens pas à faire en sorte que les différents thèmes soient actifs. Je dois sûrement me tromper dans le code html mais j'ai beau chercher sur internet, je ne trouve pas.

mon html:

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
<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">
 <#theme 1>
 <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" />   
  </#theme>
  <#theme 2>
    <img src="http://placehold.it/350x350" />
    <img src="http://placehold.it/350x350/E80000/FFFFFF" /> 
  </#theme>
 
 <#theme 3>
    <img src="http://placehold.it/350x350" />
    <img src="http://placehold.it/350x350/E80000/FFFFFF" /> 
  </#theme>
</div>
 </div>

mon js:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(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');
    });
});

mon css:

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
a {
  font-family: raleway, time, sans-serif;
  font-weight: bold;
  font size: 18px;
  font-variant: small-caps;
  text-align: center;
  text-decoration:none;
  color: #550266;
}
 
a{
  outline: 0px solid black;
  padding: 10px 10px ;
  border: 5px solid transparent;
}
a:hover {
  color: #250035;
  outline: 0px solid transparent;
  padding: 10px 10px ;
  border: 2px solid #250035;
}
 
#conteneur {
  width: 900px;
  height:600px;
  margin: 2em auto;
  border: 1px solid #212121;
}
 
img {
  -webkit-box-reflect: below 0px 
  -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(70%, transparent) , to(rgba(250, 250, 250, 0.1)));
}

vous remarquerez également des changement dans le css, par contre j'ai voulu installé un effet de réflexion mais il ne fonctionne pas...

Merci pour vos conseils

novis

Bonjour,

Nouveaux tests au niveau du html; je vous transmets mon travail. Je ne comprends pas ce qui cloche...

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

css:

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
a {
  font-family: raleway, time, sans-serif;
  font size: 18px;
  font-variant: small-caps;
  text-align: center;
  text-decoration:none;
  color: #550266;
}
 
a{
  outline: 0px solid red;
  padding: 10px 10px ;
  border: 5px solid transparent;
}
a:hover {
  color: black;
  outline: 0px solid transparent;
  padding: 10px 10px ;
  border: 2px solid black;
}
 
#conteneur {
  width: 900px;
  height:600px;
  margin: 2em auto;
  border: 1px solid #000;
}

js:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(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');
    });
});

apercu sur edtit fiddle: https://jsfiddle.net/03a4xdr6/4/

Je vous remercie de votre aide...
Comme vous pouvez le constater, en mettant différents conteneurs, le coverflow ne fonctionne plus. il y a donc une partie de mon code qui n'est pas bonne.

Merci d avance

novis

Citation:

par contre j'ai voulu installé un effet de réflexion mais il ne fonctionne pas...

commence par fonctionner ton code avant de t’attaquer aux effets annexes et souvent superflus.

Pour commencer ta structure HTML n'est pas bonne, tu doit avoir un conteneur par « coverflow ».
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 <div class="content"> <div id="coverflow-0"> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> </div> </div> <div class="content"> <div id="coverflow-1"> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> </div> </div> <div class="content"> <div id="coverflow-2"> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> </div> </div>
de la sorte tu pourras le faire fonctionner en modifiant légèrement le sélecteur pour l'application du plugin comme suit
Code:

1 2 3 4 5 6 7 $(function() { $('[id^=coverflow]').coverflow({ active: 2, select: function(event, ui){ } }); });
La suite pour le moment est une autre histoire.

28/09/2017, 11h13
novis5
Merci No Smoking!
Je pense avoir compris en plus. Moi mon erreur était de mettre un conteneur coverflow et du coup il n'y en avait forcément que un qui était actif!
Et si j'ai bien compris, le js a été modifié car du coup il y a plusieurs div et il fallait le signaler dans le js? C'est bien ça ou je suis à côté de la plaque?

Mise à part cela, je n'ai toujours pas réussi à rendre mes thèmes 2 et 3 cliquable avec le bon coverflow.
Voici ce que j'ai fait: https://jsfiddle.net/03a4xdr6/5/

J'ai modifié la nav:
Code:

1 2 3 <nav><a href="#coverflow-0">Thème 1</a> <a href="#coverflow-1">Thème 2</a> <a href="#coverflow-2">Thème 3</a> </nav>
en précisant a quel coverflow correspondait les différents thèmes.

merci de votre aide

novis
28/09/2017, 19h45
NoSmoking

Citation:

car du coup il y a plusieurs div et il fallait le signaler dans le js? C'est bien ça ...

Oui c'est bien cela.

Citation:

je n'ai toujours pas réussi à rendre mes thèmes 2 et 3 cliquable avec le bon coverflow.

Que souhaites-tu faire réellement, faire apparaître un seul « overflow » en masquant les autres et afficher celui dont tu as cliqué le nom (comme indiqué au post #14)?
29/09/2017, 08h58
novis5

Oui c'est tout à fait ça!

Ce que je souhaite c'est exactement ça: http://kaya.jalbum.net/LightFlow/v3/...uds/index.html, avec la scrollbar et tout mais en mode qui s'adapte au tablette donc tactile, si c'est possible.
on peut cliquer sur building ou flowers et là les photos s'affichent.

J'espère que vous pourrez m'aider

Novis
01/10/2017, 08h24
NoSmoking

Dans le cas que tu sites la page change, regarde la barre d'adresse.
01/10/2017, 11h04
novis5

OK!!!! heureusement que vous êtes là!! je pose des questions de débutants mais bon... j'en apprends tous les jours;)
Donc il faut que je crée une page par coverflow et que j'insère le lien correspondant à la page.
Du coup cela me parait moins compliqué...

Par contre je souhaiterai y insérer un scrollbar "moderne" comme dans celui de kaya mais je ne sais pas comment cela fonctionne. Pouvez vous m'aider?
01/10/2017, 21h48
NoSmoking

Citation:

Donc il faut que je crée une page par coverflow et que j'insère le lien correspondant à la page.

c'est effectivement une solution mais ne connaissant pas la nature finale du projet difficile de dire.

Citation:

Par contre je souhaiterai y insérer un scrollbar "moderne" comme dans celui de kaya mais je ne sais pas comment cela fonctionne. Pouvez vous m'aider?

Ceci est un autre problème, une discussion = une question
02/10/2017, 10h23
novis5

Citation:

Envoyé par NoSmoking

c'est effectivement une solution mais ne connaissant pas la nature finale du projet difficile de dire.
[/B]

Mon projet est de présenter mes peintures avec le même genre de coverflow que présenté par kaya. J'ai un site internet et je souhaiterai y intégrer mes peintures de manière interactive, car là j'ai un coverflow, mais il ne s'adapte pas au tablette et au smartphone et à l'heure actuelle c'est tout de même ce que la plupart des gens utilisent.
Voilà je ne sais pas ce que je peux dire de plus...
Si comme précisé plus haut, il y aurait plusieurs thèmes à mes peintures et là notamment je les présenterai par années afin de voir l'évolution.

ok pour la scrollbar je posterai un nouveau message merci de vos conseils;)
02/10/2017, 11h34
novis5

Par contre j'avais une autre question concernant le coverflow.
Les images présentes sur l'exemple mesure toutes 350x350px, or les miennes n'ont pas toutes ce format carré.
Je redimensionne mes images en mettant la largeur à 350 px mais pour les autres, elles sont fixées par le haut et moi j'aimerai qu'elles soient toutes positionnées en bas et non en haut lorsque le coverflow se met en action.
Que dois -je rajouter au css?

(Difficile de m'expliquer... j'espère que vous aurez compris...)

merci pour votre aide
03/10/2017, 10h17
NoSmoking

Citation:

Que dois -je rajouter au css?

J"ai bien peur de ce que j'en ai vu que cela ne soit pas faisable simplement sauf peut être en passant par des conteneurs pour centrer les images verticalement, pas vu d'option pour ce point là dans la documentation.
03/10/2017, 11h35
novis5
Bonjour,

Alors j'ai testé un truc et je voulais voir avec vous...

J'ai rajouté au css:
Code:

1 2 3 img{ padding-top: 100px; }
Du coup, les images descendent de 100px par rapport au haut de l'image. Y a t-il un moyen pour qu'il se base par rapport au bas de l'image (je risque de dire une grosse bêtise mais c'est pas grave...) avec position: absolute ou : relative... ?

Merci de m'expliquer si cela est possible

novis