Problème emplacement Script Timeline JQuery

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

Résolu Problème emplacement Script Timeline JQuery

Message par Felgueran le Jeu 13 Nov 2014 - 22:28

Détails techniques


Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Autre
Personnes concernées par le problème : Moi uniquement
Lien du forum : http://lescitesdecuivre.forumactif.org

Description du problème

Bonjour.

Tout d'abord, merci de me lire, je repointe mon nez ici au bout de 8 ans, cela fait bizarre de voir tant de modification et d'évolutions (pour la plupart positives Wink )

J'ai cherché sur Google un script / code pour insérer une frise historique élégante dans un message de mon forum, sans succès, jusqu'à ce que je tombe sur cet article : réaliser une timeline avec JQuery

J'ai vérifié sur votre FdF si JQuery était bien pris en compte, à priori, oui : ayant besoin de la version 1.6 et ayant accès avec vous à la version 1.7, pas de problèmes de ce côté là.

Maintenant voilà : je suis sous Phpbb 2. J'ai beau lire vos topics sur comment mettre un carrousel en page d'accueil, comment utiliser du javascript sur forumactif, comment intégrer une double feuille en tête de forum (genre message publicitaire), et avoir regardé ce post en particulier qui semble ressembler de près à ce que propose l'article qui m'intéresse, je ne vois vraiment pas comment faire.

Si quelqu'un a une idée lumineuse, et je ne doute pas que ce soit le cas ici, je suis preneur.

Merci à vous tous.

Cordialement.


Dernière édition par Felgueran le Lun 17 Nov 2014 - 20:33, édité 2 fois (Raison : Rendre mon titre plus attractif aux donneur de coup de main ;))

Felgueran
**

Messages : 53
Inscrit(e) le : 29/10/2004

http://lescitesdecuivre.forumactif.org
Felgueran a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème emplacement Script Timeline JQuery

Message par Felgueran le Ven 14 Nov 2014 - 22:44

Bonsoir ! Smile

Je relis les messages des autres personnes, ceux du staff qui rappelle que certaines demandes ne sont pas claires, et qu'on ne peut par conséquent pas y répondre.

Je plussoie, bien évidement à ce genre de remarque. Et je me relis par conséquent.

Gros FAIL ! Je peux encore être plus clair !

Donc voici davantage d'explications à mon soucis.

