Widget Slide

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Widget Slide

Message par Fleurine le Mar 29 Oct 2013 - 15:35

Bonjour,

Je souhaiterais mettre un slide au niveau des évènements de façon à ce que les images aillent de droite à gauche. J'avais essayé avec un "marquee" mais le rendus est beaucoup moins bien...
Je voudrais qu'il y ait un arrête sur chaque images de 2 secondes et qu'ensuite sa redefille. Je ne sais pas si j'exprime assez bien mon idée, le slide devrais être infini (se répéter). Ce serait ainsi:

image 1 >arrête 2 secondes > image 2 > arrête 2 secondes... jusqu'à l'infini

Voici l'adresse de mon forum. Comme vous pouvez le voir il y a des panneaux coulissants un peu partout, c'est sympa. Mais je préfère l'idée de ce widget car l’essentiel est affiché et pas caché. Je souhaiterais que ce widget se trouve à gauche sur le forum. Pourriez vous m'aider avec le CSS, ce serait vraiment super, super, super gentil de votre part !

Merci aux lecteurs de ce sujet de ne pas prendre ce code pour un autre forum, et merci d'avance à la personne qui va m'aider ::pourtoi::


Dernière édition par Fleurine le Dim 3 Nov 2013 - 15:32, édité 1 fois

Fleurine
****

Féminin
Messages : 243
Inscrit(e) le : 23/07/2012

http://residence-hinata.forumactif.org/
Fleurine a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Widget Slide

Message par Fleurine le Mer 30 Oct 2013 - 16:34

Coucou !

J'envoie un petit up, ma demande est toujours d'actualité. Il me faudrait juste savoir comment insérer ce tableau afin qu'il se trouve sur toutes les pages (dois je le mettre sous page HTML ou javascript?) Pourriez vous m'aider si c'est sous javascript? Je n'y connais absolument rien en javascript mais en CSS je n'ai pas trop de difficultés.

Ma demande pour le slide est toujours d'actualité. Voici un forum qui a à peu pret le même code. Je vais le modifier un peu plus pour que ce soit complétement différent car c'est vrai que les deux se ressemblent pas mal. Désolée.
forum avec widget

Je modifierais le tout par CSS.

Merci à l'avance !! Bisous à tous <3

Fleurine
****

Féminin
Messages : 243
Inscrit(e) le : 23/07/2012

http://residence-hinata.forumactif.org/
Fleurine a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Widget Slide

Message par Fleurine le Ven 1 Nov 2013 - 14:39

Bonjour, comme dit, ma demande est toujours d'actualité. Si ma demande n'est pas claire n’hésitez pas à me le dire, je pourrais toujours essayer de reformuler ma demande. Pas de soucis. ::fleur::

Vous êtes au moins 110 à être passés sur mon sujet... Personne ne réponds, mais tout le monde voit le code, je vais finir par le mettre sous hide comme à mon habitude.

Fleurine
****

Féminin
Messages : 243
Inscrit(e) le : 23/07/2012

http://residence-hinata.forumactif.org/
Fleurine a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Widget Slide

Message par Fleurine le Sam 2 Nov 2013 - 15:52

Bonjour, ma demande est toujours d'actualité. Ce serait vraiment génial d'avoir une réponse, je commence a désespérer . Merci.

Fleurine
****

Féminin
Messages : 243
Inscrit(e) le : 23/07/2012

http://residence-hinata.forumactif.org/
Fleurine a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Widget Slide

Message par Adam_sfp le Sam 2 Nov 2013 - 16:19

Bonjour

Vous avez ici un tutorial pour un slide
http://www.creativejuiz.fr/blog/tutoriels/infinite-slideshow-quelques-lignes-jquery

Cdt.

Adam_sfp
+ Hyperactif +

Masculin
Messages : 4157
Inscrit(e) le : 18/04/2008

http://antonyadam.1fr1.net/portal.htm
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Widget Slide

Message par Fleurine le Sam 2 Nov 2013 - 23:30

Bonjour, j'ai suivi le tutoriel à la lettre, mais cela ne fonctionne pas. C'est comme si la transition était bloquée :S
voici mes codes :

HTML


CSS


Java script (mis sur toutes les pages)
Je ne comprend pas pourquoi, désolée :S


Dernière édition par Fleurine le Dim 3 Nov 2013 - 15:33, édité 1 fois

Fleurine
****

Féminin
Messages : 243
Inscrit(e) le : 23/07/2012

http://residence-hinata.forumactif.org/
Fleurine a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Widget Slide

Message par Adam_sfp le Dim 3 Nov 2013 - 6:52

Bonjour

Il y a plusieurs erreurs pour la partie javascript.

Vous n'avez pas besoin de mettre ceci
Code:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
c'est la librairie javascript elle est déjà sur votre forum par défaut...


Dans les codes javascript il ne faut pas mettre les balises scripts
Code:
<script type="text/javascript"> votre code </script>
mais juste votre code.

*il faut les mettre si vous mettez votre code dans une page html ,en page d'accueil etc...

Il faut aussi changer la valeur
Code:
{marginLeft:-350}
dans le code javascript en mettant la largeur de votre image comme vous l'avez mis dans le CSS donc -180.

