Page d'Accueil avec une slide

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

Résolu Page d'Accueil avec une slide

Message par Cheeralex Lun 25 Fév 2019 - 19:41

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Capture d'écran du problème :
Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : A son origine
Lien du forum : (lien masqué, vous devez poster pour le voir) (le forum est créé, mais nous n'avons encore rien commencé dessus. C'est d'ailleurs pour ça qu'il est en hide)

Description du problème

Bonjour à tous,

Afin de créer mon nouveau projet, je rencontre un petit problème pour un codage que j'aimerai beaucoup réaliser. Malheureusement, je trouve beaucoup de tutos soit en Anglais, soit pas totalement comme je le voudrais. Et je n'ai pas les connaissances suffisantes en javascript ou en jquery pour faire ce que je veux.
De ce fait, je viens trouver une âme charitable qui pourra m'aider pour le code.

Il s'agira donc d'une PA avec une image de fond, sur lequel j'aimerai mettre une slide dans un cadre qui contiendra de nombreuses informations sur le forum. Les flèches cliquables permettant d'aller à droite ou à gauche pour toutes les infos.
Je glisse ci-dessous dans le spoiler un forum qui possède ce type de codage, qui devient de plus en plus célèbre.
le forum exemple:

(je précise que je ne veux pas l'effet du survol, mais uniquement une slide à mettre sur une image de fond.)

Un énorme merci par avance à celles et ceux qui m'aideront ♥️
Bonne soirée et à bientôt !
Cheeralex

Cheeralex
***

Féminin
Messages : 141
Inscrit(e) le : 29/02/2012

http://dol-baran-rpg.forumactif.com/
Cheeralex a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'Accueil avec une slide

Message par Cheeralex Jeu 28 Fév 2019 - 8:02

Hi !
Je lance un petit up I love you
Cheeralex

Cheeralex
***

Féminin
Messages : 141
Inscrit(e) le : 29/02/2012

http://dol-baran-rpg.forumactif.com/
Cheeralex a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'Accueil avec une slide

Message par Cheeralex Ven 1 Mar 2019 - 19:08

Hello !
Je relance le sujet Smile Je cherche de mon côté si j'en trouve des faciles à réaliser, si jamais vous avez des pistes aussi, je suis prête à faire aussi et à me faire corriger quoi ♥️
Cheeralex

Cheeralex
***

Féminin
Messages : 141
Inscrit(e) le : 29/02/2012

http://dol-baran-rpg.forumactif.com/
Cheeralex a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'Accueil avec une slide

Message par Cheeralex Sam 2 Mar 2019 - 20:16

Hello !
Je relance, toujours besoin d'aide ! I love you

edit: j'ai essayé d'avancer de mon côté.
J'ai réussi à réaliser un tuto et j'ai donc un bon début de code. Maintenant, la mise en place reste chaotique car je suis partie (selon le tuto) d'une page HTML et là, quand j'essaye d'installer sur la page d'accueil, le javascript d'un côté et le css de l'autre, tout cafouille aidez moi
Donc si quelqu'un peut m'aider à passer de la page HTML pour la page d'accueil.
Et aussi, si possible, à faire un effet de transition pour le passage de chaque bloc dans la slide. Genre un effet de glissement ou limite parallax ::moitimide::
Voilà, je mets mon code en attendant ♥️

le code:
Cheeralex

Cheeralex
***

Féminin
Messages : 141
Inscrit(e) le : 29/02/2012

http://dol-baran-rpg.forumactif.com/
Cheeralex a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'Accueil avec une slide

Message par Cheeralex Dim 3 Mar 2019 - 21:54

Je reviens avec un UP Very Happy
Alors, j'ai bien avancé toute seule comme une grande hihi. J'ai réussi à faire ma slide, à l'installer dans ma page d'accueil. Mais du coup, j'ai dû mettre le javascript au même endroit. Est-ce qu'il y a une méthode pour le mettre dans les scripts et pas directement avec le code HTML ?
Ensuite, j'aimerai qu'on m'aide pour modifier la transition un peu barbare et faire plus glissement...
Et j'aimerai savoir s'il est possible d'intégrer des onglets dans une slide ou ça va faire conflit ?
Merci encore !
Je poste les codes Very Happy

le codage:
Cheeralex

Cheeralex
***

Féminin
Messages : 141
Inscrit(e) le : 29/02/2012

http://dol-baran-rpg.forumactif.com/
Cheeralex a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'Accueil avec une slide

Message par Cheeralex Lun 4 Mar 2019 - 20:27

Et un nouveau up Smile
Cheeralex

Cheeralex
***

Féminin
Messages : 141
Inscrit(e) le : 29/02/2012

http://dol-baran-rpg.forumactif.com/
Cheeralex a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'Accueil avec une slide

Message par Cheeralex Jeu 7 Mar 2019 - 19:09

Up I love you
Toujours d'actu I love you
Cheeralex

Cheeralex
***

Féminin
Messages : 141
Inscrit(e) le : 29/02/2012

http://dol-baran-rpg.forumactif.com/
Cheeralex a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'Accueil avec une slide

Message par Cheeralex Sam 9 Mar 2019 - 22:23

Hi ! Toujours d'actu, donc nouveau up I love you
Cheeralex

Cheeralex
***

Féminin
Messages : 141
Inscrit(e) le : 29/02/2012

http://dol-baran-rpg.forumactif.com/
Cheeralex a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'Accueil avec une slide

Message par Invité Dim 10 Mar 2019 - 9:22

Hello Cheeralex,

ton script va te donner des complications par la suite.
Je me suis basé sur ce Slide:
https://codepen.io/doodlemarks/pen/aFcly
Et j'ai essayé de l'adapter avec ton image de fond, les flèches seront positionnées en haut car sur le coté cela pose pas mal de soucis.

La c.s.s:
Code:
#slider {
 
  position: relative;
  overflow: hidden;
  margin: 20px auto 0 auto;
  border-radius: 4px;
}

