Comment installer un menu slider ?

[What-if-I-fall]

Bonjour, ou bonsoir, suivant l'heure à laquelle vous me lisez !

La néophyte du javascript et autres joyeusetés... LE RETOUR ! Plus sérieusement, on m'avait vraiment bien aiguillée sur l'utilisation du javascript et grâce à l'aide de Xuĕ, j'avais réussi à installer une page HTML sur mon forum. J'ai essayé de m'y prendre toute seule pour appliquer un tutoriel en anglais, mais force est de constater que j'ai encore besoin de vous ...
Je suis désolée d'être si nulle, vraiment.
Voici l'effet voulu en question : http://nivo.dev7studios.com/#usage le NIVO SLIDER tadaaaaaaaaaam !
J'ai essayé de suivre les instructions, et j'ai crée une page html dans laquelle j'ai entré la partie suivante :

Spoiler:

J'ai mis la partie CSS dans mon CSS.. Mais pour la suite, je bloque.
Merci à tous ceux qui essaieront de m'aider
Je continue à chercher de mon côté !

What if I fall

[What-if-I-fall]

J'ai envie de dire Up. C'est mon premier up, grand moment j'en suis toute émoustillée

[Chanellebbrose]

j'en ai mis un sur mon fofo en utilisant :

http://www.slide.com/arrange

Il est simple à créér et quand c'est fait ils te donnent un code à mettre.

[What-if-I-fall]

Bonjour Chanellebbrose

Merci d'essayer de m'aider : D
En réalité j'aurais souhaité un menu comme celui que j'ai mis sur le site - pour les arrêts des images, le défilement, ect.. - mais merci de m'avoir proposé le tien Je vais continuer la recherche

Merci beaucoup en tous cas, j'vais continuer à chercher Ze solution (à prononcer avec un accent américain )

What-if-I-fall

[Chanellebbrose]

peu importe celui que tu utilises, si par exemple tu veux le mettre sur ta page d'accueil :

affichage, généralités, message sur page d'accueil et là il faut que tout soit entre

<div ici tu mets tes infos puis tu termine par </a></p>

et en principe ça fonctionne, le mien fonctionne comme ça !

Je ne suis pas certaine d'avoir totalement répondu à ta question car je ne suis pas une pro, mais à force de bidouiller j'y suis arrivée !!

bon courage

[quierra]

Coucou, ce n'est pas bien compliqué...

Tu peux bien évidement utiliser ce code. Mais tout dépend de ou tu veux l'utiliser.
Si c'est pour l'accueil, tu te sers de ton message d'accueil, ou même d'un template !

En gros et en partant du principe que c'est sur l'accueil que tu le souhaites :

La partie HTML se place ou sur le message d'accueil, ou dans le template "index_box".

La partie SCRIPT, se place ou sur le message d'accueil, ou dans un template "index_box".

La partie CSS dans le css bien évidement.

Si tu choisis directement le message d'accueil :

- Colle tout ton code html

- A la suite tu colles les scripts

- Par contre le script de fonction jQuery est à héberger auparavant, sur Archive host par exemple, et à coller à la suite du code html de cette façon :

Code:

<script language="javascript" type="text/javascript" src="ADRESSE DE TON SCRIPT"></script>

- La partie CSS se place dans ton css : Affichage --> Couleurs --> Feuille de style CSS

Si tu préfères utiliser le template "index_box"

Recherche (ctlr+f) : (tout en haut de ton template)

Code:

   <!-- BEGIN message_admin_txt -->
   <tr>
      <td class="row1" rowspan="3" align="center" valign="middle">
      <div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>

Et juste en dessous, tu colles ton code HTML ainsi que les scripts.

- Reste plus qu'à coller le CSS dans l'onglet css.

A savoir que la bibliothèque jQuery est déjà intégrée à toutes nos pages, donc nul besoin de rajouter cette bibliothèque.

Tu peux aussi mettre tout le code en entier sur une page HTML de ton forum, et la rajouter par iframe sur ton accueil.

