Slideshow javascript, position premier slide
Résolu/Fermé
SteeveC
Messages postés
8
Date d'inscription
lundi 20 juillet 2009
Statut
Membre
Dernière intervention
30 avril 2012
-
16 oct. 2011 à 19:45
Dge-06 - 30 avril 2012 à 17:06
Dge-06 - 30 avril 2012 à 17:06
A voir également:
- Slideshow javascript, position premier slide
- Ma position - Guide
- Telecharger javascript - Télécharger - Langages
- Thundersoft free slideshow maker - Télécharger - Visionnage & Diaporama
- Position gps - Guide
- Partage de position whatsapp - Guide
7 réponses
steeve.c
Messages postés
2
Date d'inscription
samedi 9 avril 2011
Statut
Membre
Dernière intervention
19 octobre 2011
1
19 oct. 2011 à 09:06
19 oct. 2011 à 09:06
Une personne m'a rectifier le code sur un autre forum, je le post ici au cas certaines personnes aient le même besoin.
Il fallait ajouter :
Juste avant la fin, du coup, avec $_GET['posi'], j'indique le numero du slide a afficher.
Merci a venegal du forum codingforums:
http://www.codingforums.com/showthread.php?t=241180
Voici le code javascript final:
Il fallait ajouter :
$('#slideInner').css({marginLeft: slideWidth * (-currentPosition)});
Juste avant la fin, du coup, avec $_GET['posi'], j'indique le numero du slide a afficher.
Merci a venegal du forum codingforums:
http://www.codingforums.com/showthread.php?t=241180
Voici le code javascript final:
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/includ/jquery-1.3.2.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ //Configuration var retour = true; var tempsTransition = 1000; var affichePlayPause = false; var lectureAutomatique = false; var tempsAttente = 6000; var icones = new Array(); icones['play'] = '<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/img/play_slider.png'; icones['pause'] = '<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/img/pause_slider.png'; var currentPosition = <?php if(isset($_GET['posi'])) { echo $_GET['posi']; } else { echo 0;} ?>; var slideWidth = 840; 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(); } }); } $('#slideInner').css({marginLeft: slideWidth * (-currentPosition)}); }); </script>
SteeveC
Messages postés
8
Date d'inscription
lundi 20 juillet 2009
Statut
Membre
Dernière intervention
30 avril 2012
1
30 avril 2012 à 16:38
30 avril 2012 à 16:38
Alors, même chose, je suis sur de rien, mais peut etre avec cette partie du code
// Determine la nouvelle position
currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
En inversant dans le genre
// Determine la nouvelle position
currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition-1 : currentPosition+1;
// Determine la nouvelle position
currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
En inversant dans le genre
// Determine la nouvelle position
currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition-1 : currentPosition+1;
Bonjour,
J'arrive un peu tard, mais j'utilise aussi ce slide et je voudrais savoir si quelqu'un sais comment faire en sorte que ça défile tout seul toute les X secondes svp??
Merci d'avance.
J'arrive un peu tard, mais j'utilise aussi ce slide et je voudrais savoir si quelqu'un sais comment faire en sorte que ça défile tout seul toute les X secondes svp??
Merci d'avance.
Alors je suis pas expert en javascript, mais je suis a l'origine de ce post
Sans avoir testé je dirais qu'il faut tester du coté de cette partie du code posté plus haut
function start() {
lectureEnCours = true;
interval = setInterval(suivant, tempsAttente );
}
en remplacent TempsAttente par 3 ou 3000 si c des miliseconde
Sans avoir testé je dirais qu'il faut tester du coté de cette partie du code posté plus haut
function start() {
lectureEnCours = true;
interval = setInterval(suivant, tempsAttente );
}
en remplacent TempsAttente par 3 ou 3000 si c des miliseconde
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
et pour la direction, vous savez ou ça se trouve? Car actuellement, il défile de droite à gauche, et moi je voudrais faire le contraire: de gauche à droite
Une idée?
Une idée?
SteeveC
Messages postés
8
Date d'inscription
lundi 20 juillet 2009
Statut
Membre
Dernière intervention
30 avril 2012
1
30 avril 2012 à 16:39
30 avril 2012 à 16:39
Ou encore en inversant ici:
// Insert controls in the DOM
$('#slideshow')
.prepend('<span class="control" id="leftControl">Précédent</span>')
.append('<span class="control" id="rightControl">Suivant</span>');
// Insert controls in the DOM
$('#slideshow')
.prepend('<span class="control" id="rightControl">Précédent</span>')
.append('<span class="control" id="leftControl">Suivant</span>');
// Insert controls in the DOM
$('#slideshow')
.prepend('<span class="control" id="leftControl">Précédent</span>')
.append('<span class="control" id="rightControl">Suivant</span>');
// Insert controls in the DOM
$('#slideshow')
.prepend('<span class="control" id="rightControl">Précédent</span>')
.append('<span class="control" id="leftControl">Suivant</span>');