J'ai trouvé ce code, qui me semblait intéressant.
Première partie, configuration de la Timeline :
Code:
$(function(){
  $().timelinr({
      orientation: 'horizontal',
      // value: horizontal | vertical, default to horizontal
      containerDiv: '#timeline',
      // value: any HTML tag or #id, default to #timeline
      datesDiv: '#dates',
      // value: any HTML tag or #id, default to #dates
      datesSelectedClass: 'selected',
      // value: any class, default to selected
      datesSpeed: 'normal',
      // value: integer between 100 and 1000 (recommended) or 'slow', 'normal' or 'fast'; default to normal
      issuesDiv : '#issues',
      // value: any HTML tag or #id, default to #issues
      issuesSelectedClass: 'selected',
      // value: any class, default to selected
      issuesSpeed: 'fast',
      // value: integer between 100 and 1000 (recommended) or 'slow', 'normal' or 'fast'; default to fast
      issuesTransparency: 0.2,
      // value: integer between 0 and 1 (recommended), default to 0.2
      issuesTransparencySpeed: 500,
      // value: integer between 100 and 1000 (recommended), default to 500 (normal)
      prevButton: '#prev',
      // value: any HTML tag or #id, default to #prev
      nextButton: '#next',
      // value: any HTML tag or #id, default to #next
      arrowKeys: 'false',
      // value: true/false, default to false
      startAt: 1,
      // value: integer, default to 1 (first)
      autoPlay: 'false',
      // value: true | false, default to false
      autoPlayDirection: 'forward',
      // value: forward | backward, default to forward
      autoPlayPause: 2000
      // value: integer (1000 = 1 seg), default to 2000 (2segs)< });
  });
Deuxième partie, création de la Timeline :
Code:
<div id="timeline">
  <ul id="dates">
      <li><a href="#">date1</a></li>
      <li><a href="#">date2</a></li>
  </ul>
  <ul id="issues">
      <li id="date1">
        <p>Lorem ipsum.</p>
      </li>
      <li id="date2">
        <p>Lorem ipsum.</p>
      </li>
  </ul>
  <a href="#" id="next">+</a> <!-- optional -->
  <a href="#" id="prev">-</a> <!-- optional -->
</div>

Donc, j'ai bien compris que cette deuxième partie, ce code HTML, était à insérer dans le message où l'on voulait voir apparaître la Frise Historique.

Je suis ensuite parti regarder du côté de la demoiselle au Slideshow JQuery où elle explique que CSS -> page de CSS, code HTML -> page d'accueil parce que c'est là qu'elle le veut et code Js dans la partie Js des Modules

Mais.

The code JQuery :
Code:
/* ----------------------------------
jQuery Timelinr 0.9.54
tested with jQuery v1.6+

Copyright 2011, CSSLab.cl
Free under the MIT license.
http://www.opensource.org/licenses/mit-license.php

instructions: http://www.csslab.cl/2011/08/18/jquery-timelinr/
---------------------------------- */

jQuery.fn.timelinr = function(options){
   // default plugin settings
   settings = jQuery.extend({
      orientation:             'horizontal',      // value: horizontal | vertical, default to horizontal
      containerDiv:             '#timeline',      // value: any HTML tag or #id, default to #timeline
      datesDiv:                '#dates',         // value: any HTML tag or #id, default to #dates
      datesSelectedClass:       'selected',         // value: any class, default to selected
      datesSpeed:             'normal',         // value: integer between 100 and 1000 (recommended) or 'slow', 'normal' or 'fast'; default to normal
      issuesDiv:                '#issues',         // value: any HTML tag or #id, default to #issues
      issuesSelectedClass:       'selected',         // value: any class, default to selected
      issuesSpeed:             'fast',            // value: integer between 100 and 1000 (recommended) or 'slow', 'normal' or 'fast'; default to fast
      issuesTransparency:       0.2,            // value: integer between 0 and 1 (recommended), default to 0.2
      issuesTransparencySpeed:    500,            // value: integer between 100 and 1000 (recommended), default to 500 (normal)
      prevButton:             '#prev',         // value: any HTML tag or #id, default to #prev
      nextButton:             '#next',         // value: any HTML tag or #id, default to #next
      arrowKeys:                'false',         // value: true | false, default to false
      startAt:                1,               // value: integer, default to 1 (first)
      autoPlay:                'false',         // value: true | false, default to false
      autoPlayDirection:          'forward',         // value: forward | backward, default to forward
      autoPlayPause:             2000            // value: integer (1000 = 1 seg), default to 2000 (2segs)
   }, options);

   $(function(){
      // setting variables... many of them
      var howManyDates = $(settings.datesDiv+' li').length;
      var howManyIssues = $(settings.issuesDiv+' li').length;
      var currentDate = $(settings.datesDiv).find('a.'+settings.datesSelectedClass);
      var currentIssue = $(settings.issuesDiv).find('li.'+settings.issuesSelectedClass);
      var widthContainer = $(settings.containerDiv).width();
      var heightContainer = $(settings.containerDiv).height();
      var widthIssues = $(settings.issuesDiv).width();
      var heightIssues = $(settings.issuesDiv).height();
      var widthIssue = $(settings.issuesDiv+' li').width();
      var heightIssue = $(settings.issuesDiv+' li').height();
      var widthDates = $(settings.datesDiv).width();
      var heightDates = $(settings.datesDiv).height();
      var widthDate = $(settings.datesDiv+' li').width();
      var heightDate = $(settings.datesDiv+' li').height();
      // set positions!
      if(settings.orientation == 'horizontal') {   
         $(settings.issuesDiv).width(widthIssue*howManyIssues);
         $(settings.datesDiv).width(widthDate*howManyDates).css('marginLeft',widthContainer/2-widthDate/2);
         var defaultPositionDates = parseInt($(settings.datesDiv).css('marginLeft').substring(0,$(settings.datesDiv).css('marginLeft').indexOf('px')));
      } else if(settings.orientation == 'vertical') {
         $(settings.issuesDiv).height(heightIssue*howManyIssues);
         $(settings.datesDiv).height(heightDate*howManyDates).css('marginTop',heightContainer/2-heightDate/2);
         var defaultPositionDates = parseInt($(settings.datesDiv).css('marginTop').substring(0,$(settings.datesDiv).css('marginTop').indexOf('px')));
      }
      
      $(settings.datesDiv+' a').click(function(event){
         event.preventDefault();
         // first vars
         var whichIssue = $(this).text();
         var currentIndex = $(this).parent().prevAll().length;
         // moving the elements
         if(settings.orientation == 'horizontal') {
            $(settings.issuesDiv).animate({'marginLeft':-widthIssue*currentIndex},{queue:false, duration:settings.issuesSpeed});
         } else if(settings.orientation == 'vertical') {
            $(settings.issuesDiv).animate({'marginTop':-heightIssue*currentIndex},{queue:false, duration:settings.issuesSpeed});
         }
         $(settings.issuesDiv+' li').animate({'opacity':settings.issuesTransparency},{queue:false, duration:settings.issuesSpeed}).removeClass(settings.issuesSelectedClass).eq(currentIndex).addClass(settings.issuesSelectedClass).fadeTo(settings.issuesTransparencySpeed,1);
         // prev/next buttons now disappears on first/last issue | bugfix from 0.9.51: lower than 1 issue hide the arrows | bugfixed: arrows not showing when jumping from first to last date
         if(howManyDates == 1) {
            $(settings.prevButton+','+settings.nextButton).fadeOut('fast');
         } else if(howManyDates == 2) {
            if($(settings.issuesDiv+' li:first-child').hasClass(settings.issuesSelectedClass)) {
               $(settings.prevButton).fadeOut('fast');
                $(settings.nextButton).fadeIn('fast');
            }
            else if($(settings.issuesDiv+' li:last-child').hasClass(settings.issuesSelectedClass)) {
               $(settings.nextButton).fadeOut('fast');
               $(settings.prevButton).fadeIn('fast');
            }
         } else {
            if( $(settings.issuesDiv+' li:first-child').hasClass(settings.issuesSelectedClass) ) {
               $(settings.nextButton).fadeIn('fast');
               $(settings.prevButton).fadeOut('fast');
            }
            else if( $(settings.issuesDiv+' li:last-child').hasClass(settings.issuesSelectedClass) ) {
               $(settings.prevButton).fadeIn('fast');
               $(settings.nextButton).fadeOut('fast');
            }
            else {
               $(settings.nextButton+','+settings.prevButton).fadeIn('slow');
            }   
         }
         // now moving the dates
         $(settings.datesDiv+' a').removeClass(settings.datesSelectedClass);
         $(this).addClass(settings.datesSelectedClass);
         if(settings.orientation == 'horizontal') {
            $(settings.datesDiv).animate({'marginLeft':defaultPositionDates-(widthDate*currentIndex)},{queue:false, duration:'settings.datesSpeed'});
         } else if(settings.orientation == 'vertical') {
            $(settings.datesDiv).animate({'marginTop':defaultPositionDates-(heightDate*currentIndex)},{queue:false, duration:'settings.datesSpeed'});
         }
      });

      $(settings.nextButton).bind('click', function(event){
         event.preventDefault();
         // bugixed from 0.9.54: now the dates gets centered when there's too much dates.
         var currentIndex = $(settings.issuesDiv).find('li.'+settings.issuesSelectedClass).index();
         if(settings.orientation == 'horizontal') {
            var currentPositionIssues = parseInt($(settings.issuesDiv).css('marginLeft').substring(0,$(settings.issuesDiv).css('marginLeft').indexOf('px')));
            var currentIssueIndex = currentPositionIssues/widthIssue;
            var currentPositionDates = parseInt($(settings.datesDiv).css('marginLeft').substring(0,$(settings.datesDiv).css('marginLeft').indexOf('px')));
            var currentIssueDate = currentPositionDates-widthDate;
            if(currentPositionIssues <= -(widthIssue*howManyIssues-(widthIssue))) {
               $(settings.issuesDiv).stop();
               $(settings.datesDiv+' li:last-child a').click();
            } else {
               if (!$(settings.issuesDiv).is(':animated')) {
                  // bugixed from 0.9.52: now the dates gets centered when there's too much dates.
                  $(settings.datesDiv+' li').eq(currentIndex+1).find('a').trigger('click');
               }
            }
         } else if(settings.orientation == 'vertical') {
            var currentPositionIssues = parseInt($(settings.issuesDiv).css('marginTop').substring(0,$(settings.issuesDiv).css('marginTop').indexOf('px')));
            var currentIssueIndex = currentPositionIssues/heightIssue;
            var currentPositionDates = parseInt($(settings.datesDiv).css('marginTop').substring(0,$(settings.datesDiv).css('marginTop').indexOf('px')));
            var currentIssueDate = currentPositionDates-heightDate;
            if(currentPositionIssues <= -(heightIssue*howManyIssues-(heightIssue))) {
               $(settings.issuesDiv).stop();
               $(settings.datesDiv+' li:last-child a').click();
            } else {
               if (!$(settings.issuesDiv).is(':animated')) {
                  // bugixed from 0.9.54: now the dates gets centered when there's too much dates.
                  $(settings.datesDiv+' li').eq(currentIndex+1).find('a').trigger('click');
               }
            }
         }
         // prev/next buttons now disappears on first/last issue | bugfix from 0.9.51: lower than 1 issue hide the arrows
         if(howManyDates == 1) {
            $(settings.prevButton+','+settings.nextButton).fadeOut('fast');
         } else if(howManyDates == 2) {
            if($(settings.issuesDiv+' li:first-child').hasClass(settings.issuesSelectedClass)) {
               $(settings.prevButton).fadeOut('fast');
                $(settings.nextButton).fadeIn('fast');
            }
            else if($(settings.issuesDiv+' li:last-child').hasClass(settings.issuesSelectedClass)) {
               $(settings.nextButton).fadeOut('fast');
               $(settings.prevButton).fadeIn('fast');
            }
         } else {
            if( $(settings.issuesDiv+' li:first-child').hasClass(settings.issuesSelectedClass) ) {
               $(settings.prevButton).fadeOut('fast');
            }
            else if( $(settings.issuesDiv+' li:last-child').hasClass(settings.issuesSelectedClass) ) {
               $(settings.nextButton).fadeOut('fast');
            }
            else {
               $(settings.nextButton+','+settings.prevButton).fadeIn('slow');
            }   
         }
      });

      $(settings.prevButton).click(function(event){
         event.preventDefault();
         // bugixed from 0.9.54: now the dates gets centered when there's too much dates.
         var currentIndex = $(settings.issuesDiv).find('li.'+settings.issuesSelectedClass).index();
         if(settings.orientation == 'horizontal') {
            var currentPositionIssues = parseInt($(settings.issuesDiv).css('marginLeft').substring(0,$(settings.issuesDiv).css('marginLeft').indexOf('px')));
            var currentIssueIndex = currentPositionIssues/widthIssue;
            var currentPositionDates = parseInt($(settings.datesDiv).css('marginLeft').substring(0,$(settings.datesDiv).css('marginLeft').indexOf('px')));
            var currentIssueDate = currentPositionDates+widthDate;
            if(currentPositionIssues >= 0) {
               $(settings.issuesDiv).stop();
               $(settings.datesDiv+' li:first-child a').click();
            } else {
               if (!$(settings.issuesDiv).is(':animated')) {
                  // bugixed from 0.9.54: now the dates gets centered when there's too much dates.
                  $(settings.datesDiv+' li').eq(currentIndex-1).find('a').trigger('click');
               }
            }
         } else if(settings.orientation == 'vertical') {
            var currentPositionIssues = parseInt($(settings.issuesDiv).css('marginTop').substring(0,$(settings.issuesDiv).css('marginTop').indexOf('px')));
            var currentIssueIndex = currentPositionIssues/heightIssue;
            var currentPositionDates = parseInt($(settings.datesDiv).css('marginTop').substring(0,$(settings.datesDiv).css('marginTop').indexOf('px')));
            var currentIssueDate = currentPositionDates+heightDate;
            if(currentPositionIssues >= 0) {
               $(settings.issuesDiv).stop();
               $(settings.datesDiv+' li:first-child a').click();
            } else {
               if (!$(settings.issuesDiv).is(':animated')) {
                  // bugixed from 0.9.54: now the dates gets centered when there's too much dates.
                  $(settings.datesDiv+' li').eq(currentIndex-1).find('a').trigger('click');
               }
            }
         }
         // prev/next buttons now disappears on first/last issue | bugfix from 0.9.51: lower than 1 issue hide the arrows
         if(howManyDates == 1) {
            $(settings.prevButton+','+settings.nextButton).fadeOut('fast');
         } else if(howManyDates == 2) {
            if($(settings.issuesDiv+' li:first-child').hasClass(settings.issuesSelectedClass)) {
               $(settings.prevButton).fadeOut('fast');
                $(settings.nextButton).fadeIn('fast');
            }
            else if($(settings.issuesDiv+' li:last-child').hasClass(settings.issuesSelectedClass)) {
               $(settings.nextButton).fadeOut('fast');
               $(settings.prevButton).fadeIn('fast');
            }
         } else {
            if( $(settings.issuesDiv+' li:first-child').hasClass(settings.issuesSelectedClass) ) {
               $(settings.prevButton).fadeOut('fast');
            }
            else if( $(settings.issuesDiv+' li:last-child').hasClass(settings.issuesSelectedClass) ) {
               $(settings.nextButton).fadeOut('fast');
            }
            else {
               $(settings.nextButton+','+settings.prevButton).fadeIn('slow');
            }   
         }
      });
      // keyboard navigation, added since 0.9.1
      if(settings.arrowKeys=='true') {
         if(settings.orientation=='horizontal') {
            $(document).keydown(function(event){
               if (event.keyCode == 39) {
                  $(settings.nextButton).click();
                }
               if (event.keyCode == 37) {
                  $(settings.prevButton).click();
                }
            });
         } else if(settings.orientation=='vertical') {
            $(document).keydown(function(event){
               if (event.keyCode == 40) {
                  $(settings.nextButton).click();
                }
               if (event.keyCode == 38) {
                  $(settings.prevButton).click();
                }
            });
         }
      }
      // default position startAt, added since 0.9.3
      $(settings.datesDiv+' li').eq(settings.startAt-1).find('a').trigger('click');
      // autoPlay, added since 0.9.4
      if(settings.autoPlay == 'true') {
         setInterval("autoPlay()", settings.autoPlayPause);
      }
   });
};

// autoPlay, added since 0.9.4
function autoPlay(){
   var currentDate = $(settings.datesDiv).find('a.'+settings.datesSelectedClass);
   if(settings.autoPlayDirection == 'forward') {
      if(currentDate.parent().is('li:last-child')) {
         $(settings.datesDiv+' li:first-child').find('a').trigger('click');
      } else {
         currentDate.parent().next().find('a').trigger('click');
      }
   } else if(settings.autoPlayDirection == 'backward') {
      if(currentDate.parent().is('li:first-child')) {
         $(settings.datesDiv+' li:last-child').find('a').trigger('click');
      } else {
         currentDate.parent().prev().find('a').trigger('click');
      }
   }
}

Je suppose qu'il faut aussi que je mette ce dernier code dans la partie JS de mes modules.

Cependant, à l'heure actuelle, je suis incapable d'aller plus loin. D'où est-ce que j'appelle ce code, et comment ?

Merci à vous, encore. Smile

Felgueran
**

Messages : 53
Inscrit(e) le : 29/10/2004

http://lescitesdecuivre.forumactif.org
Felgueran a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème emplacement Script Timeline JQuery

Message par Felgueran le Dim 16 Nov 2014 - 0:17

Bonjouar ! Smile

Ceci est un rappel que je cherche encore de l'aide. Wink

Merci à vous ! Smile

Felgueran
**

Messages : 53
Inscrit(e) le : 29/10/2004

http://lescitesdecuivre.forumactif.org
Felgueran a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème emplacement Script Timeline JQuery

Message par oxymore le Dim 16 Nov 2014 - 21:06

Bonsoir

Vous donnez la réponse... mettre le script dans gestion des codes javascript
Code:
    /* ----------------------------------
    jQuery Timelinr 0.9.54
    tested with jQuery v1.6+

    Copyright 2011, CSSLab.cl
    Free under the MIT license.
    http://www.opensource.org/licenses/mit-license.php

    instructions: http://www.csslab.cl/2011/08/18/jquery-timelinr/
    ---------------------------------- */

    jQuery.fn.timelinr = function(options){
      // default plugin settings
      settings = jQuery.extend({
          orientation:            'horizontal',      // value: horizontal | vertical, default to horizontal
          containerDiv:            '#timeline',      // value: any HTML tag or #id, default to #timeline
          datesDiv:                '#dates',        // value: any HTML tag or #id, default to #dates
          datesSelectedClass:      'selected',        // value: any class, default to selected
          datesSpeed:            'normal',        // value: integer between 100 and 1000 (recommended) or 'slow', 'normal' or 'fast'; default to normal
          issuesDiv:                '#issues',        // value: any HTML tag or #id, default to #issues
          issuesSelectedClass:      'selected',        // value: any class, default to selected
          issuesSpeed:            'fast',            // value: integer between 100 and 1000 (recommended) or 'slow', 'normal' or 'fast'; default to fast
          issuesTransparency:      0.2,            // value: integer between 0 and 1 (recommended), default to 0.2
          issuesTransparencySpeed:    500,            // value: integer between 100 and 1000 (recommended), default to 500 (normal)
          prevButton:            '#prev',        // value: any HTML tag or #id, default to #prev
          nextButton:            '#next',        // value: any HTML tag or #id, default to #next
          arrowKeys:                'false',        // value: true | false, default to false
          startAt:                1,              // value: integer, default to 1 (first)
          autoPlay:                'false',        // value: true | false, default to false
          autoPlayDirection:          'forward',        // value: forward | backward, default to forward
          autoPlayPause:            2000            // value: integer (1000 = 1 seg), default to 2000 (2segs)
      }, options);

      $(function(){
          // setting variables... many of them
          var howManyDates = $(settings.datesDiv+' li').length;
          var howManyIssues = $(settings.issuesDiv+' li').length;
          var currentDate = $(settings.datesDiv).find('a.'+settings.datesSelectedClass);
          var currentIssue = $(settings.issuesDiv).find('li.'+settings.issuesSelectedClass);
          var widthContainer = $(settings.containerDiv).width();
          var heightContainer = $(settings.containerDiv).height();
          var widthIssues = $(settings.issuesDiv).width();
          var heightIssues = $(settings.issuesDiv).height();
          var widthIssue = $(settings.issuesDiv+' li').width();
          var heightIssue = $(settings.issuesDiv+' li').height();
          var widthDates = $(settings.datesDiv).width();
          var heightDates = $(settings.datesDiv).height();
          var widthDate = $(settings.datesDiv+' li').width();
          var heightDate = $(settings.datesDiv+' li').height();
          // set positions!
          if(settings.orientation == 'horizontal') { 
            $(settings.issuesDiv).width(widthIssue*howManyIssues);
            $(settings.datesDiv).width(widthDate*howManyDates).css('marginLeft',widthContainer/2-widthDate/2);
            var defaultPositionDates = parseInt($(settings.datesDiv).css('marginLeft').substring(0,$(settings.datesDiv).css('marginLeft').indexOf('px')));
          } else if(settings.orientation == 'vertical') {
            $(settings.issuesDiv).height(heightIssue*howManyIssues);
            $(settings.datesDiv).height(heightDate*howManyDates).css('marginTop',heightContainer/2-heightDate/2);
            var defaultPositionDates = parseInt($(settings.datesDiv).css('marginTop').substring(0,$(settings.datesDiv).css('marginTop').indexOf('px')));
          }
         
          $(settings.datesDiv+' a').click(function(event){
            event.preventDefault();
            // first vars
            var whichIssue = $(this).text();
            var currentIndex = $(this).parent().prevAll().length;
            // moving the elements
            if(settings.orientation == 'horizontal') {
                $(settings.issuesDiv).animate({'marginLeft':-widthIssue*currentIndex},{queue:false, duration:settings.issuesSpeed});
            } else if(settings.orientation == 'vertical') {
                $(settings.issuesDiv).animate({'marginTop':-heightIssue*currentIndex},{queue:false, duration:settings.issuesSpeed});
            }
            $(settings.issuesDiv+' li').animate({'opacity':settings.issuesTransparency},{queue:false, duration:settings.issuesSpeed}).removeClass(settings.issuesSelectedClass).eq(currentIndex).addClass(settings.issuesSelectedClass).fadeTo(settings.issuesTransparencySpeed,1);
            // prev/next buttons now disappears on first/last issue | bugfix from 0.9.51: lower than 1 issue hide the arrows | bugfixed: arrows not showing when jumping from first to last date
            if(howManyDates == 1) {
                $(settings.prevButton+','+settings.nextButton).fadeOut('fast');
            } else if(howManyDates == 2) {
                if($(settings.issuesDiv+' li:first-child').hasClass(settings.issuesSelectedClass)) {
                  $(settings.prevButton).fadeOut('fast');
                    $(settings.nextButton).fadeIn('fast');
                }
                else if($(settings.issuesDiv+' li:last-child').hasClass(settings.issuesSelectedClass)) {
                  $(settings.nextButton).fadeOut('fast');
                  $(settings.prevButton).fadeIn('fast');
                }
            } else {
                if( $(settings.issuesDiv+' li:first-child').hasClass(settings.issuesSelectedClass) ) {
                  $(settings.nextButton).fadeIn('fast');
                  $(settings.prevButton).fadeOut('fast');
                }
                else if( $(settings.issuesDiv+' li:last-child').hasClass(settings.issuesSelectedClass) ) {
                  $(settings.prevButton).fadeIn('fast');
                  $(settings.nextButton).fadeOut('fast');
                }
                else {
                  $(settings.nextButton+','+settings.prevButton).fadeIn('slow');
                } 
            }
            // now moving the dates
            $(settings.datesDiv+' a').removeClass(settings.datesSelectedClass);
            $(this).addClass(settings.datesSelectedClass);
            if(settings.orientation == 'horizontal') {
                $(settings.datesDiv).animate({'marginLeft':defaultPositionDates-(widthDate*currentIndex)},{queue:false, duration:'settings.datesSpeed'});
            } else if(settings.orientation == 'vertical') {
                $(settings.datesDiv).animate({'marginTop':defaultPositionDates-(heightDate*currentIndex)},{queue:false, duration:'settings.datesSpeed'});
            }
          });

          $(settings.nextButton).bind('click', function(event){
            event.preventDefault();
            // bugixed from 0.9.54: now the dates gets centered when there's too much dates.
            var currentIndex = $(settings.issuesDiv).find('li.'+settings.issuesSelectedClass).index();
            if(settings.orientation == 'horizontal') {
                var currentPositionIssues = parseInt($(settings.issuesDiv).css('marginLeft').substring(0,$(settings.issuesDiv).css('marginLeft').indexOf('px')));
                var currentIssueIndex = currentPositionIssues/widthIssue;
                var currentPositionDates = parseInt($(settings.datesDiv).css('marginLeft').substring(0,$(settings.datesDiv).css('marginLeft').indexOf('px')));
                var currentIssueDate = currentPositionDates-widthDate;
                if(currentPositionIssues <= -(widthIssue*howManyIssues-(widthIssue))) {
                  $(settings.issuesDiv).stop();
                  $(settings.datesDiv+' li:last-child a').click();
                } else {
                  if (!$(settings.issuesDiv).is(':animated')) {
                      // bugixed from 0.9.52: now the dates gets centered when there's too much dates.
                      $(settings.datesDiv+' li').eq(currentIndex+1).find('a').trigger('click');
                  }
                }
            } else if(settings.orientation == 'vertical') {
                var currentPositionIssues = parseInt($(settings.issuesDiv).css('marginTop').substring(0,$(settings.issuesDiv).css('marginTop').indexOf('px')));
                var currentIssueIndex = currentPositionIssues/heightIssue;
                var currentPositionDates = parseInt($(settings.datesDiv).css('marginTop').substring(0,$(settings.datesDiv).css('marginTop').indexOf('px')));
                var currentIssueDate = currentPositionDates-heightDate;
                if(currentPositionIssues <= -(heightIssue*howManyIssues-(heightIssue))) {
                  $(settings.issuesDiv).stop();
                  $(settings.datesDiv+' li:last-child a').click();
                } else {
                  if (!$(settings.issuesDiv).is(':animated')) {
                      // bugixed from 0.9.54: now the dates gets centered when there's too much dates.
                      $(settings.datesDiv+' li').eq(currentIndex+1).find('a').trigger('click');
                  }
                }
            }
            // prev/next buttons now disappears on first/last issue | bugfix from 0.9.51: lower than 1 issue hide the arrows
            if(howManyDates == 1) {
                $(settings.prevButton+','+settings.nextButton).fadeOut('fast');
            } else if(howManyDates == 2) {
                if($(settings.issuesDiv+' li:first-child').hasClass(settings.issuesSelectedClass)) {
                  $(settings.prevButton).fadeOut('fast');
                    $(settings.nextButton).fadeIn('fast');
                }
                else if($(settings.issuesDiv+' li:last-child').hasClass(settings.issuesSelectedClass)) {
                  $(settings.nextButton).fadeOut('fast');
                  $(settings.prevButton).fadeIn('fast');
                }
            } else {
                if( $(settings.issuesDiv+' li:first-child').hasClass(settings.issuesSelectedClass) ) {
                  $(settings.prevButton).fadeOut('fast');
                }
                else if( $(settings.issuesDiv+' li:last-child').hasClass(settings.issuesSelectedClass) ) {
                  $(settings.nextButton).fadeOut('fast');
                }
                else {
                  $(settings.nextButton+','+settings.prevButton).fadeIn('slow');
                } 
            }
          });

          $(settings.prevButton).click(function(event){
            event.preventDefault();
            // bugixed from 0.9.54: now the dates gets centered when there's too much dates.
            var currentIndex = $(settings.issuesDiv).find('li.'+settings.issuesSelectedClass).index();
            if(settings.orientation == 'horizontal') {
                var currentPositionIssues = parseInt($(settings.issuesDiv).css('marginLeft').substring(0,$(settings.issuesDiv).css('marginLeft').indexOf('px')));
                var currentIssueIndex = currentPositionIssues/widthIssue;
                var currentPositionDates = parseInt($(settings.datesDiv).css('marginLeft').substring(0,$(settings.datesDiv).css('marginLeft').indexOf('px')));
                var currentIssueDate = currentPositionDates+widthDate;
                if(currentPositionIssues >= 0) {
                  $(settings.issuesDiv).stop();
                  $(settings.datesDiv+' li:first-child a').click();
                } else {
                  if (!$(settings.issuesDiv).is(':animated')) {
                      // bugixed from 0.9.54: now the dates gets centered when there's too much dates.
                      $(settings.datesDiv+' li').eq(currentIndex-1).find('a').trigger('click');
                  }
                }
            } else if(settings.orientation == 'vertical') {
                var currentPositionIssues = parseInt($(settings.issuesDiv).css('marginTop').substring(0,$(settings.issuesDiv).css('marginTop').indexOf('px')));
                var currentIssueIndex = currentPositionIssues/heightIssue;
                var currentPositionDates = parseInt($(settings.datesDiv).css('marginTop').substring(0,$(settings.datesDiv).css('marginTop').indexOf('px')));
                var currentIssueDate = currentPositionDates+heightDate;
                if(currentPositionIssues >= 0) {
                  $(settings.issuesDiv).stop();
                  $(settings.datesDiv+' li:first-child a').click();
                } else {
                  if (!$(settings.issuesDiv).is(':animated')) {
                      // bugixed from 0.9.54: now the dates gets centered when there's too much dates.
                      $(settings.datesDiv+' li').eq(currentIndex-1).find('a').trigger('click');
                  }
                }
            }
            // prev/next buttons now disappears on first/last issue | bugfix from 0.9.51: lower than 1 issue hide the arrows
            if(howManyDates == 1) {
                $(settings.prevButton+','+settings.nextButton).fadeOut('fast');
            } else if(howManyDates == 2) {
                if($(settings.issuesDiv+' li:first-child').hasClass(settings.issuesSelectedClass)) {
                  $(settings.prevButton).fadeOut('fast');
                    $(settings.nextButton).fadeIn('fast');
                }
                else if($(settings.issuesDiv+' li:last-child').hasClass(settings.issuesSelectedClass)) {
                  $(settings.nextButton).fadeOut('fast');
                  $(settings.prevButton).fadeIn('fast');
                }
            } else {
                if( $(settings.issuesDiv+' li:first-child').hasClass(settings.issuesSelectedClass) ) {
                  $(settings.prevButton).fadeOut('fast');
                }
                else if( $(settings.issuesDiv+' li:last-child').hasClass(settings.issuesSelectedClass) ) {
                  $(settings.nextButton).fadeOut('fast');
                }
                else {
                  $(settings.nextButton+','+settings.prevButton).fadeIn('slow');
                } 
            }
          });
          // keyboard navigation, added since 0.9.1
          if(settings.arrowKeys=='true') {
            if(settings.orientation=='horizontal') {
                $(document).keydown(function(event){
                  if (event.keyCode == 39) {
                      $(settings.nextButton).click();
                    }
                  if (event.keyCode == 37) {
                      $(settings.prevButton).click();
                    }
                });
            } else if(settings.orientation=='vertical') {
                $(document).keydown(function(event){
                  if (event.keyCode == 40) {
                      $(settings.nextButton).click();
                    }
                  if (event.keyCode == 38) {
                      $(settings.prevButton).click();
                    }
                });
            }
          }
          // default position startAt, added since 0.9.3
          $(settings.datesDiv+' li').eq(settings.startAt-1).find('a').trigger('click');
          // autoPlay, added since 0.9.4
          if(settings.autoPlay == 'true') {
            setInterval("autoPlay()", settings.autoPlayPause);
          }
      });
    };

    // autoPlay, added since 0.9.4
    function autoPlay(){
      var currentDate = $(settings.datesDiv).find('a.'+settings.datesSelectedClass);
      if(settings.autoPlayDirection == 'forward') {
          if(currentDate.parent().is('li:last-child')) {
            $(settings.datesDiv+' li:first-child').find('a').trigger('click');
          } else {
            currentDate.parent().next().find('a').trigger('click');
          }
      } else if(settings.autoPlayDirection == 'backward') {
          if(currentDate.parent().is('li:first-child')) {
            $(settings.datesDiv+' li:last-child').find('a').trigger('click');
          } else {
            currentDate.parent().prev().find('a').trigger('click');
          }
      }
    }

A la suite vous pouvez mettre la config de la timeline
par exemple
Code:
$(function(){
         $().timelinr({
            orientation:    'vertical',
            issuesSpeed:    300,
            datesSpeed:    100,
            arrowKeys:       'true',
            startAt:      3
         })
      });

puis le CSS correspondant dans le CSS
et la partie HTML ou vous voulez l'effet.


oxymore
**

Messages : 96
Inscrit(e) le : 09/11/2008

http://www.google.fr
oxymore a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème emplacement Script Timeline JQuery

Message par Felgueran le Lun 17 Nov 2014 - 20:32

Ah...

Effectivement quand je regarde dans le dossier téléchargé j'ai aussi le CSS.

C'était donc un magnifique manque de jugeote. Wink

Merci.

Je marque ce message comme résolu, en espérant ne pas avoir encore besoin de revenir par ici pour ce sujet. Smile

Cordialement !

Felgueran
**

Messages : 53
Inscrit(e) le : 29/10/2004

http://lescitesdecuivre.forumactif.org
Felgueran 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