<div ici tu mets tes infos puis tu termine par </a></p>

Et bonjour les bugs , si tu ouvres un "div", il faut aussi le refermer mais par un /div, et non avec d'autres balises qui n'ont absolument rien à voir.

Bonne journée.

[What-if-I-fall]

Bonsoir Quierra !

Merci d'essayer de m'aider. Je dois paraître stupide puisque tu dis que ça n'est pas bien compliqué, mais si niveau CSS et html ça va à peu près, je ne pige strictement rien niveau script / jquery et c'est pas faute d'avoir essayé. C'est comme les oignons, je dois être allergique... passons, passons.

Bon, moi j'étais persuadée que je devais créer une page html, joyeuse drille que j'étais ! Je l'ai donc supprimée x) et j'ai essayé tes conseils pour passer directos par le message d'accueil. Hooop, j'ai c/c dans ma zone de texte :

Spoiler:

Déjà là, j'ai du me gourer, d'autant plus que je n'ai rien pigé à ton explication concernant le jQuery. Héberger ? Mais héberger quoi oO ? Et dans quel but ? Je ne comprends décidément pas grand chose, vraiment désolée ^^
Et ça ne marche paaaas 8D voici mon forum test (TEST 8D) et le résultat est... hmmm delicious ! : http://ltdm-essai.1fr1.net/
Il n'y a que niveau CSS que je crois avoir géré le truc (glorieux, vraiment... XD).
Merci beaucoup, beaucoup de m'aider (:

What-if-I-fall

[quierra]

Il fallait le dire tout de suite que tu n'y comprends rien

Tu fais tout faux, dès le départ ! Tu n'as même pas téléchargé le zip ! Comment tu veux le faire fonctionner ? Avec les quelques codes qu'il explique sur le site ? Alors bonne chance

En premier, on lit et essaie de comprendre, y a des traducteurs qui ne sont pas parfait, mais qui aide comme même à savoir ce qu'il faut faire.

Mais je suis gentille et je te l'ai fait ! Pour toi plus qu'un copier coller, il faudra bien sur mettre tes propres images, et peut être changer le fond.

Comme j'ai remarqué que ton forum est très petit, j'ai fait un autre fond, celui d'origine étant beaucoup plus large que ton forum.
Le mien est très simple, tu t'en feras un autre à l'occasion.

C'est parti ! Tu peux voir le slide fini ici : http://araigne.forumactif.com/forum

A coller dans le html, accueil ou template :

Code:

        <div id="slider-wrapper">
       
            <div id="slider" class="nivoSlider">

                <img src="http://i65.servimg.com/u/f65/11/95/30/70/up10.jpg" alt="" />

<a href="http://www.themes-fa.com/"><img src="http://i65.servimg.com/u/f65/11/95/30/70/nemo10.jpg" alt="" title="TU PEUX METTRE UN LIEN A CHAQUE IMAGE, METS LUI UN TITRE POUR QUE LE TEXTE S'AFFICHE" /></a>

                <img src="http://i65.servimg.com/u/f65/11/95/30/70/toysto10.jpg" alt="" title="#htmlcaption" />

                <a href="http://www.themes-fa.com/"><img src="<img src="http://i65.servimg.com/u/f65/11/95/30/70/walle10.jpg" alt="" title="IL N'Y A QUE LES IMAGES AVEC LIENS, (ou id expliqué plus loin) QUI AFFICHERONT CETTE LEGENDE" /></a>

            </div>
            <div id="htmlcaption" class="nivo-html-caption">
                <strong>TU VEUX AFFICHER UNE LEGENDE A UNE IMAGE QUI N'A PAS DE LIEN ? RIEN DE PLUS SIMPLE, A 'TITLE' TU MARQUES : 'htmlcaption', ET CE MOT S'AFFICHERA. TU PEUX AUSSI RAJOUTER  <a href="http://www.themes-fa.com/">DES LIENS</a><STRONG> . TU TROUVERAS CE DIV TOUT EN BAS DE TON HTML. RESTE PLUS QU'A Y MARQUER TON TEXTE.</STRONG>.
            </div>

