Sujets similaires

Sujet: [RESOLU] Soucis de slideshow Mer 29 Jan 2014, 16:14

Bonsoir !

Je cherche depuis un moment un tuto qui pourrait me permettre de créer un slider précis, mais je ne trouve pas ce qu'il me faut. Je me tourne donc vers vous, peut être vous savez où je trouverais un tuto, ou bien peut être même m'aider à le créer de toutes pièces, en sachant cependant que je connais très peu JS.

Je recherche un slider :
- Autonome et qu'on ne puisse pas gérer (donc pas de folio, ou de flèches)
- Chaque slide dure 4 secondes
- Une petite boite blanche d'opacité d'environ 60%, apparaît sur la photo de chaque slide avec à l'intérieur un texte justifié, et un lien "Cliquez ici pour en savoir plus". Je voudrais pouvoir gérer la position de ces boites en fonction de chaque slide.
- J'aimerai que chaque photo incorporée dans ce slide soit redimentionnée sur la largeur, et garde donc sa proportion sur la hauteur.
- Le slide prendrait toute la largeur de la page, et ferait 400px de hauteur.

Pour l'instant, j'ai essayé de travailler sur le script suivant :

Spoiler:

Le seul soucis que je rencontre avant de pouvoir poursuivre : le slide se fait dans le fond de page, et je ne parviens pas à gérer la hauteur des photos… Elles prennent tout l'espace de la page.

Merci d'avance à ceux qui m'aideront !

Sujet: Re: [RESOLU] Soucis de slideshow Mer 29 Jan 2014, 17:07

Tu utilises le plug in Vegas Background, non ? Il est fait pour changer le background, donc effectivement il n'est pas adapté.

Voici le lien d'un slider que j'ai utilisé plusieurs fois l'année dernière dans des projets, et il pourrait correspondre à ta demande : http://responsiveslides.com/

Je t'invite à lire la page (c'est en anglais, mais bon je suppose qu'avec Google Translate cela devrait aller au pire)... Si vraiment tu n'arrives pas à comprendre, dis moi, je t'aiderai plus en détail.

Ce slider peut répondre à toutes tes demandes, il faudra juste personnaliser un peu certains détails.
Je te conseille d'abord de réussir à l'installer, puis une fois que ça sera bon d'essayer de le personnaliser, et bien entendu je suis là si tu as des questions Wink

Sujet: Re: [RESOLU] Soucis de slideshow Jeu 30 Jan 2014, 14:28

Yeah trop top ! Ca marche du tonnerre de dieu !
Le seul hic :

Code:: .rslides img {
display: block;
height: 400px;
float: left;
width: 100%;
border: 0;
}

Dans cette class là, la valeur du "Height" était en auto, et je l'ai passé en 400px, puisque c'est ce que je veux. C'est nickel ça fonctionne bien, mais du coup, ça écrase mon image. Y'a pas moyen de faire quelque chose du genre… à la limite, masquer une partie de l'image pour que ce qui apparait face 400px de hauteur, sans pour autant que ça déforme l'image ?

Sujet: Re: [RESOLU] Soucis de slideshow Jeu 30 Jan 2014, 15:03

Hum, enlève le height dans ce sélecteur là, et essaye en le mettant plutôt à cet endroit là :

Code:: .rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}

Sujet: Re: [RESOLU] Soucis de slideshow Jeu 30 Jan 2014, 15:54

Nickel c'est bien cela ! Very Happy

Bon, le slider est bien positionné, maintenant il faut se pencher sur les boites semi transparentes. Au niveau des effets, j'aimerai qu'elles apparaissent un peu comme les éléments apparaissent sur le slider de ce site :
http://antonibotev.com/themes/nova/

Droite vers la gauche, ou gauche vers la droite…
Au niveau du CSS, ça donnerait ça :

