Intégrer jquery dans coverflow

Version imprimable

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

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

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