Forums Développement Multimédia

Aller au contenu

[résolu] Afficher un slide plus longtemps que les autres dans un slider jquery ✔

CODE Ajax JQuery EaseJs

11 réponses à ce sujet

#1 tarentaise

    Ceinture Blanche

  • Members
  • Pip
  • 8 messages

Posté 31 May 2012 - 22:39 PM

Bonjour à tous,

sur un site que je développe je veux utiliser le slider Orbit (code source visible ici : http://www.zurb.com/...ry-image-slider). Pour l'installer, l'adapter à ma page et le faire fonctionner pas de souci :smile:

Par contre je voudrais que le premier slide reste affiché plus longtemps que les autres et là j'ai beau chercher je ne trouve pas la solution :sad:

Si quelqu'un peu me donner un petit coup de main ....

D'avance merci à ceux qui auront lu ce post et qui m'éclaireront de leur savoir. :Hola: :Hola:

#2 dcz.switcher

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 2533 messages

Posté 01 June 2012 - 07:22 AM

Salut,

C'est un peu chaud pour moi ce matin, je ne pourrais pas terminer, mais voici une piste ...

L'idée est d'écouter le premier changement et de modifier le timer de l'objet ... ça ne fonctionne pas parfaitement, mais je pense que c'est jouable

Prend le fichier demo.html dans l'archive d'Orbit et utilise ce code

Si je peux, je tente de regarder ça avant ce soir ... à moins que tu n'ais trouvé d'ici là

Bon dev


<script type="text/javascript">
   $(window).load(function() {
   
    var first = false ;
    $('#responsive').orbit(
         {
          bullets: true,
          fluid: true,
          advanceSpeed : 5000,
          afterSlideChange : function(e){
           if( first == false ){
            first = true ;
            console.log( this ) ;
            console.log( this.options.advanceSpeed ) ;
            this.options.advanceSpeed = 2000 ;
            console.log( this.options.advanceSpeed ) ;
            this.stopClock() ;
            this.setupTimer();
            this.startClock();
           }
          }
         }
    );
   
   });
  </script>
 

"Ce que l'on conçoit bien s'énonce clairement et les mots pour le dire arrivent aisément"

embryon de site

#3 tarentaise

    Ceinture Blanche

  • Members
  • Pip
  • 8 messages

Posté 01 June 2012 - 13:29 PM

Hello dcz.switcher

merci pour ta piste mais voilà j'y ai passé une bonne partie de la matinée mais je n'y arrive pas ..... :cry: c'est vraiment pas mon truc le javascript ....

#4 dcz.switcher

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 2533 messages

Posté 02 June 2012 - 21:06 PM

Désolé, finalement je ne peux m'y remettre que maintenant.

Je pense avoir trouvé comment faire :


<script type="text/javascript">
   $(window).load(function() {
   
    var first = false ;
    $('#responsive').orbit(
         {
          bullets: true,
          fluid: true,
          advanceSpeed : 5000,
          afterSlideChange : function(e){
           if( first == false ){
            first = true ;         
            this.clickTimer() ;//met en pause
            this.options.advanceSpeed = 2000 ; //change la vitesse
            this.clickTimer() ; //remet en route
           }
          }
         }
    );
   
   });
  </script>
 

"Ce que l'on conçoit bien s'énonce clairement et les mots pour le dire arrivent aisément"

embryon de site

#5 tarentaise

    Ceinture Blanche

  • Members
  • Pip
  • 8 messages

Posté 03 June 2012 - 18:19 PM

Hello,

désolé de ne pas avoir répondu plus tôt week-end fête des mères = déplacement obligatoire ;-)

j'ai pris ton script et le l'ai mis à la place de celui-ci :
<script type="text/javascript">
$(window).load(function() {
$('#featured').orbit();
});
</script>
dans le fichier demo de l'archive mais celà ne fonctionne pas.

Sorry

#6 dcz.switcher

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 2533 messages

Posté 03 June 2012 - 18:34 PM

Plutôt qu'un long discours, voilà ce que ça donne chez moi


"Ce que l'on conçoit bien s'énonce clairement et les mots pour le dire arrivent aisément"

embryon de site

#7 tarentaise

    Ceinture Blanche

  • Members
  • Pip
  • 8 messages

Posté 03 June 2012 - 19:14 PM

Ok je commence à comprendre car moi le fichier qui se nomme demo.html dans l'archive que j'ai récupéré ne contient pas la même chose que ton fichier.
Voici le contenu de mon demo.html


<!DOCTYPE html>

<!--
* Markup for jQuery Orbit Plugin 1.2.3
* www.ZURB.com/playground
* Copyright 2010, ZURB
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
-->



