Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

Slideshow Jquery

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

Résolu Slideshow Jquery

Message par Soow* le 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* le 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* le 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 le 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* le 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 le 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* le 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


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