*si vous voulez changez la vitesse de défilement il faut changer la valeur 3500

En faisant ces changements cela devrait fonctionner.

Cdt.

Adam_sfp
+ Hyperactif +

Masculin
Messages : 4157
Inscrit(e) le : 18/04/2008

http://antonyadam.1fr1.net/portal.htm
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Widget Slide

Message par Fleurine le Dim 3 Nov 2013 - 15:31

Bonjour et merci de vous être pris le temps de me répondre aussi tôt.

J'ai effectué les changement que vous avez proposé, mais mon problème reste toujours présent. En plus, l'un de mes membres m'a signalé la disparition de ma chatbox depuis que j'ai inséré ce code sur toutes les pages du forums. Pourquoi est ce que cela arrive ? Lors que j'enlève mon code elle réapparait.

Code java-script du widget  (sur toutes les pages)


CSS de slide

HTML


J'espère que vous aurez une réponse à ma question ^^, je vous remercie de votre aide.


Dernière édition par Fleurine le Dim 3 Nov 2013 - 19:06, édité 1 fois

Fleurine
****

Féminin
Messages : 243
Inscrit(e) le : 23/07/2012

http://residence-hinata.forumactif.org/
Fleurine a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Widget Slide

Message par Adam_sfp le Dim 3 Nov 2013 - 15:43

Bonjour

Comme dit plus haut il ne faut pas mettre
Code:
<script type="text/javascript">  
et
Code:
   </script>
dans gestion des codes javascript cela entraine une erreur et empêche les autres codes de fonctionner..

mettez juste
Code:
$(function(){  
          setInterval(function(){  
             $(".slideshow ul").animate({marginLeft:-180},800,function(){  
                $(this).css({marginLeft:0}).find("li:last").after($(this).find("li:first"));  
             })  
          }, 3500);  
       });  
Cdt.

Adam_sfp
+ Hyperactif +

Masculin
Messages : 4157
Inscrit(e) le : 18/04/2008

http://antonyadam.1fr1.net/portal.htm
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Widget Slide

Message par Fleurine le Dim 3 Nov 2013 - 19:51

merci beaucoup pour ton aide ! C'est génial !
Pourrais tu me dire comment je peux mettre on code de widget sur mon forum. Dois je créer une page HTML ? Je ne m'y connais pas du tout en javascript. Voici le code complet de mon widget sous hide:



Tu dois poster un message pour le voir. Merci ^^


Dernière édition par Fleurine le Lun 4 Nov 2013 - 16:44, édité 1 fois

Fleurine
****

Féminin
Messages : 243
Inscrit(e) le : 23/07/2012

http://residence-hinata.forumactif.org/
Fleurine a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Widget Slide

Message par Adam_sfp le Lun 4 Nov 2013 - 16:20

Bonjour

