Discussion :

[Mister Paul]

Bonjour,

je voudrais ajouter le déclenchement d'une pause lors d'un clic sur un diaporama Flexslider.

Je pense me greffer sur le code d'un événement onclick déjà existant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
//Toggle
		$('.showcase-toggle').click(function() {
		  $(".showcase,#header-slider").toggleClass("showcase-open");
		  $(".showcase-image").toggleClass("showcase-image-hide");
		  $(".showcase-info").toggleClass("showcase-info-open");
		  $(".showcase-title h2").toggleClass("showcase-title-white");
		  $(".showcase-text").toggleClass("showcase-text-show");
		  return false;
		});

Le code de la pause est déjà existant dans un autre fichier js (jquery.flexslider.js qui régit le slider) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 //FlexSlider: Automatic Slideshow Pause
    slider.pause = function() {
      clearInterval(slider.animatedSlides);
      if (slider.vars.pausePlay) {        slider.pausePlay.removeClass('pause').addClass('play').text(slider.vars.playText);
      }
    }

Mais je ne sais pas relier les 2…


J'ai essayé des

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
//Toggle
		$('.showcase-toggle').click(function() {
 			$("#header-slider").flexslider({
				"slider":	"pause"
			});
		...

ou des

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
//Toggle
		$('.showcase-toggle').click(function() {
 			$('#header-slider').flexslider.slider.pause();
		...

Mais rien ne passe…


Un petit coup de pouce serait le bienvenu…

[danielhagnoul]

Bonsoir

Je ne connais pas, mais avec , je trouve : https://github.com/woothemes/FlexSlider

et

Helper strings have been added for performing actions quickly on FlexSlider elements. Example uses:

$('#slider').flexslider("play") //Play slideshow
$('#slider').flexslider("pause") //Pause slideshow
$('#slider').flexslider("next") //Go to next slide
$('#slider').flexslider("prev") //Go to previous slide
$('#slider').flexslider(3) //Go fourth slide

[Mister Paul]

Merci
J'ai suivi ton conseil et chargé la dernière version de Flexslider avec les fonctions indiquées. Pas mal de petites modifs CSS à faire. Mais ça roule !