Intégrer jquery dans coverflow

**novis5** · 26/09/2017, 11h05

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

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

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 CSS :

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

**novis5** · 27/09/2017, 17h27

Bonjour,

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

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
<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 css :

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

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

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

**NoSmoking** · 27/09/2017, 20h24

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

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

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.

**novis5** · 28/09/2017, 12h13

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 html :

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

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

**NoSmoking** · 28/09/2017, 20h45

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.

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

**novis5** · 29/09/2017, 09h58

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

**NoSmoking** · 01/10/2017, 09h24

Dans le cas que tu sites la page change, regarde la barre d'adresse.

**novis5** · 01/10/2017, 12h04

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?

**NoSmoking** · 01/10/2017, 22h48

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.

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

**novis5** · 02/10/2017, 11h23

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

**novis5** · 02/10/2017, 12h34

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

**NoSmoking** · 03/10/2017, 11h17

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.

**novis5** · 03/10/2017, 12h35

Bonjour,

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

J'ai rajouté au css:

Code :

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

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

Intégrer jquery dans coverflow

jQuery

Discussions similaires

Partager

Partager