Code:: .boites {
background-color: #FFF;
opacity: 0.5;
height: 260px;
width: 240px;
border-radius: 10px 10px 10px 10px;
}

Les deux questions maintenant :
- Où placer chacune des boites dans le code html du slider ?
- Comment animer leur arrivée ?

Sujet: Re: [RESOLU] Soucis de slideshow Jeu 30 Jan 2014, 17:02

Je pense qu'il faut ajouter le texte dans le li, comme ceci :

Code:: <ul class="rslides">
  <li><img src="1.jpg" alt=""><div class="boites">MON CONTENU</div></li>
  <li><img src="2.jpg" alt=""><div class="boites">MON CONTENU</div></li>
  <li><img src="3.jpg" alt=""><div class="boites">MON CONTENU</div></li>
</ul>

Une fois que c'est fait tu pourras les positionner grâce au positionnement absolu. Il est possible qu'elle n'apparaisse pas tout de suite, rajoute ceci pour tes boites :
[code]position: absolute;
left : 25px;
top: 35px;[code] Pour l'animation je suis pas totalement sûre de comment faire, pourrais tu m'envoyer un lien où on peut voir ton slider en action s'il te plait ?

Sujet: Re: [RESOLU] Soucis de slideshow Ven 31 Jan 2014, 02:49

D'accord je teste ça ce soir.
Pour le slider :

Sujet: Re: [RESOLU] Soucis de slideshow Ven 31 Jan 2014, 08:07

Pour l'animation, j'ai testé quelque chose, à rajouter dans le CSS

Code:: .boites {
position: absolute;
left: -200px; /* on cache à gauche en état normal*/
/* on rajoute une transition d'1s */
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}

.rslides1_on .boites {
left: 25px; /* quand la slide est sélectionnée, on le replace */;
}

Sujet: Re: [RESOLU] Soucis de slideshow Ven 31 Jan 2014, 14:57

Yeah ça marche du tonnerre ! Very Happy

Alors. En réfléchissant bien, j'aimerai qu'en bas des slides, en centré, y'a trois points côte à côte, de sorte à pouvoir revenir sur un slide en particulier ci besoin. Pour un slide sélectionné ça serait en noir opaque, et pour ceux qui ne sont pas sélectionnés, ça serait du blanc opaque. Les valeurs d'opacité seraient de 0.5 je pense.
Donc je m'y prends comment ?
C'est avec

Code:: pager: true

si je ne m'abuse non ?

Sujet: Re: [RESOLU] Soucis de slideshow Ven 31 Jan 2014, 15:39

Oui je pense ^^

J'ai tenté ça :

Code:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Le luxe pour ce félin du quotidien | KITTYPAWS.FR | Mon chat & moi</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="responsiveslides.min.js"></script>
<style type="text/css">
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
height: 400px;
border-bottom: double 8px #CCC;
}

.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}

.rslides li:first-child {
position: relative;
display: block;
float: left;
}

.rslides img {
display: block;
float: left;
width: 100%;
border: 0;
}

.boites {
background-color: #FFF;
opacity: 0.5;
height: 260px;
width: 240px;
border-radius: 10px 10px 10px 10px;
}

.boites {
position: absolute;
padding: 5px;
left: -200px; /* on cache à gauche en état normal*/
/* on rajoute une transition d'1s */
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}

.rslides1_on .boites {
left: 25px; /* quand la slide est sélectionnée, on le replace */;
top: 40px;
}
</style>
</head>

<body bgcolor="#e9e7e6">
<?php include_once("analyticstracking.php") ?>
<div id="wrap">
<?php include_once("header.php") ?>

<div id="main" class="clearfix">
<ul class="rslides">
<li><img src="img/slide01.jpg" style="margin-top: -180px;" alt=""><div class="boites">MON CONTENU01</div></li>
<li><img src="img/slide02.jpg" style="margin-top: -130px;" alt=""><div class="boites">MON CONTENU02</div></li>
<li><img src="img/slide03.jpg" style="margin-top: -150px;" alt=""><div class="boites">MON CONTENU03</div></li>
</ul>
Accueil !
</div>
</div>
<?php include_once("footer.php") ?>

<script>
$(function() {
$(".rslides").responsiveSlides({
pager: true, // Boolean: Show pager, true or false
nav: true, // Boolean: Show navigation, true or false
});
</script>
</body>
</html>

Mais il m'indique une erreur à la ligne de " }); ", et le slider s'arrête. :/

J'ai tenté ça :

Code:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Le luxe pour ce félin du quotidien | KITTYPAWS.FR | Mon chat & moi</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="responsiveslides.min.js"></script>
<style type="text/css">
.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  height: 400px;
  border-bottom: double 8px #CCC;
  }

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
  display: block;
  float: left;
  width: 100%;
  border: 0;
  }

.boites {
background-color: #FFF;
opacity: 0.5;
height: 260px;
width: 240px;
border-radius: 10px 10px 10px 10px;
}

.boites {
  position: absolute;
  padding: 5px;
  left: -200px; /* on cache à gauche en état normal*/
/* on rajoute une transition d'1s */
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}

.rslides1_on .boites {
  left: 25px; /* quand la slide est sélectionnée, on le replace */;
  top: 40px;
}
</style>
</head>

<body bgcolor="#e9e7e6">
<?php include_once("analyticstracking.php") ?>
<div id="wrap">
   <?php include_once("header.php") ?>

  <div id="main" class="clearfix">
   <ul class="rslides">
  <li><img src="img/slide01.jpg" style="margin-top: -180px;" alt=""><div class="boites">MON CONTENU01</div></li>
  <li><img src="img/slide02.jpg" style="margin-top: -130px;" alt=""><div class="boites">MON CONTENU02</div></li>
  <li><img src="img/slide03.jpg" style="margin-top: -150px;" alt=""><div class="boites">MON CONTENU03</div></li>
</ul>
Accueil !
  </div>
</div>
<?php include_once("footer.php") ?>

<script>
  $(function() {
   $(".rslides").responsiveSlides({
  pager: true, // Boolean: Show pager, true or false
  nav: true, // Boolean: Show navigation, true or false
});
</script>
</body>
</html>

Mais il m'indique une erreur à la ligne de

Code:: });

et le slider s'arrête. :/

J'ai tenté ça :

Code:: <script>
  $(function() {
   $(".rslides").responsiveSlides({
  pager: true,
  nav: true,
});
</script>

Mais il m'indique une erreur à la ligne de

Code:: });

et le slider s'arrête. :/

En fait, l'erreur est à la ligne juste avant ^^
Enlève la virgule après le nav: true, et cela sera bon Wink

En Javascript, pour un objet (ici c'est ce ce qui est entre { } avec dedans des trucs du genre nom : valeur), il ne faut jamais mettre de virgule tout à la fin ^^. Des virgules entre chaque, mais pas à la fin ^^
C'est effectivement une erreur très courante Very Happy

Ca ne change rien, malheureusement. Sad

Il m'indique toujours une erreur, et le slide est toujours en arrêt.

Code:: <script>
  $(function() {
   $(".rslides").responsiveSlides({
  pager: true,
  nav: true,
});
</script>

Je ne vois pas la différence avec l'ancien code, il faut enlever la virgule à la fin normalement.

Comme ceci :

Code:: <script>
$(function() {
$(".rslides").responsiveSlides({
pager: true,
nav: true
});
</script>

Si cela ne fonctionne pas, peux tu m'envoyer un lien d'une page où je peux voir le slider, avec le code que je viens de mettre en place ?

Oui excuse moi, je t'ai pas collé le bon code. x)

Voici le lien où tu peux voir le bug :

Essaye en remplaçant par ce code là :

Code:: <script>
$(function() {
   $(".rslides").responsiveSlides({
      pager: true,
      nav: true
   });
});
</script>

Je viens de voir que dans l'ancien code, toutes les accolades n'étaient pas fermées ^^

Ah ! Nickel ça fonctionne maintenant. :3 Par contre la navigation est archi moche ! xD Donc je fais comment pour personnaliser du JS ? J'ai encore jamais fait ! Ca se passe avec du CSS, aussi ?

Il faut les styliser en CSS ^^

Voici le HTML que le JS va générer :

Code:: <ul class="rslides_tabs rslides1_tabs">
<li class="rslides1_s1 rslides_here">
   <a class="rslides1_s1" href="#">1</a>
</li>
<li class="rslides1_s2">
   <a class="rslides1_s2" href="#">2</a>
</li>
<li class="rslides1_s3">
   <a class="rslides1_s3" href="#">3</a>
</li>
</ul>

Ici tu peux voir le premier élément de la liste a la class "rslides_here" qui correspond à l'état actif (la slide sur laquelle on est actuellement)

Voici un exemple de CSS tout simple pour que cela soit déjà un peu mieux, après à toi de faire des essais.

Code:: .rslides_tabs > li {
display: inline-block;
list-style: none;
margin: 15px;
}

D'accord. Alors du coup, ma question est : où on accède à ce code généré par le JS, afin que je puisse remplacer les chiffres par des ● ?
Ensuite, si je vois juste… Pour les questions d'opacité donc je t'avais parler, ça devrait donner quelque chose comme ça :

Slide actif :

Code:: .rslides_here {
color: #000000;
opacity: 0.5;
}

Slide inactif :

Code:: .rslides_tabs {
color: #FFFFFF;
opacity: 0.5;
}

Le moyen le plus simple de le faire est en CSS ^^

Voici un exemple de code :

Code:: .rslides_tabs li a {
   background: red;
   border-radius: 15px;
   box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.3) inset;
   display: inline-block;
   height: 9px;
   overflow: hidden;
   text-indent: -9999px;
   width: 9px;
}

Dis moi si cela fonctionne déjà pour cette partie de la question

Oh ! Oui ça fonctionne. mais j'ai pas compris ce qui correspondait à la forme en elle même. c'est le text-indent ?
En tout cas, c'est nickel, j'ai juste à changer la couleurs et à travailler l'opacité. Par contre, comme tu peux surement le voir, ce petit système de navigation de place sous le slider, tandis que j'aimerai qu'il soit dessus, mais en bas, en centré. Je fais comment tu coup ?

Alors le text_indent c'est pour décaler le texte (les numéros qui servaient de liens) et ainsi les cacher.

La forme est faite grâce à la largeur (width), la hauteur (height) et ensuite on a arrondi les bords (border-radius).

Pour l'état "actif", le CSS est celui ci :

Code:: .rslides_here li a {
background: red;
}

Pour le placer en bas, il faut que dans ton HTML, tu entoures ton slider avec une div, auquel tu rajoutes une class, par exemple "slider". Cette div va donc englober à la fois ton slider et la pagination.
Dans le CSS tu mets ceci :

Code:: .slider { position: relative;}
.slider .rslides_tabs {
position: absolute;
top: 370px;
z-index: 5;
left: 0;
right: 0;
width: 100px;
margin: auto;
}

Je pense que cela devrait fonctionner.

Code:: .rslides_here li a {
background: red;
}

Ne fonctionne pas chez moi. :/ Ca ne change rien.

Pour la suite, j'ai fais comme tu m'as conseillé, ça fonctionne bien. Par contre j'ai pas fais une div, mais une span, parce que sinon ça créait un écart entre le slider et le contenu de la page en dessous (le "Accueil !" et la bannière tout à droite).

[RESOLU] Soucis de slideshow

[RESOLU] Soucis de slideshow

Sujets similaires

Sujets similaires

Partenaires Or