</div>

<script src="http://s3.archive-host.com/membres/up/1696114791/java/java_pour_aide/jquerynivosliderpack.js" type="text/javascript"></script>
<script src="http://s3.archive-host.com/membres/up/1696114791/java/java_pour_aide/Nico_slider_97.js"></script>




QUELQUES EXPLICATIONS :

- Pour afficher une légende, il faut mettre un lien à ton image. C'est le texte que tu marqueras dans 'title', qui apparaitra :

<a href="TON LIEN"><img src="ADRESSE DE TON IMAGE" alt="" title="LE TEXTE QUI VA S'AFFICHER DANS LA LÉGENDE" /></a>

- Si tu veux afficher une légende à une image qui n'a pas de lien, tu marques :

<img src="ADRESSE DE TON IMAGE" alt="" title="#htmlcaption" />

- L'id #htmlcaption se retrouve tout à la fin de ton html, tu y marques ton texte, tes liens.

- Je n'ai pas testé avec plusieurs, trop fatigué là ! Je vois ça demain.

Tu as mis tes images, tes liens ? Tu enregistres et on passe a la partie css.

Affichage --> Couleurs --> Onglet feuille de style CSS

Spoiler:

Comme tu peux le voir, ce ne sont pas que les quelques lignes que tu as vue sur le site... Les deux premiers codes sont ceux que tu vas sans doute modifier,

#slider-wrapper --> Est le conteneur principal, c'est à lui que j'ai mis le fond blanc transparent, une marge en haut pour qu'il ne colle pas au bord, une marge intérieure en haut et à gauche pour que les images soient bien au centre.

#slider --> C'est lui contient les images etc... C'est donc ici qu'il faudra spécifier la taille exacte de tes images.

Je voulais bien faire et tout te noter, mais j'ai eu la flemme ! Puis je sais très que vous ne voulez que des codes à copier/coller, donc se fatiguer pour le peu qui aimerait comprendre... Mais j'ai laissé tous les commentaires qu'il avait mis, c'est en anglais mais simple à comprendre.

A savoir :

- Je n'ai pas rajouté la librairie jQuery, je t'ai expliqué dans le post précédent, que cette librairie est déjà intégrée à toutes les pages de nos forums actifs.

- Il y avait deux scripts à héberger, toi tu mets un script de cette façon :

<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>

