Problème emplacement Script Timeline JQuery

[Felgueran]

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 )

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.

[Felgueran]

Bonsoir !

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 :

Deuxième partie, création de la Timeline :

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 :

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.

[Felgueran]

Bonjouar !

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

Merci à vous !

[oxymore]

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.

[Felgueran]

Ah...

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

C'était donc un magnifique manque de jugeote.

Merci.

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

Cordialement !