Dans votre code vous mélangez HTML et BBcode.
par exemple ceci
Code:
[url=http://pension-hinata.forumactif.org/t107-haiko-asano]HAIKO ASANO[/url]
il vaut mieux tout mettre en html.



Cdt.

Adam_sfp
+ Hyperactif +

Masculin
Messages : 4157
Inscrit(e) le : 18/04/2008

http://antonyadam.1fr1.net/portal.htm
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Widget Slide

Message par Fleurine le Lun 4 Nov 2013 - 16:45

Ce code faudra il le mettre en javascript pour l'afficher sur le forum ?

Le voici sans le BB code. Merci, s'était une erreur d’inattention ^^

CODE HTML SOUS HIDE

Fleurine
****

Féminin
Messages : 243
Inscrit(e) le : 23/07/2012

http://residence-hinata.forumactif.org/
Fleurine a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Widget Slide

Message par Adam_sfp le Lun 4 Nov 2013 - 17:27

Bonjour

Logiquement vous mettez ce code HTML dans votre widget.
puis dans gestion des codes javascript le script
Code:
        $(function(){ 
                  setInterval(function(){ 
                    $(".slideshow ul").animate({marginLeft:-180},800,function(){ 
                        $(this).css({marginLeft:0}).find("li:last").after($(this).find("li:first")); 
                    }) 
                  }, 3500); 
              }); 
et le CSS du slide dans le CSS de votre forum.

Cdt.

Adam_sfp
+ Hyperactif +

Masculin
Messages : 4157
Inscrit(e) le : 18/04/2008

http://antonyadam.1fr1.net/portal.htm
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Widget Slide

Message par Fleurine le Lun 4 Nov 2013 - 17:29

Ce code est mon widget ^^ ou alors je m'exprime mal. Je copie/colle mon code dans une page HTML ? Je ne comprends vraiment pas désolée ^^'

Fleurine
****

Féminin
Messages : 243
Inscrit(e) le : 23/07/2012

http://residence-hinata.forumactif.org/
Fleurine a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Widget Slide

Message par Adam_sfp le Lun 4 Nov 2013 - 17:38


bonjour

En créant un widget personnel dans modules et en mettant votre code dedans.
cdt.

Adam_sfp
+ Hyperactif +

Masculin
Messages : 4157
Inscrit(e) le : 18/04/2008

http://antonyadam.1fr1.net/portal.htm
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Widget Slide

Message par Fleurine le Lun 4 Nov 2013 - 17:44

Je dois utiliser le lien url de mon code HTML ? Je le met ou ?
http://pension-hinata.forumactif.org/h5-widget

Comment je met mon widget html en lien avec le javascript ?

Fleurine
****

Féminin
Messages : 243
Inscrit(e) le : 23/07/2012

http://residence-hinata.forumactif.org/
Fleurine a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Widget Slide

Message par Adam_sfp le Lun 4 Nov 2013 - 17:58

Non non Fleurine Wink 

Je ne comprend pas bien ou vous voulez mettre ce bandeau vertical ( on va l'appeler comme ça pour éviter de confondre )
je pensai à un widget personnel du forum
http://forum.forumactif.com/t233284-installation-modification-de-widgets

et à ce moment la mettre le code html dedans...



Adam_sfp
+ Hyperactif +

Masculin
Messages : 4157
Inscrit(e) le : 18/04/2008

http://antonyadam.1fr1.net/portal.htm
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Widget Slide

Message par Fleurine le Lun 4 Nov 2013 - 19:31

Coucou,

Je suis obligée d'utiliser cette méthode ? Normalement je fais cela par CSS. Quelqu'un m'avait aidé à créer un "panneau non coulissant". Désolée si je m'exprime mal... ^^' Serait il possible de le faire sans passer par les widget? Sur un autre sujet où tout mes codes sont sous hide, une personne m'avait aidé pour cela.


Voici l'ancien code de ma météo sans l'effet panneau coulissant, pourriez vous m'aider à avoir le même effet avec ce code ? Merci beaucoup pour votre patience.
Code:

        [hide]jQuery(document).ready(function () {
            jQuery('body').append("<table class='meteopanel'><tr><td>
        <center><span class='titremeteo'>PRÉVISIONS MÉTÉO</span>
        
       <br /><br />9 au 22 septembre
        <br /><br /><img src='http://i75.servimg.com/u/f75/17/56/10/87/soleil12.gif' /></center>
        <br /><br /> 15° le matin, 25° le midi et 23° le soir.
        <br /><br /> C'est bientôt le début de l'automne!</center></table>");
        });[/hide]
J'ai essayé le lien que vous m'avez proposés... Mais comme je le craignais le résultat ne correspond pas du tout à mes attentes. Désolée... Voici une capture d'écran :



Dernière édition par Fleurine le Lun 4 Nov 2013 - 21:13, édité 1 fois

Fleurine
****

Féminin
Messages : 243
Inscrit(e) le : 23/07/2012

http://residence-hinata.forumactif.org/
Fleurine a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Widget Slide

Message par Adam_sfp le Lun 4 Nov 2013 - 20:11

Bonsoir

Le soucis je ne vois pas trop ou vous voulez mettre ce bandeau
et que cela reste esthétique..
Pensez aussi au petit écran....



Adam_sfp
+ Hyperactif +

Masculin
Messages : 4157
Inscrit(e) le : 18/04/2008

http://antonyadam.1fr1.net/portal.htm
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Widget Slide

Message par Fleurine le Lun 4 Nov 2013 - 20:34

Voici un forum qui a positionné un code du même type sur sa gauche. Voici le lien (je vous l'avais mis dans le deuxième message de notre conversation ^^). Je le voudrais à droite et enlever tout les panneaux coulissants de mon forum. Il y en a trop. Merci.

Actuellement le widget est dans mon overall header et eu dessus du logo du forum...Voici mon adresse :http://pension-hinata.forumactif.org/?tt=1

Fleurine
****

Féminin
Messages : 243
Inscrit(e) le : 23/07/2012

http://residence-hinata.forumactif.org/
Fleurine a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Widget Slide

Message par Adam_sfp le Lun 4 Nov 2013 - 21:02

Bonsoir

il faut à ce moment la positionner votre div via le CSS
renommer votre class widget_flottant 2 en widget_flottant_2  

puis dans votre css mettez
Code:
.widget_flottant_2 {
    height: 10px;
    position: fixed;
    right: 10px;
    top: 10px;
    width: 10px;
}
j'ai mis 10px pour exemple il faut mettre vos valeurs.

right et top permettent de positionner en fonction du bord droit et du haut de page
-vous pouvez mettre des valeurs négatives..

Quand à votre code HTML vous pouvez le mettre en page d'accueil

Adam_sfp
+ Hyperactif +

Masculin
Messages : 4157
Inscrit(e) le : 18/04/2008

http://antonyadam.1fr1.net/portal.htm
Adam_sfp a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Widget Slide

Message par Fleurine le Lun 4 Nov 2013 - 21:13

Yes ! Merci vous êtes trop trop trop FORT!! Vous savez que je vous adore vous !! Merci beaucoup !! Je me sens tellement mieux maintenant ! Sa fait des semaines que je bataille !
MERCI ! résolu 

Fleurine
****

Féminin
Messages : 243
Inscrit(e) le : 23/07/2012

http://residence-hinata.forumactif.org/
Fleurine a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum