Slideshow Jquery

2 participants

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

Résolu Slideshow Jquery

Message par Soow* Mar 4 Sep 2012 - 12:42

Bonjour à vous (:

Voilà, récemment, je suis tombée sur ce tutorial qui me semblait vraiment intéressant. J'ai suivi le tuto à la lettre : j'ai inséré le css dans la feuille de css, j'ai inséré le bout html sur ma page d'accueil - parce que je compte mettre le slide sur ma PA - et pour finir, j'ai mis le javascript dans une nouvelle feuille java - en prenant soin de bien activer la gestion des codes Javascript -
Résultat ? Rien ne se produit ! J'ai tenté de refaire la manœuvre une fois, deux fois, trois fois, idem. N'étant pas très douée en code jquery/javascript etc, je me demande si je ne me suis pas trompée là-dedans.
Alors, si une âme charitable pouvait m'aider dans la réalisation de ce tutoriel, ça serait vraiment sympathique car j'avoue être un peu désespérée :/

Merci d'avance.



Dernière édition par Soow* le Jeu 13 Sep 2012 - 13:17, édité 1 fois
Soow*

Soow*
**

Messages : 62
Inscrit(e) le : 05/08/2011

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

Résolu Re: Slideshow Jquery

Message par Soow* Jeu 6 Sep 2012 - 9:26

UP (:
Soow*

Soow*
**

Messages : 62
Inscrit(e) le : 05/08/2011

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

Résolu Re: Slideshow Jquery

Message par Soow* Ven 7 Sep 2012 - 10:00

UP, s'il vous plaît (:
Soow*

Soow*
**

Messages : 62
Inscrit(e) le : 05/08/2011

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

Résolu Re: Slideshow Jquery

Message par AenigmA Ven 7 Sep 2012 - 10:30

Bonjour,
Peut être qu'en voyant ce que tu as fait on verrai mieux, car les explications du site sont claires pour le slide de base.
AenigmA

AenigmA
Membre actif

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Slideshow Jquery

Message par Soow* Mar 11 Sep 2012 - 10:49

Bonjour AenigmA (:
Comme je l'ai dit, je suis novice en ce qui concerne le JQuery mais je vais tout de même te montrer ce que j'ai fait.

Voici ma partie HTML :
Code:
<!-- Slideshow HTML -->
<div id="slideshow">
  <div id="slidesContainer">
    <div class="slide">
      <!-- Contenu pour le slide 1 -->
    </div>
    <div class="slide">
      <!-- Contenu pour le slide 2 -->
    </div>
    <div class="slide">
      <!-- Contenu pour le slide 3 -->
    </div>
    <div class="slide">
      <!-- Contenu pour le slide 4 -->
    </div>
  </div>
</div>
<!-- Slideshow HTML -->

Voici ma partie CSS :
Code:
#slideshow #slidesContainer {
  margin:0 auto;
  width:560px;
  height:263px;
  overflow:auto; /* affiche une scrollbar au cas ou */
  position:relative;
}
#slideshow #slidesContainer .slide {
  margin:0 auto;
  width:540px;  /* reduit de 20 pixels la div #slidesContainer pour permettre d'afficher la barre de scroll */
  height:263px;
}
.control {
  display:block;
  width:39px;
  height:263px;
  text-indent:-10000px;
  position:absolute;
  cursor: pointer;
}
#leftControl {
  top:0;
  left:0;
  background:transparent url(img/control_left.jpg) no-repeat 0 0;
}
#rightControl {
  top:0;
  right:0;
  background:transparent url(img/control_right.jpg) no-repeat 0 0;
}

Et voici ma partie 'Javascript' :
Code:
$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 560;
  var slides = $('.slide');
  var numberOfSlides = slides.length;
 
  // Supprime la scrollbar en JS
  $('#slidesContainer').css('overflow', 'hidden');
 
  slides
  .wrapAll('<div id="slideInner"></div>')
  // on met tous les slides en float:left pour qu'il s'affichent de manière horizontale
  .css({
    'float' : 'left',
    'width' : slideWidth
  });
 
  // La longueur de #slideInner équivaut à la somme de la longueur de tous les slides
  $('#slideInner').css('width', slideWidth * numberOfSlides);
 
  // Insert les flèches de gauche et de droite
  $('#slideshow')
    .prepend('<span class="control" id="leftControl">Move left</span>')
    .append('<span class="control" id="rightControl">Move right</span>');
 
  // Cache la flèche de gauche au début
  manageControls(currentPosition);
 
  // crée un écouteur pour l'évènement de type clic sur les div qui ont la classe .control
  $('.control')
    .bind('click', function(){
    // Determine une nouvelle position
      currentPosition = ($(this).attr('id')=='rightControl')
    ? currentPosition+1 : currentPosition-1;
 
      //Cache ou montre les flèches
      manageControls(currentPosition);
      // Move slideInner using margin-left
      $('#slideInner').animate({
        'marginLeft' : slideWidth*(-currentPosition)
      });
    });
 
  // manageControls: Cache ou montre les flèches de contrôles en fonction de la position
  function manageControls(position){
    // Hide left arrow if position is first slide
    if(position==0){ $('#leftControl').hide() }
    else{ $('#leftControl').show() }
    // Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ $('#rightControl').hide() }
    else{ $('#rightControl').show() }
    }
  });

Et avec tout ça, je n'obtiens pas le résultat espéré :/
Soow*

Soow*
**

Messages : 62
Inscrit(e) le : 05/08/2011

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

Résolu Re: Slideshow Jquery

Message par AenigmA Mar 11 Sep 2012 - 11:54

Je n'y connais pas plus que toi donc je regarde leur page de démo

La page
http://www.snoupix.com/demo/slider-jquery/final.html
La source
view-source:http://www.snoupix.com/demo/slider-jquery/final.html
Le css
http://www.snoupix.com/demo/slider-jquery/design.css

Donc je préfère partir du leur quand je le fais et modifier ensuite

Code:
<!-- Slideshow HTML -->
  <div id="slideshow">
    <div id="slidesContainer">   
      <div class="slide">
        <h2>Titre1</h2>
        <p>Blablabla1</p>
      </div>
      <div class="slide">
        <h2>Titre2</h2>
        <p>Blablabla2</p>
        <p>
      </div>
      <div class="slide">
        <h2>Titre3</h2>
        <p>Blablabla3</p>
      </div>
      <div class="slide">
        <h2>Titre4</h2>
        <p>Blablabla4</p>
      </div>
    </div>
  </div>
  <!-- Slideshow HTML -->

Code:
#slideshow {
   margin:0 auto;
   width:640px;
   height:263px;
   background:transparent url(img/bg_slideshow.jpg) no-repeat 0 0;
   position:relative;
}
#slideshow #slidesContainer {
  margin:0 auto;
  width:560px;
  height:263px;
  overflow:auto; /* affiche une scrollbar au cas ou */
  position:relative;
}
#slideshow #slidesContainer .slide {
  margin:0 auto;
  width:540px; /* reduit de 20 pixels la div #slidesContainer pour permettre d'afficher la barre de scroll */
  height:263px;
}
.control {
  display:block;
  width:39px;
  height:263px;
  text-indent:-10000px;
  position:absolute;
  cursor: pointer;
}
#navDiapo{
   display:block;
   width:20px;
   height:20px;
   position:absolute;
   right:25px;
   bottom:10px;
   cursor:pointer;

}
#leftControl {
  top:0;
  left:0;
  background:transparent url(img/control_left.jpg) no-repeat 0 0;
}
#rightControl {
  top:0;
  right:0;
  background:transparent url(img/control_right.jpg) no-repeat 0 0;
}

Code:
$(document).ready(function(){
   //Configuration
        var retour = true;
        var tempsTransition = 1000;
        var affichePlayPause = true;
        var lectureAutomatique = false;
           var tempsAttente = 6000;
         
        var icones = new Array();
              icones['play'] = 'img/play_slider.png';
              icones['pause'] = 'img/pause_slider.png';   
         
        var currentPosition = 0;
        var slideWidth = 560;
        var slides = $('.slide');
        var numberOfSlides = slides.length;
        var interval;
        var lectureEnCours = false;
  // Supprime la scrollbar en JS
  $('#slidesContainer').css('overflow', 'hidden');

  // Attribue  #slideInner  à toutes les div .slide
  slides
    .wrapAll('<div id="slideInner"></div>')
    // Float left to display horizontally, readjust .slides width
   .css({
      'float' : 'left',
      'width' : slideWidth
    });

  // Longueur de #slideInner égale au total de la longueur de tous les slides
  $('#slideInner').css('width', slideWidth * numberOfSlides);

  // Insert controls in the DOM
  $('#slideshow')
    .prepend('<span class="control" id="leftControl">Précédent</span>')
    .append('<span class="control" id="rightControl">Suivant</span>');


 
  // Hide left arrow control on first load
  manageControls(currentPosition);

  //Crée un écouteur d'évènement de type clic sur les classes .control
  $('.control')
    .bind('click', function(){
      
    // Determine la nouvelle position
   currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
   
   if(currentPosition == numberOfSlides && retour == false ){
      currentPosition--;
      pause();
   }
   
   // Cache ou montre les controles
    manageControls(currentPosition);
    // Fais bouger le slide
    $('#slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    },tempsTransition);
  });

  // manageControls: Cache ou montre les flêches de controle en fonction de la position courante
  function manageControls(position){
    // Cache la fleche "précédent" si on est sur le premier slide
   if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
   // Cache la fleche "suivant" si on est sur le dernier slide (et que le retour automatique n'est pas activé)
    if(position==numberOfSlides-1 && retour == false){
      $('#rightControl').hide();
   } else {
      $('#rightControl').show();
   }
   if(position == numberOfSlides && retour == true){
      currentPosition = 0;
       $('#leftControl').hide();
   }
  }
  function suivant(){
   $('#rightControl').click();
   }
  function start() {
     lectureEnCours = true;
    interval = setInterval(suivant, tempsAttente );
  }
  function pause() {
     lectureEnCours = false;
  clearInterval(interval);
  }
 
 //Si le diapo est activé
if(lectureAutomatique == true){
  start();
}
if(affichePlayPause == true){
   $('#slidesContainer').prepend('<img id="navDiapo" src="" alt="Navigation diaporama" />');
   if(lectureAutomatique == true){
      $('#navDiapo').attr('src',icones['pause']);
   }else{
      $('#navDiapo').attr('src',icones['play']);   
   }
   $('#navDiapo').bind('click', function(){
      if(lectureEnCours == true){
         $(this).attr('src',icones['play']);
         pause();
      }else{
         $(this).attr('src',icones['pause']);
         start();
      }
   });
}


     
});

Je pense que tu vas te débrouiller
AenigmA

AenigmA
Membre actif

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Slideshow Jquery

Message par Soow* Jeu 13 Sep 2012 - 13:17

C'est tout bon, j'ai réussi à me débrouiller I love you
Merci pour ton aide Aenigma !

Je change le statut de mon sujet (:
Soow*

Soow*
**

Messages : 62
Inscrit(e) le : 05/08/2011

Soow* 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