<head>
  <meta charset="utf-8" />
  <title>Orbit Demo</title>
 
  <!-- Attach our CSS -->
    <link rel="stylesheet" href="../orbit-1.2.3.css">
    <link rel="stylesheet" href="demo-style.css">
   
  <!-- Attach necessary JS -->
  <script type="text/javascript" src="../jquery-1.5.1.min.js"></script>
  <script type="text/javascript" src="../jquery.orbit-1.2.3.min.js"></script>
 
   <!--[if IE]>
            <style type="text/css">
                    .timer { display: none !important; }
                    div.caption { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);zoom: 1; }
           </style>
   <![endif]-->
 
  <!-- Run the plugin -->
  <script type="text/javascript">
   $(window).load(function() {
    $('#featured').orbit({
          animation: 'fade',                              // fade, horizontal-slide, vertical-slide, horizontal-push
          animationSpeed: 800,                      // how fast animtions are
          timer: true,   // true or false to have the timer
          advanceSpeed: 4000,    // if timer is enabled, time between transitions
          pauseOnHover: false,    // if you hover pauses the slider
          startClockOnMouseOut: false,   // if clock should start on MouseOut
          startClockOnMouseOutAfter: 1000,   // how long after MouseOut should the timer start again
          directionalNav: true,    // manual advancing directional navs
          captions: true,        // do you want captions?
          captionAnimation: 'fade',    // fade, slideOpen, none
          captionAnimationSpeed: 800,   // if so how quickly should they animate in
          bullets: false,    // true or false to activate the bullet navigation
          bulletThumbs: false,   // thumbnails for the bullets
          bulletThumbLocation: '',   // location from this file where thumbs will be
          afterSlideChange: function(){}   // empty function
    });
   });
  </script>
 
</head>
<body>

<div class="container">
  <h4>ZURB's Orbit Slider</h4>
  <a href="http://www.zurb.com/playground/orbit-jquery-image-slider">View Docs + Playground for Orbit</a>




<!-- =======================================
THE ACTUAL ORBIT SLIDER CONTENT
======================================= -->
  <div id="featured">
   <div class="content" style="">
    <h1>Orbit does content now.</h1>
    <h3>Highlight me...I'
m text.</h3>
   </div>
   <a href=""><img src="dummy-images/overflow.jpg" /></a>
   <img src="dummy-images/captions.jpg" data-caption="#htmlCaption" />
   <img src="dummy-images/features.jpg"  />
  </div>
  <!-- Captions for Orbit -->
  <span class="orbit-caption" id="htmlCaption"><strong>I'm A Badass Caption:</strong> I can haz <a href="#">links</a>, <em>style</em> or anything that is valid markup <img src='http://forums.mediabox.fr/public/style_emoticons/<#EMO_DIR#>/smile.png' class='bbc_emoticon' alt=':)' /></span>
 
 
 
  </div>
</body>
</html>
 


#8 dcz.switcher

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 2533 messages

Posté 03 June 2012 - 19:55 PM

En effet, le soucis vient aussi du fait qu'on n'utilise pas la même version du script

Tu utilises la 1.2.3 et moi la 1.3.0

Tu peux récupérer la dernière version à cette adresse
https://github.com/zurb/orbit
"Ce que l'on conçoit bien s'énonce clairement et les mots pour le dire arrivent aisément"

embryon de site

#9 tarentaise

    Ceinture Blanche

  • Members
  • Pip
  • 8 messages

Posté 03 June 2012 - 20:43 PM

Ok ok je m'avoue vaincu cela fonctionne pile poil .... merci à toi

#10 tarentaise

    Ceinture Blanche

  • Members
  • Pip
  • 8 messages

Posté 04 June 2012 - 08:20 AM

Je sais que j'abuse mais pense tu qu'il est possible de faire en sorte de le premier slide soit toujours affiché plus longtemps que les autres.
Ta solution fonctionne très bien mais une fois la première boucle de slide finie lorsque la seconde commence le 1er slide a son temps d'affichage aligné sur les autres.

Désolé pour cette question.

#11 dcz.switcher

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 2533 messages

Posté 04 June 2012 - 20:06 PM

Bien sûr, le plugin est vraiment bien fichu, il suffit de regarder la propriété activeSlide

Et tu as du remarquer qu'avant de modifier sa vitesse, le compteur commencait à défiler, c'est dû au fait qu'on écoute l'évènement afterSlideChange()

Bon, pour que ça soit plus propre, il suffit d'ajouter un évènement beforeSlideChange( ) et de l'écouter

Du côté du plugin, il suffit de rajouter une fonction beforeSlideChange( ) dans l'objet des paramètres par défaut

//extrait du code modifié
defaults: {
       //.....
      afterSlideChange    : $.noop,   // empty function
          beforeSlideChange       : $.noop,  // nouvelle fonction !
     //.....
    },
 

... de l'appeler dans la fonction rotateTimer( )

//extrait ....
rotateTimer: function () {
          //......
          if(this.degrees > 360) {
            this.$rotator.removeClass('move');
            this.$mask.removeClass('move');
            this.degrees = 0;
            this.$element.trigger('orbit.next');
        //appel de la nouvelle fonction
            this.options.beforeSlideChange.call(this, this.$slides.eq(this.prevActiveSlide), this.$slides.eq(this.activeSlide));
          }
    },
 

Et côté js (dans ta page)

<script type="text/javascript">
   $(window).load(function() {
   
    var first = false ;
    $('#responsive').orbit(
         {
          bullets: true,
          fluid: true,
          advanceSpeed : 5000,
          beforeSlideChange : function(e){
           if( first == false ){
            first = true ;         
            this.clickTimer() ;
            this.options.advanceSpeed = 2000 ;
            this.clickTimer() ;
           }
           if( this.activeSlide == 0 ){
            this.clickTimer() ;
            this.options.advanceSpeed = 5000 ;
            this.clickTimer() ;
            first = false ;
           }
          }
         }
    );
   
   });
  </script>
 

"Ce que l'on conçoit bien s'énonce clairement et les mots pour le dire arrivent aisément"

embryon de site

#12 tarentaise

    Ceinture Blanche

  • Members
  • Pip
  • 8 messages

Posté 06 June 2012 - 07:44 AM

ok merci bien à toi ..... faut vraiment que je me forme au javascript .... dès que je trouve le temps je m'y mets ;-)



1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)