Partage

coverflow en css uniquement

17 septembre 2017 à 10:10:06

Bonjour,

Je souhaiterai savoir si il existe des coverflows en css et html uniquement . J'ai constaté en regardant sur le net qu'il y avait toujours du js et j'aimerai savoir si un coverflow est possible sans javascript.

Merci d'avance

novis

TheRolf

17 septembre 2017 à 12:21:56

Salut,

Malheureusement les coverflows nécessitent des interactions, impossible à faire en pure css. Moi qui m'y connait bien, je ne pourrai pas aller très loin en en faisant. Il faut que le coverflow soit dynamique et que les transformations 3d s'adaptent en fonction de la position de la cover.

J'espère t'avoir aidé.

[PHP] WorkSpace - Codez votre site web dans votre site web

NovisCanvas

17 septembre 2017 à 16:44:06

Salut Darkman,

Merci de la réponse et de l'info!

exen

17 septembre 2017 à 20:31:12

Une question bête pour quel genre de coverflows, pour quelle utilisation ?

Compos sui.

NovisCanvas

18 septembre 2017 à 11:08:26

Bonjour,

Je souhaiterai insérer ce genre de coverflow: https://codepen.io/RasmusDesign/pen/mVKwwq?q=coverflow&limit=all&type=type-pens

J'avais trouvé un truc sympa http://www.cssjquery.com/coverflow.php mais une fois le coverflow crée, je ne parviens pas à l'insérer sur mon site.

Comme maintenant je sais comment insérer du css je me demandais si il n'y avait pas de coverflow juste en css...

Lamecarlate

18 septembre 2017 à 11:17:56

Bonjour,

le premier exemple que tu donnes utilise le script CoverflowJS : https://coverflowjs.github.io/coverflow/

Pour le second : tu as un site Wordpress ? Tu as installé le plugin ?

Pas d'aide concernant le code par MP, le forum est là pour ça :)

NovisCanvas

18 septembre 2017 à 12:21:51

Non je n'ai pas un site wordpress. Du coup je ne peux pas installer ce coverflow?

Lamecarlate

18 septembre 2017 à 12:59:27

Ben pas exactement celui-là.

Mais tu peux copier le html, css et js du Codepen, si tu prends bien aussi les JS externes. (va faire un tour sur le lien que j'ai donné, il y a toutes les explications)

Pas d'aide concernant le code par MP, le forum est là pour ça :)

NovisCanvas

18 septembre 2017 à 13:29:13

Ok. ET là j'ai testé par un autre moyen wow slider.

Il donne les codes etc. Il y a juste :

Upload these folders to your server

data1/
engine1/

que dois je en faire? comment insérer cela?

Pour le reste c'est OK.

Nb: je vais tout de même faire un tour sur le lien donné car l'effet est mieux...

Lamecarlate

18 septembre 2017 à 13:47:59

Si tu veux un slider, je ne conseille pas Wowslider, j'ai l'impression qu'iels mettent de tas de trucs non nécessaires dans leurs scripts - mais c'était ya pas mal d'années, je ne sais pas ce qu'il en est maintenant.

Je pense que tu devrais effectivement aller voir CoverflowJS

Pas d'aide concernant le code par MP, le forum est là pour ça :)

NovisCanvas

18 septembre 2017 à 13:59:29

OK alors j’arrête carrément wowslider et je me concentre sur coverflowJS

Merci du conseil

Novis

Je pense que le problème que j'ai à chaque fois c'est pour intégrer jquery.Je dois forcément oublier quelque chose, car à chaque fois j'ai les images qui s'affichent les unes à côté des autres, sans effet.

C'est vraiment l'incrustation jquery qui manque (enfin je crois...)

le html:

<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>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="http://adresse du lien vers coverflow en js/1019_coverflow_.js"></script>

le css:

.ui-coverflow-wrapper{
    height:400px;
    margin-top: 100px;
}
.ui-state-active{
    border:0px;
}

le js:

$(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 dans le <head>:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="http://lien vers coverflow css/1018_coverflow_.css" rel="stylesheet" type="text/css" />

Merci du coup de main

Novis

Après j'ai essayé en ajoutant

<script
			  src="https://code.jquery.com/jquery-2.1.3.min.js"
			  integrity="sha256-ivk71nXhz9nsyFDoYoGf2sbjrR9ddh+XDkCcfZxjvcM="
			  crossorigin="anonymous"></script>

dans le html mais l'effet ne fonctionne pas...

-
Edité par NovisCanvas 18 septembre 2017 à 14:36:28

exen

18 septembre 2017 à 15:54:56

Tiens regarde çà, ça pourrais t'intéresser.

http://www.css3create.com/Effet-coverflow-en-full-CSS

Après à toi d'y rajouter c qu'il manque dans le domaine du possible, j'ai joué un peut ce weekend dessus, c'est assez sympa.

-
Edité par exen 18 septembre 2017 à 15:57:26

Compos sui.

Basmo

18 septembre 2017 à 16:37:48

NovisCanvas a écrit:

Non je n'ai pas un site wordpress. Du coup je ne peux pas installer ce coverflow?

Pour infos, j'avais créé le premier codepen que tu as donné pour intégrer dans un wordpress. Et effectivement, j'ai utilisé coverflowJS avec un peu de css et j'ai ajouté les contrôles, rien de bien fou.

SI tu as accès au thème WP, y a aucun soucis pour l'intégrer ;)

Edit : j'ai mal lu, autant pour moi...

Tu charges deux fois jquery (une fois dans le header et une fois dans le footer) ? Tu peux envoyer le code complet parce que là on comprend mal ce que tu as fait ;)

-
Edité par Basmo 18 septembre 2017 à 16:39:42

Si vous voulez de l'aide, postez votre code.

NovisCanvas

18 septembre 2017 à 20:24:25

oulala! alors là je crois qu'il y a un truc que je n'ai pas compris!

Je pensais qu'en incrustant

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

le script chargeait la librairie automatiquement sans devoir l'intégrer sur mon hébergeur car le fichier est fort lourd.

Je pensais que cela serait plus rapide.Y a-t-il un autre script jquery à intégrer?

Le code montré précédemment est celui que j'ai intégré tel quel... (halala...)

Basmo

18 septembre 2017 à 20:46:03

NovisCanvas a écrit:

oulala! alors là je crois qu'il y a un truc que je n'ai pas compris!

Je pensais qu'en incrustant
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
le script chargeait la librairie automatiquement sans devoir l'intégrer sur mon hébergeur car le fichier est fort lourd.

Je pensais que cela serait plus rapide.Y a-t-il un autre script jquery à intégrer?

Le code montré précédemment est celui que j'ai intégré tel quel... (halala...)

Là j'ai l'impression que t'inclus deux fois jQuery dans ta page... Tu peux envoyer l'html de ta page au complet s'il te plaît ?

Si vous voulez de l'aide, postez votre code.

NovisCanvas

19 septembre 2017 à 9:26:29

Ok. je t'envoie ça:

<link href="http://adresse lien vers mon coverflow_en .css" rel="stylesheet" type="text/css" />
<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">&nbsp;</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script><script type="text/javascript" src="js/qp_coverflow.jquery.js"></script><script src="http://adresse lien de mon _coverflow_en.js"></script>

voilà mon html, effectivement j'ai inséré deux fois jquery, une fois dans le html et une fois dans le head. Où faut il mieux le mettre?

NB: exen je vien de voir ton message... je vais tester sur edit fiddle... peut-être que je comprendrai mon erreur

-
Edité par NovisCanvas 19 septembre 2017 à 9:32:51

Basmo

19 septembre 2017 à 9:41:42

C'est mieux de le charger à la fin juste avant ta balise fermante </body>.

Où est ton code javascript qui initialise le coverflow ?

Si vous voulez de l'aide, postez votre code.

NovisCanvas

19 septembre 2017 à 9:49:09

mon js est:

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

je l'ai inséré en tout dernier dans mon html; c'est le : <script src="http://adresse lien de mon _coverflow_en.js"></script>

la j'ai enlevé le lien vers jquery qui se trouvait dans le head;)

-
Edité par NovisCanvas 19 septembre 2017 à 10:26:43

Basmo

19 septembre 2017 à 11:44:23

Bon, tu dois avoir une structure qui ressemble à ça pour que ça fonctionne :

<!DOCTYPE html>
<html>
<head>
	<link type="text/css" href="https://cdn.rawgit.com/coverflowjs/coverflow/master/dist/coverflow.css" rel="stylesheet" />
</head>
<body>
	<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>
<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>
    $(function() {
        $('#coverflow').coverflow();
    });
</script>
</body>
</html>

Si vous voulez de l'aide, postez votre code.

NovisCanvas

19 septembre 2017 à 14:08:44

Alors j'ai plusieurs questions...

 <link type="text/css" href="https://cdn.rawgit.com/coverflowjs/coverflow/master/dist/coverflow.css" rel="stylesheet" />

<script src="https://cdn.rawgit.com/coverflowjs/coverflow/master/dist/coverflow.min.js"></script>

correspondent à mes scripts

<link href="http://lien vers coverflow css/1018_coverflow_.css" rel="stylesheet" type="text/css" />

<script src="http://adresse du lien vers coverflow en js/1019_coverflow_.js"></script>

C'est bien ça?

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

correspond à la bibliothèque jQuery. Je dois donc télécharger le fichier correspondant c'est bien ça?

Moi j'avais mis, <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script><script type="text/javascript" src="js/qp_coverflow.jquery.js"></script><script src="http://adresse lien de mon _coverflow_en.js"></script> pensant que cela ferait le lien avec la bibliothèque...

et enfin 3/

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

cela est à insérer de cette manière dans le html, ça fait le lien avec le js du même nom? c'est ça?

Merci de toute vos réponses, je cherche à comprendre !)

Basmo

19 septembre 2017 à 14:37:52

1) Oui c'est bien ça. Même si je ne comprends pas pourquoi tes fichiers sont préfixés par 1018 ou 1019... Perso, je te conseille d'utiliser les CDN comme sources plutôt que de les héberger toi même.

2) Tu peux très bien le charger via l'url que tu donnes (c'est même le mieux je penses). Je ne sais pas ce qu'est le deuxième js que tu donnes mais pour moi l'inclusion de jquery et coverflow est bonne. qp_coverflow.jquery.js je ne sais pas ce que c'est...

3) Oui, c'est la fonction qui initialise ton coverflow ;)

Si vous voulez de l'aide, postez votre code.

NovisCanvas

19 septembre 2017 à 14:54:00

donc je peux insérer ce script

<script src="https://cdn.rawgit.com/coverflowjs/coverflow/master/dist/coverflow.min.js"></script>

et cela fera le lien direct sans que j'ai à charger le fichier sur mon hébergeur?

J'ai essayé de télécharger le fichier sur mon hébérgeur mais le fichier est beaucoup trop lourd et mon hébergeur refuse l'enregistrement.

Le 2ème js je pensais que s'était le lien vers la bibliothèque sans avoir justement à la charger sur mon hébergeur.

merci des conseils...

NB::: Au Punaise j'ai réussi!!!!

j'ai modifié les codes comme tu m'as conseillé!!! je clique sur enregistrer (sans grande illusion) et là...

ça fonctionne!!!!

Cela fait 2semaines que je suis dessus!!

Je te remercie infiniment!! Pour ton aide... ta patience... tes conseils... trop content!

(je vais de ce pas faire une sauvegarde de sécurité)

-
Edité par NovisCanvas 19 septembre 2017 à 14:59:04

Basmo

19 septembre 2017 à 15:11:16

1) oui. De même avec le css de coverflow

2) Qui est ton hébergeur ? Parce que t'as pas l'air d'avoir un espace de stockage très conséquent...

Ah super nouvelle N'oublie pas de passé le sujet en résolu !

Si vous voulez de l'aide, postez votre code.

NovisCanvas

19 septembre 2017 à 15:15:15

Avant de noter résolu je vais essayer de finaliser avec mes images pour être sûr de ne plus avoir de question.

Car ce que je voudrais installer en plus sur ce coverflow ce sont des items

genre : 2015 20016 2017

et lorsque l'on cliquerait dessus, il y aurait les photos des dates correspondantes.

Je bosse sur ça et je reviens vers vous !)

Petits soucis:

J'ai un petit souci avec le coverflow...

Lorsque je multiplie les images, il n'y a à chaque fois que 6 images qui apparaissent correctement. Après, les autres, je vois juste le tour de l'image comment cela se fait-il?

<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" /></div>


<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> $(function() { $('#coverflow').coverflow(); }); </script><script src="http://adresse de mon lien pour_coverflow_en.js"></script>

merci de votre aide une nouvelle fois...

-
Edité par NovisCanvas 19 septembre 2017 à 16:21:45