Panneau d'accueil défilant

[The Akuma]

Bonjour à tous et à toutes !

Je pense que je suis dans la bonne partie du forum, mais je ne suis pas très sûre... XD Depuis maintenant plusieurs années, je gère un forum de Roleplay avec ma soeur aînée. J'en suis la graphiste. Cela fait aujourd'hui de longs mois que nous travaillons sur la version 2 du forum (Qui ne risque pas d'arriver avant un moment, mais on est prévoyantes XD), et tout autant de temps que ma question ne peut trouver de réponse. Et pourtant, j'ai demandé à beaucoup de gens =w=

Je me tourne donc vers vous en espérant que vous puissiez m'aider. Nous cherchons comment reproduire le tableau défilant de ce forum : http://creatures.forumgratuit.fr/ car notre V2 de notre forum sera orientée futuriste et on pensait que ça rendrait plutôt pas mal, comme un genre d'écran qui défilerait dans une rue de la ville, vous voyez ? J'ai demandé à plusieurs personnes, certains ont pu me donner un code qui y ressemblait, mais ça n'était pas vraiment ce qu'on voulait. Alors je vous le demande : est-ce possible de faire quelque chose comme ça, ou est-ce déjà trop compliqué ? Sachant que je ne suis pas très très calée dans tout ce qui est code etc, alors...

Je vais récapituler mes questions, donc :

- Est-ce possible de faire un panneau comme celui-là ?
- Serait-ce possible qu'on me donne le code tout prêt, juste avec des indications sur où le mettre, comment placer les images etc ?


La version de mon forum est phpBB2, je suis l'une des deux administratrices et fondatrices, je n'ai jamais touché aux templates, j'ai une feuille de style CSS personnalisée (qui ne sert que pour l'actuel panneau d'accueil qui sera remplacé par le défilant), et j'ai Internet Explorer (8 ou 9, je sais plus XD) et Firefox comme navigateurs.

J'espère que j'ai donné toutes les bonnes informations, et que je suis dans la bonne catégorie surtout. XD

Merci de m'avoir lue et merci aussi à ceux qui me répondront...

Bonne journée ou bonne soirée ! ^^

[Adam_sfp]

Bonjour

je ne pense pas que l'on vous donnera un code tout fait...
Pour l'effet vous pouvez regarder du coté de
http://jquery.malsup.com/cycle/

Cordialement.

[The Akuma]

Merci, ça m'aide déjà un peu d'avoir ça !
Bah, je sais pas trop, mais étant pas très très bonne en code, j'aurai préféré au moins qu'on me donne une base, c'est à dire le panneau et l'effet de défilement, pour le remplir après je m'en serai chargée bien sûr.

Mais en tout cas merci pour votre réponse ^^

[Chacha]

Bonjour, Nous n'avons plus de nouvelle de l'auteur de ce sujet depuis plus de 7 jours. Nous considérons donc ce problème comme résolu ou abandonné. La prochaine fois, merci de nous tenir au courant de l'évolution de votre problème, ou à faire un UP régulièrement ! Ce sujet est corbeillé (rappel de pourquoi), merci d'ouvrir un nouveau sujet si nécessaire, en respectant les Règles générales du forum. A bientôt sur ForumActif

[Chacha]

Bonjour, Le topic est replacé à la demande de l'auteur du sujet. A bientôt sur ForumActif

[Adam_sfp]

Bonjour

Ce n'est pas évident à mettre en place...
Voici un exemple avec des images avec les différentes parties
HTML
CSS
ET javascript
Il faut aussi mettre 2 autres scripts
jquery.cycle.all.latest.js
et jquery.easing.1.3.js

Vous pouvez faire des essais sur cette page en changeant les valeurs images etc...
pour tester cliquer sur run
http://jsfiddle.net/adam_sfp/uERnd/

Cordialement.

[The Akuma]

Je crois que j'ai compris comment ça fonctionne maintenant ! J'irai essayer plus tard, en espérant que je ne sois pas trop bête pour avoir mal compris XD
Merci !

Edit : Eh bah finalement, je dois être idiote ou en tout cas vraiment pas douée, parce que non, j'y arrive pas...

[Sen Hime]

Effectivement il y a beaucoup de parties différentes, ceci dit ça ne me semble pas si complexe à mettre en place une fois la structure comprise. Par contre c'est extrêmement libre et personnalisable...

Voilà un exemple expliqué étape par étape avec un design qui se veut minimaliste :

Étape 1
En premier lieu, il faut ajouter les scripts cités plus haut, ils sont déjà hébergés, donc il suffit d'ajouter les balises suivantes à l'endroit où tu ajoutes habituellement tes scripts :

Code:

<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.easing.1.3.js"></script>

Étape 2
- Ensuite, il faut créer la structure en HTML/CSS, elle se compose d'un élément principal, qui va contenir tous les éléments qui défilent. Dans le cas d'un panneau, le mieux c'est d'avoir un div qui encadre un ensemble de div qui seront les pages : ainsi tu peux remplir les div avec ce que tu veux (texte, images, etc).
À cela on ajoute aussi des boutons précédents/suivant, ici je mets simplement des liens mais ça peut aussi bien être des images, on verra à l'étape du javascript comment leur donner l'effet voulu.

Code:

<div class="slideshow">
   <div class="page">Contenu de page 1</div>
   <div class="page">Contenu 2</div>
   <div class="page"><img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" /></div>
   <div class="page">Etc etc<br /><img src="http://3d.img.v4.skyrock.net/9181/33829181/pics/3025582696_1_11_LhOtXNgU.png" /></div>
</div>
<p><a href="#" class="prev">prev</a> <a href="#" class="next">next</a></p>

Histoire de mieux visualiser (au lieu d'avoir du blanc sur fond blanc), c'est mieux d'ajouter un peu de CSS, ici le code est volontairement tout simple : obtenir un rectangle à fond gris dans lequel les pages vont défiler (mais tu peux modifier via le CSS le fond, la taille, etc, c'est la part la plus libre et importante pour le rendu final)

Code:

<style type="text/css">
/* Le cadre principal qui contient les pages qui défilent : */
.slideshow { height: 232px; width: 400px; margin: auto; border: 1px black solid; background-color: #DDDDDD; }
/* L'apparence d'une page qui défile : */
.slideshow .page { height: 232px; width: 400px; }
</style>

Étape 3
Jusque là, tu as juste l'apparence, mais ça ne bouge pas et le précédent/suivant ne fonctionne pas. Il reste à ajouter le javascript, qui va permettre de lier les éléments avec leurs effets :

Code:

<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
      fx: 'scrollDown',
      prev: '.prev',
      next: '.next',
      easeIn:  'easeInBounce',
      easeOut: 'easeOutBounce',
      speedIn: 1000,
      speedOut: 1000,
      delay: -2000
   });
});
</script>