Heuuuu.... Il va être lu comment ? Tu vois bien qu'il est sur son serveur, il faut que tu remplaces l'adresse par ton propre script héberger sur Archive-Host ou autre. ( il fallait d'ab le télécharger !)

<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />

Ceci correspond à "son propre css", et idem... Il est sur son serveur, il ne va être lu que sur son site et non sur ton forum ! Mais sache que le css n'a absolument rien à faire sur ton accueil.
Ton beau copier/coller ne risque vraiment pas de marcher

Pff, je fatigue là... Je repasse demain pour t'expliquer comment on héberge un script, puis surtout pour vérifier si je n'ai pas dit trop de bêtises ! La fatigue prend le dessus.

[What-if-I-fall]

Bonjour Quierra !

Je te remercie beaucoup de tout ce que tu as fait. La marge à gauche décalait un peu les images chez moi, j'ai modifié certains trucs. Merci vraiment beaucoup pour les explications, grâce à elles j'ai pu arranger le slide comme je le voulais, en fonction des légendes ou non, et tu as très bien expliqué le cas de la légende sans lien - c'est pour te dire, j'ai compris O.O !
Il reste juste le trou noir du comment héberge t-on un script, mais j'ai bien compris le reste. Je vais examiner le CSS pour en comprendre l'intégralité, mais dans l'ensemble je capte plutôt bien
Vraiment merci, et je préfère 10 000 fois une explication bien faite qu'un code à c/c sans comprendre ce que je fais. Là, au moins, j'ai compris mes... (nombreuses) erreurs.
Vraiment merci et désolée d'avoir accaparé ton temps. C'est super de se consacrer aux autres, j'aimerais avoir plus à proposer qu'un simple "merci, au revoir". Si tu veux je peux te faire une tarte aux pommes

Vraiment merci pour tout, ça marche nikel. Si tu n'as pas trop la flemme de m'expliquer comment héberger un script; je veux bien, mais sinon ce n'est pas grave. Merci pour tout. Merci merci merci !

What-if-I-fall

[quierra]

Coucou, contente si ça te sert !

Déjà il faut savoir que quand tu enregistres directement un jQuery sur l'accueil, ton code se transforme et ne peut plus fonctionner.

Code:

$#36;(window).load(function() {
$#36;('#slider').nivoSlider({

Comme tu peux le voir, les "$" se sont transformés en "$#36;" et bien souvent en "&36".

C'est pour cette raison qu'il est préférable d'héberger les jQuery, mais il y a d'autres solutions comme même !

C'est tout simple pour héberger un script, je te colle les explications que j'ai donné l'autre jour sur mon forum, c'était à propos du plugin jQuery "Cycle", mais c'est le même principe :

Colle ce code sur le bloc note :

Code:


$('#cycle_TFA').cycle({
    fx:      'scrollDown',
    speedIn:  2000,
    speedOut: 500,
    easeIn:  'bounceout',
    easeOut: 'backin',
    delay:  -2000,
prev: '#avant',
next: '#apres',
});
 $('#pause').click(function() {
    $('#cycle_TFA').cycle('pause'); return false;
});
$('#play').click(function() {
    $('#cycle_TFA').cycle('resume'); return false;
});

Comme tu peux le voir, on ne met pas les balises "script" !

Fais tes réglages... Et tu enregistres :



Tu te rends sur Archive-Host qui accepte cette extension (ou un autre), et tu vas chercher ton "fichier .js" :



Tu récupères le lien qu'il te remet, (si Archive-Host, le tout premier) et tu le rajoutes dans ton code :

Code:

<script type="text/javascript" src="ADRESSE DU SCRIPT"></script>

C'est pas compliqué non ? Mais quand on ne sait pas... Tu peux faire exactement la même chose avec d'autres extensions, comme ".css", ".html" etc...

Voila, rien de plus.. Et ton script ne bougera plus !

EDIT : Je profite du fait que tu n'as pas encore répondu, pour corriger une grosse erreur inattention !

Je ne sais pas si tu t'en es rendu compte, mais la quatrième image ne fonctionnait pas et en plus y avait des bugs !

C'était à cause de :

<img src="<img src="ADRESSE DE TON IMAGE" alt="" title="LE TEXTE QUI VA S'AFFICHER DANS LA LÉGENDE" /></a>

Une balise image ouverte et non refermé !!! Comme quoi il vaut mieux revoir les codes à tête reposé.

J'ai édité le code du post précédent pour corriger, tu ne devrais plus avoir de problème.

[Anzu]

Bonjour, Attention, cela fait 7 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir délester votre sujet, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, dans ce cas, votre premier message et cochez l'icône A bientôt sur ForumActif

[Ea]

Up what if I fall ^^

Pour le $ de jQuery c'est un raccourci du mot jQuery ( enfin on peut mettre jQuery(window) et ça sera équivalent à $(window) et c'est même préférable ).


Cordialement.

[What-if-I-fall]

Bonsoir !

Désolée, j'avais préparé une réponse et j'ai tout perdu, et ensuite j'ai bêtement oublié.

Merci de toutes ces explications =) je crois avoir compris le principe, et en plus j'ai pu modifier le code à ma sauce, enfin bref, c'est vraiment beaucoup plus clair. Merci vraiment beaucoup Quierra. C'est très clair, très bien expliqué (parce que pour que je comprenne, faut y'aller )
Merci Etana pour cette précision ! Je m'demandais aussi ce que venait faire le $ là dedans 8D militons pour l'apparition des euros sur le net !

Merci vraiment énormément