#slider ul {
  position: relative;
  top: 130px;
  margin: 0;
  padding: 0;
  height: 200px;
  list-style: none;
}

#slider ul li {
  position: relative;
  display: block;
  float: left;
text-align:left;
  width:280px;
  height:550px;
overflow-y: auto;
}
#slider ul li div
{
color:white;
 
}



a.control_prev, a.control_next {
  position: absolute;
  top:17%;
  z-index: 999;
  display: block;
  padding: 4% 3%;
  width: 16px;
  height: 24px;
  cursor: pointer;
}


a.control_prev {margin-left:-10px;}
a.control_next {right: 0;margin-right:-10px;}

Le code html dans la page d'accueil:
Code:
 
<div style="background-image: url('https://images2.imgbox.com/1a/86/jPjuDt67_o.png'); background-repeat: no-repeat; width:800px; height:600px;">
              
   <div id="slider">
                <a class="control_next"><img alt="droite" src="https://images2.imgbox.com/5b/0b/UGrtfx4N_o.png" /></a>  <a class="control_prev"><img alt="gauche" src="https://images2.imgbox.com/eb/eb/2qTaeULs_o.png" /></a>         
      <ul>
                            
         <li>
                   
            <div>
                       La nouvelle se répandit rapidement dans les contrées, les Dieux étaient parmi eux et Valkar se retrouva au centre de toutes les attentions. Adulé, prié plus que les autres, il gagna le cœur des peuples qui foulaient la terre de Dol Baran et se vit proposer de devenir le souverain de tous. L’idée n’était pas déplaisante aux yeux du Dieu de la mort. Le pouvoir sur les créations de son frère Ardar serait établi et personne ne pourrait plus le contester. Il n’en fallut pas plus pour qu’il accepte, devenant officiellement le Grand Roi de Dol Baran. Sa première action fut de diviser le monde en contrées. Bien qu’il fût un Dieu et qu’il lui aurait été aisé de gouverner un monde aussi vaste, il préféra donner le pouvoir à certaines grandes familles qu’il jugeait dignes de lui, espérant secrètement et pour lui-même qu’elles en fassent « mauvais usage ». Il s’installa sur les terres de Shora, une contrée au nord-ouest du monde, et fit construire une forteresse faite avec des pierres sombres des volcans, solide et robuste, à l’épreuve du climat rude qui régnait sur cette région. Au début de son règne Valkar ne se montra pas avide de pouvoir, cachant ses desseins à son frère, Khadgar, resté près de lui pour le soutenir. Le Roi respectait les lois de son père ; ne pas intervenir. Et il se félicitait de ne pas l'avoir fait, après tout il avait juste accepté l'offre par ceux qui vivaient sur l’Éden qu’il avait conçu avec les paires, rien de plus.       
            </div>
                         
         </li>
                            
         <li>
                   
            <div>
                SLIDE 4 La nouvelle se répandit rapidement dans les contrées, les Dieux étaient parmi eux et Valkar se retrouva au centre de toutes les attentions. Adulé, prié plus que les autres, il gagna le cœur des peuples qui foulaient la terre de Dol Baran et se vit proposer de devenir le souverain de tous. L’idée n’était pas déplaisante aux yeux du Dieu de la mort. Le pouvoir sur les créations de son frère Ardar serait établi et personne ne pourrait plus le contester. Il n’en fallut pas plus pour qu’il accepte, devenant officiellement le Grand Roi de Dol Baran. Sa première action fut de diviser le monde en contrées. Bien qu’il fût un Dieu et qu’il lui aurait été aisé de gouverner un monde aussi vaste, il préféra donner le pouvoir à certaines grandes familles qu’il jugeait dignes de lui, espérant secrètement et pour lui-même qu’elles en fassent « mauvais usage ». Il s’installa sur les terres de Shora, une contrée au nord-ouest du monde, et fit construire une forteresse faite avec des pierres sombres des volcans, solide et robuste, à l’épreuve du climat rude qui régnait sur cette région. Au début de son règne Valkar ne se montra pas avide de pouvoir, cachant ses desseins à son frère, Khadgar, resté près de lui pour le soutenir. Le Roi respectait les lois de son père ; ne pas intervenir. Et il se félicitait de ne pas l'avoir fait, après tout il avait juste accepté l'offre par ceux qui vivaient sur l’Éden qu’il avait conçu avec les paires, rien de plus. SLIDE 4 La nouvelle se répandit rapidement dans les contrées, les Dieux étaient parmi eux et Valkar se retrouva au centre de toutes les attentions. Adulé, prié plus que les autres, il gagna le cœur des peuples qui foulaient la terre de Dol Baran et se vit proposer de devenir le souverain de tous. L’idée n’était pas déplaisante aux yeux du Dieu de la mort. Le pouvoir sur les créations de son frère Ardar serait établi et personne ne pourrait plus le contester. Il n’en fallut pas plus pour qu’il accepte, devenant officiellement le Grand Roi de Dol Baran. Sa première action fut de diviser le monde en contrées. Bien qu’il fût un Dieu et qu’il lui aurait été aisé de gouverner un monde aussi vaste, il préféra donner le pouvoir à certaines grandes familles qu’il jugeait dignes de lui, espérant secrètement et pour lui-même qu’elles en fassent « mauvais usage ». Il s’installa sur les terres de Shora, une contrée au nord-ouest du monde, et fit construire une forteresse faite avec des pierres sombres des volcans, solide et robuste, à l’épreuve du climat rude qui régnait sur cette région. Au début de son règne Valkar ne se montra pas avide de pouvoir, cachant ses desseins à son frère, Khadgar, resté près de lui pour le soutenir. Le Roi respectait les lois de son père ; ne pas intervenir. Et il se félicitait de ne pas l'avoir fait, après tout il avait juste accepté l'offre par ceux qui vivaient sur l’Éden qu’il avait conçu avec les paires, rien de plus.     
            </div>
                         
         </li>
                            
         <li>
                   
            <div>
                         SLIDE 3       
            </div>
                         
         </li>
                            
         <li>
                   
            <div>
                         SLIDE 4       
            </div>
                         
         </li>
                          
      </ul>
                       
   </div>