Alors, les éléments importants à noter :

• .slideshow c'est l'attribut class du div qui contient tes pages
  
• .prev et .next, c'est l'attribut class que j'ai donné à mes liens précédent et suivant, si tu voulais mettre une image il suffit de lui ajouter l'attribut class mentionné dans ce script, ex : <img src="..." class="prev" /> pour un bouton précédent (que tu positionnes comme tu veux en CSS)

Pour information/rappel, quand tu veux donner la référence d'un élément avec son attribut class tu ajoutes un point devant le nom, et une dièse si tu veux utiliser son id. Ex : pour <div id="slide" class="slideshow">[...]</div>, tu pourras utiliser #slide ou .slideshow dans le javascript.

Le reste des valeurs concerne l'effet de transition, tu en trouveras plein sur le site qui a été donné.

• fx c'est l'effet de transition, à savoir ici le défilement du haut vers le bas
  
• easeOut, easeIn, speedIn, speedOut et delay servent à régler les effets "élastiques" lors de l'entrée ou la sortie d'un objet, sans ça il défile de façon habituelle

Au final c'est surtout au niveau du design qu'il restera beaucoup à faire, puisque le div .slideshow tu peux lui donner l'apparence que tu veux (sans doute une image de fond, des bordures, etc), et pour les boutons précédents/suivants, à positionner où tu le veux.

[The Akuma]

Ouah, merci, au moins plus clair que ça, je ne pense pas que ce soit possible. X)

Cependant, je pense pas que ça soit possible que j'essaye tout ça aujourd'hui, ça me prendrait trop de temps, et j'en ai déjà pas beaucoup... Mais de toute façon, je garde tout ça, puisque j'ai encore beaucoup, beaucoup de temps avant d'en avoir besoin, et si jamais j'y arrive toujours pas, bah... Je reposterai un truc, ou je me débrouillerai. XD

Merci à vous deux, je pense que je vais m'en sortir, j'ai réussi à m'en sortir jusque là, alors ça devrait aller =p

Bonne journée ! *va mettre le topic en résolu*