</div>


Et enfin le script a placer sur l'index:
Code:
jQuery(document).ready(function ($) {

 
   var slideCount = $('#slider ul li').length;
   var slideWidth = $('#slider ul li').width();
   var slideHeight = $('#slider ul li').height();
   var sliderUlWidth = slideCount * slideWidth;
   
   $('#slider').css({ width: slideWidth, height: slideHeight });
   
   $('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });
   
    $('#slider ul li:last-child').prependTo('#slider ul');

    function moveLeft() {
        $('#slider ul').animate({
            left: + slideWidth
        }, 200, function () {
            $('#slider ul li:last-child').prependTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };

    function moveRight() {
        $('#slider ul').animate({
            left: - slideWidth
        }, 200, function () {
            $('#slider ul li:first-child').appendTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };

    $('a.control_prev').click(function () {
        moveLeft();
    });

    $('a.control_next').click(function () {
        moveRight();
    });

});

Le plugin est fonctionnel et se base sur la hauteur/largeur de la balise "li" donc voilà pourquoi les flèches ne pourront pas être positionnées au centre,tu peux ajouter un margin-left négatif,
ces dernières disparaitront.

Et voilou Wink .

a++




Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Page d'Accueil avec une slide

Message par Cheeralex Dim 10 Mar 2019 - 10:01

Coucou !
Ouah un grand merci pour ton aide et cette slide avec une transition plus sympa que la mienne. C'est trop beau !!! ::pourtoi::
Le seul souci, c'est que les flèches en haut me posent problème. C'est prévu qu'elle soit de chaque côté du cadre pour une question plus esthétique. Il n'y a vraiment aucun moyen de les placer sur le côté comme le tutoriel de base ?

J'ai installé ton code et ça marche nickel, reste juste la possibilité des flèches. Mais déjà, un énoooooooooorme merci I love you
Cheeralex

Cheeralex
***

Féminin
Messages : 141
Inscrit(e) le : 29/02/2012

http://dol-baran-rpg.forumactif.com/
Cheeralex a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'Accueil avec une slide

Message par Invité Dim 10 Mar 2019 - 10:43

Re,
de rien chère amie Wink .
Alors , c'est du bidouillage , mais remplaces le code html par celui-ci:
Code:
 
<div style="background-image: url('https://images2.imgbox.com/1a/86/jPjuDt67_o.png'); background-repeat: no-repeat; width:800px; height:600px;">
                     <a class="control_next"><img src="https://images2.imgbox.com/5b/0b/UGrtfx4N_o.png" alt="droite" /></a>  <a class="control_prev"><img src="https://images2.imgbox.com/eb/eb/2qTaeULs_o.png" alt="gauche" /></a> 
   <div id="slider">
                           
      <ul>
                                  
         <li>
                         
            <div>
                         La nouvelle se répandit rapidement dans les contrées, les Dieux étaient parmi eux et Valkar se retrouva au centre de toutes les attentions. Adulé, prié plus que les autres, il gagna le cœur des peuples qui foulaient la terre de Dol Baran et se vit proposer de devenir le souverain de tous. L’idée n’était pas déplaisante aux yeux du Dieu de la mort. Le pouvoir sur les créations de son frère Ardar serait établi et personne ne pourrait plus le contester. Il n’en fallut pas plus pour qu’il accepte, devenant officiellement le Grand Roi de Dol Baran. Sa première action fut de diviser le monde en contrées. Bien qu’il fût un Dieu et qu’il lui aurait été aisé de gouverner un monde aussi vaste, il préféra donner le pouvoir à certaines grandes familles qu’il jugeait dignes de lui, espérant secrètement et pour lui-même qu’elles en fassent « mauvais usage ». Il s’installa sur les terres de Shora, une contrée au nord-ouest du monde, et fit construire une forteresse faite avec des pierres sombres des volcans, solide et robuste, à l’épreuve du climat rude qui régnait sur cette région. Au début de son règne Valkar ne se montra pas avide de pouvoir, cachant ses desseins à son frère, Khadgar, resté près de lui pour le soutenir. Le Roi respectait les lois de son père ; ne pas intervenir. Et il se félicitait de ne pas l'avoir fait, après tout il avait juste accepté l'offre par ceux qui vivaient sur l’Éden qu’il avait conçu avec les paires, rien de plus.           
            </div>
                               
         </li>
                                  
         <li>
                         
            <div>
                   SLIDE 4 La nouvelle se répandit rapidement dans les contrées, les Dieux étaient parmi eux et Valkar se retrouva au centre de toutes les attentions. Adulé, prié plus que les autres, il gagna le cœur des peuples qui foulaient la terre de Dol Baran et se vit proposer de devenir le souverain de tous. L’idée n’était pas déplaisante aux yeux du Dieu de la mort. Le pouvoir sur les créations de son frère Ardar serait établi et personne ne pourrait plus le contester. Il n’en fallut pas plus pour qu’il accepte, devenant officiellement le Grand Roi de Dol Baran. Sa première action fut de diviser le monde en contrées. Bien qu’il fût un Dieu et qu’il lui aurait été aisé de gouverner un monde aussi vaste, il préféra donner le pouvoir à certaines grandes familles qu’il jugeait dignes de lui, espérant secrètement et pour lui-même qu’elles en fassent « mauvais usage ». Il s’installa sur les terres de Shora, une contrée au nord-ouest du monde, et fit construire une forteresse faite avec des pierres sombres des volcans, solide et robuste, à l’épreuve du climat rude qui régnait sur cette région. Au début de son règne Valkar ne se montra pas avide de pouvoir, cachant ses desseins à son frère, Khadgar, resté près de lui pour le soutenir. Le Roi respectait les lois de son père ; ne pas intervenir. Et il se félicitait de ne pas l'avoir fait, après tout il avait juste accepté l'offre par ceux qui vivaient sur l’Éden qu’il avait conçu avec les paires, rien de plus. SLIDE 4 La nouvelle se répandit rapidement dans les contrées, les Dieux étaient parmi eux et Valkar se retrouva au centre de toutes les attentions. Adulé, prié plus que les autres, il gagna le cœur des peuples qui foulaient la terre de Dol Baran et se vit proposer de devenir le souverain de tous. L’idée n’était pas déplaisante aux yeux du Dieu de la mort. Le pouvoir sur les créations de son frère Ardar serait établi et personne ne pourrait plus le contester. Il n’en fallut pas plus pour qu’il accepte, devenant officiellement le Grand Roi de Dol Baran. Sa première action fut de diviser le monde en contrées. Bien qu’il fût un Dieu et qu’il lui aurait été aisé de gouverner un monde aussi vaste, il préféra donner le pouvoir à certaines grandes familles qu’il jugeait dignes de lui, espérant secrètement et pour lui-même qu’elles en fassent « mauvais usage ». Il s’installa sur les terres de Shora, une contrée au nord-ouest du monde, et fit construire une forteresse faite avec des pierres sombres des volcans, solide et robuste, à l’épreuve du climat rude qui régnait sur cette région. Au début de son règne Valkar ne se montra pas avide de pouvoir, cachant ses desseins à son frère, Khadgar, resté près de lui pour le soutenir. Le Roi respectait les lois de son père ; ne pas intervenir. Et il se félicitait de ne pas l'avoir fait, après tout il avait juste accepté l'offre par ceux qui vivaient sur l’Éden qu’il avait conçu avec les paires, rien de plus.       
            </div>
                               
         </li>
                                  
         <li>
                         
            <div>
                             SLIDE 3         
            </div>
                               
         </li>
                                  
         <li>
                         
            <div>
                             SLIDE 4         
            </div>
                               
         </li>
                                
      </ul>
                             
   </div>
</div>


Puis dans la feuille de style, repère ceci:
Code:
a.control_prev, a.control_next {
  position: absolute;
  top:17%;
  z-index: 999;
  display: block;
  padding: 4% 3%;
  width: 16px;
  height: 24px;
  cursor: pointer;
}
 
 
a.control_prev {margin-left:-10px;}
a.control_next {right: 0;margin-right:-10px;}


Supprimes et remplaces par:

Code:
a.control_prev, a.control_next {
  position: absolute;
  margin-top:200px;
  z-index: 999;
  display: block;
  padding: 4% 3%;
  width: 16px;
  height: 24px;
  cursor: pointer;
}


a.control_prev {margin-left:185px;}
a.control_next {margin-left:500px;}

Il y aura surement des ajustements a effectuer mais c'est fonctionnel Wink .

a++
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Page d'Accueil avec une slide

Message par Cheeralex Dim 10 Mar 2019 - 17:35

C'est super, merci beaucoup I love you
Ca rend super bien et la transition est bien mieux que celle que j'avais !
Je clôture le sujet, c'est génial ! ENCORE UN IMMENSE MERCIIIIIIIIIIIIIIIIII Bizz

::fete::
Cheeralex

Cheeralex
***

Féminin
Messages : 141
Inscrit(e) le : 29/02/2012

http://dol-baran-rpg.forumactif.com/
Cheeralex a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'Accueil avec une slide

Message par Invité Dim 10 Mar 2019 - 17:49

Re,
de rien chère amie Wink
a++
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

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

- Sujets similaires

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