Forum AlphaDxD

Bonjour,

Comme beaucoup j'ai opté pour une solution wordpress pour designer et gérer mon site web (http://apvl.ch cliquez sur f12 pour voir le code source).
Wordpress à l'avantage de facilement pouvoir ajouter des images, créer des galeries et des pages. Il permet aussi d'avoir une interface utilisateur (pouvoir poster des commentaires). Pleins de truc compliqué à mettre en place si on ne s'y connaissez pas en webdesign (comme moi '^^).

Wordpress est gratuit, on peut ensuite choisir un thème qui nous plait ou en trouver un sur le web. J'en ai trouver un gratuit avec pleins de défauts ici: http://demo.templatypus.com/phogra/

L'avantage c'est que la plupart des fonctions sont effectuées dans un fichier jquery. C'est plus ou moins du javascript (je ne sais pas plus que ca) mais ca ressemble pas mal a de la programmation classique type java (que je connais un peu par ma formation, mais c'est un language très simple). J'y ai pris un peu gout et j'ai commencé à bidouiller pour personnaliser mon thème gratuit piqué sur le web pour le personnaliser et pour qu'il réponde a mes exigences.

Je fais ce topic pour parler un peu du jquery et pour résoudre des problèmes lié à ce language ensemble.

Voici quelques modifications que j'ai fais sur ce template

suppression de l'image qui bouge avec le mouvement de la souris

Code : Tout sélectionner

   $(window).load(function(){
         AlignSliderImages(slider, sliderImages);
         SliderInit();
      }).resize(function(){
         slider.height($(window).height());
         AlignSliderImages(slider, sliderImages);
old      }).mousemove(function(e){
         if (imagesAreAligned)
         {
            var r = (e.clientY * 100 / $(window).height());
            sliderHolder.css({ 
               'top': (40 * (100-r) / 100),
               'bottom': (40 * r / 100) 
            });
         }
      });

le code si dessus est effectué lors du premier chargement de la page. Celui-ci est relativement lent car il charge d'abord toutes les images avant de les afficher.

Pour accélérer le processus j'ai remarqué qu'il y avait une variable qui définissait le nombre d'image a charger avant de les afficher. Je l'ai donc mis à 1 afin d'afficher les images dès que la première est chargée. Ça divise le temps de chargement par 5.

Code : Tout sélectionner

old var totalImagesToBeLoaded = 5;
var totalImagesToBeLoaded = 1;
[...]
var queuedImagesToBeLoaded = 0;
      slider.find("img").each(function(){
         if (queuedImagesToBeLoaded++ < totalImagesToBeLoaded)
         {
            Preloader.Instance.AddImageInQueue($(this).attr('src'));
         }
      });

Cependant le redimensionnement des images ne ce fait qu'une fois toutes les images chargées. Ce qui a pour conséquence d'avoir une image qui dépasse de l'écran pendant ce labs de temps (qui peut être relativement lent selon la compression des images, le nombre et surtout la connexion internet). Il faudrait donc modifier l'ordre des actions effectuée dans la liste chaînée de la méthode. Mais comme je n'ai pas les connaissance en jquery pour bidouiller le code a cette profondeur technique j'ai "juste" simuler un redimensionnement de la page lorsque la première image est sélectionnée. La simulation du redimensionnement de la page est une méthode qui appel une autre méthode qui calcul le rapport hauteur/largeur de l'écran et redimensionne les images en fonction.

Code : Tout sélectionner

var LoadImages = Preloader.Instance.LoadImages = function()
         {
            for (var i in images)
            {
               var image = new Image(1,1);
               image.src = images[i];
               queue.push(image);
            }
            
            for (var i in queue)
            {
               queue[i].onload = function()
               {
                  
                  var width = ++loaded / queue.length;
                  preloaderProgress.width(width * preloader.width());
                  if (width == 1)
                  {
                     setTimeout('Preloader.Instance.HidePreloader()', 1000);
                     //permet d'avoir une galerie opérationnel dès la première image chargée
                     $(window).resize();
                  };   
               }
            }
         };

J'ai aussi fais quelque modification dans le fichier CSS pour avoir le menu transparent. Et j'ai aussi attribué le déplacement sur la droite a certains objets en particulier (flèche sur la gauche) pour pas que tous le site ne se décale a gauche.

J'ai ensuite mis une petite sécurité sur le site pour que l'on ne puisse pas prendre facilement les images. J'entends par là que si l'on essaye de prendre les images on le fait en connaissance de cause. Je n'ai pas essayé de rendre mes images involable (il suffirait de faire une capture d'écran d'ailleur...) mais juste que celui qui essaie voit un message disant que ce n'est pas cool ce qu'il fait.
Pour ce faire j’empêche le clique gauche pour faire un drag and drop et j’empêche le click droit pour faire un copier coller. J'en profite du click droit pour afficher un petit message rendant attentif l'utilisateur sur les droit d'images.

Code : Tout sélectionner

// click
      $('img').on('contextmenu', function(e){
         alert('© 2016 LIONEL FAVRE : les images de ce site ne sont pas libres de droit, merci de bien vouloir respecter l\'auteur sur ce point!')
         return false; });
      $('#slider').bind('click mousedown dblclick',function(e){
      e.preventDefault()
      e.stopImmediatePropagation()
      });
      $('#about-background').bind('click mousedown dblclick',function(e){
      e.preventDefault()
      e.stopImmediatePropagation()
      });

Pour l'instant j'affiche les messages avec des alert() jquery ce qui n'est pas très sexy et qui paralyse le site. A terme je ferais apparaître ses messages avec un div invisible qui apparaîtra durant quelques secondes. Mais pour cela il faut toucher les fichiers PHP et c'est une mécanique que je ne connais pas encore...

le temps entre les images du diaporama était par défaut à 5sec et je le trouvais trop rapide. J'ai donc modifié cette valeur en ajoutant une variable permettant ainsi de change le temps facilement (la variable se trouve tout en haut du code) et permetant aussi d'être modifiée par l'utilisateur (cf plus bas)

Code : Tout sélectionner

   function SliderInit()
      {
         window.sliderIntervalId = setInterval(function(){
            var currentSlide = sliderHolder.children('.active');
            var currentSlideIndex = currentSlide.index();
            var nextSlide = sliderSlides.eq(++currentSlideIndex >= sliderSlides.length ? 0 : currentSlideIndex);
            Slide(currentSlide, nextSlide);
         }, 5000);   
      }

Code : Tout sélectionner

// ajout d'une variable pour le temps entre chaque image du diapo en seconde (1sec = 1000) (d�faut = 5000)
      var timeBetweenPicutres = 6000;

   function SliderInit()
      {
         window.sliderIntervalId = setInterval(function(){
            var currentSlide = sliderHolder.children('.active');
            var currentSlideIndex = currentSlide.index();
            var nextSlide = sliderSlides.eq(++currentSlideIndex >= sliderSlides.length ? 0 : currentSlideIndex);
            Slide(currentSlide, nextSlide);
         }, timeBetweenPicutres); /*variable ajoutée. Par défaut = 5000 */
      }

Il y a aussi la possibilité de lancer plusieurs thread (actions en parallèle) en jquery. Je l'ai utilisé pour afficher un message sur la page d'acceuil a l'utilisateur pour lui indiquer le menu et quelques autres informations

Code : Tout sélectionner

//après une tempo le text indication disparait
      function indicationOn(){
         if (firstTime) {
            $("#home-content").css('opacity','1');
         }
      }
      setTimeout(indicationOn, 6000);
      
      function indicationOff(){
      $("#home-content").css('opacity','0');
      }
      setTimeout(indicationOff, 12000);

Cela modifie directement le css et permet de change l'opacité. A terme je ferais affiché cette information que lors de la première visite. Mais pour ce faire je dois utiliser des cookis et je ne connais pas encore la mécanique des cookis mais ça viendra :)

En jquery il est possible de détecter lorsqu'une touche du clavier est cliqué. Chaque touche a un code http://www.cambiaresearch.com/articles/ ... -key-codes et en fonction du code on peut discriminé la touche qui a été activée et lui attribuer une fonction/méthode. Vu que je vais implémenté une même fonction a plusieur endroit j'ai créer des méthodes pour les fonctions principales pour le visionnement des images. Par exemple l'action "passer a l'image suivante" peut être effectuée en appuyant sur la touche droite ou en cliquant avec la souris sur la flèche de droit ou en faisant glisser l'image sur la gauche sur un clavier tactile (pas encore implémenté). J'en ai profité pour créer une nouvelle action "pause" (il faut modifier le css et pas mal de fichier pour ajouter le bouton). Je permet aussi de modifier la variable du temps entre les images avec les touches + et - ou les flèches.

Code : Tout sélectionner

// actions sur le défilement des images des galeries
      function next(){
      if (!isSliding){
         clearInterval(window.sliderIntervalId);
         var currentSlide = sliderHolder.children('.active');
         var currentSlideIndex = currentSlide.index();
         var nextSlide = sliderSlides.eq(++currentSlideIndex >= sliderSlides.length ? 0 : currentSlideIndex);
         Slide(currentSlide, nextSlide);
   
         clearInterval(window.sliderIntervalId);
         isPause = true;   
         $('.slider-pause').addClass('is-paused');
         }
      }
      
      function prev(){
      if (!isSliding){
         clearInterval(window.sliderIntervalId);
         var currentSlide = sliderHolder.children('.active');
         var currentSlideIndex = currentSlide.index();
         var nextSlide = sliderSlides.eq(--currentSlideIndex < 0 ? (sliderSlides.length-1) : currentSlideIndex);
         Slide(currentSlide, nextSlide);
            
         //met en pause si l'on bouge manuelement
         clearInterval(window.sliderIntervalId);
         isPause = true;  
         $('.slider-pause').addClass('is-paused');
         }
      }
      
      function pause(){
         if (!isSliding){
            if (isPause) {
               SliderInit();
               isPause = false;
               /* $ ou jQuery selon impl�mentation */
               $('.slider-pause').removeClass('is-paused');/*on sort de la pause, on enleve la class du coup l'image initiale reapparait*/
            }else{
               clearInterval(window.sliderIntervalId);
               isPause = true;  
               $('.slider-pause').addClass('is-paused');/*en pause, on ajoute la classe avec l'autre image qui remplace l'ancienne*/
            }   
         }
      }
      
      function back() {
         history.go(-1);
      }
      
      //augmente le temps entre les images de une seconde
      function timeUp(){
         timeBetweenPicutres = timeBetweenPicutres + 1000;
            clearInterval(window.sliderIntervalId);
            SliderInit();
            isPause = false;
            alert('temps inter-image = ' + timeBetweenPicutres/1000 + ' secondes');
      }
      
      //diminue le temps entre les images de une seconde
      function timeDown(){
         if (timeBetweenPicutres != 1000) {
               timeBetweenPicutres = timeBetweenPicutres - 1000;
               clearInterval(window.sliderIntervalId);
               SliderInit();
               isPause = false;
               alert('temps inter-image = ' + timeBetweenPicutres/1000 + ' secondes');
               
            } else{
               alert('temps inter-image min = 1sec');
            }
      }

J'ai donc attribuer les différentes méthodes a différentes touches avec des switch case

Code : Tout sélectionner

//gestion des touches de navigation
      $(document).keydown(function(touche){ // on écoute l'évènement keyup()
          var appui = touche.which || touche.keyCode; // le code est compatible tous navigateurs grâce à ces deux propriétés

          firstTime = false;
          
          switch (appui) {
            
            case 13: //enter et space = pause
            pause();
            break;
         
            case 32:
            pause();
            break;
         
            case 37://gauche = précédent
            prev();
            break;
         
            case 39://droite = suivant
            next();
            break;
         
            case 46: //del = quitter la galerie
            back();
            break;
         
            case 38: //+ et fleche up = augmenter le temps diapo
            timeUp();
            break;
         
            case 107:
            timeUp();
            break;
         
            case 40: //- et fleche down = augmenter le temps diapo
            timeDown();
            break;
         
            case 109:
            timeDown();
            break;
            
            default:   
            firstTime = true;
          }
      
      });
      
      $(document).keyup(function(touche){
         //obligé de faire keyup car esc anule l'action en cours
          var appui = touche.which || touche.keyCode;
         if (appui == 27) { //esc = quitter la galerie
            back();
         }
      });

Il y a une petite variante avec la touche esc car elle annule l'action en cours. De ce fait je suis obligé d'effectuer la méthode lors du relâchement du bouton.

Voila dans les grandes lignes les modifications majeur que j'ai apporté à ce thème wordpress. J'espère que ces exemples vous permettrons de comprendre un peu la mécaniques du jquery et vous permettra a votre tour de personnaliser votre template.

Si vous voulez voir l'entier du code jquery vous pouvez aller ici: http://apvl.ch et cliquer sur f12 (sous chrome) et aller dans les sources. (vous pourrez aussi trouver les adresses de mes images, c'est pour dire qu'il est très simple de télécharger les images même si on empêche le click droit de la souris).

Je vous propose d'utiliser ce topic pour poser des questions sur le language jquery. J'en ai déjà plusieurs d'ailleur :)

Une question concernant les plugin jquery

Je voudrais pouvoir récupérer les informations tel qu'un doigt qui glisse sur un écran tactile afin d'afficher l'image suivante par exemple (ou en cas de double tapotement que je mette le diaporama en pause etc).

Mais lorsque je tente de mettre des fonctions de type:

Code : Tout sélectionner

$('#slider').swipe({
      swipe: function(event, direction, distance, duration, fingerCount) {
          if (direction=='left') {
            alert('gauche');
         } 
       }
      })

ou

Code : Tout sélectionner

$(document).on("swipe",function(){
      alert('touché');
      });
      
      
      $(document).wipetouch({
         tapToClick: true, // if user taps the screen, triggers a click event
         wipeLeft: function(result) { alert('left'); },
         wipeRight: function(result) { alert('gauche'); }
      });

ou

Code : Tout sélectionner

$(document).swipe({
         swipeStatus:function(event, phase, direction, distance, duration, fingers){
         if (direction =="right") {
                           alert('droite');
         }
         if (direction =="left") {
                          alert('gauche');
         }
                  }
          });

Il me dit que les fonctions n'existent pas. Ou pire tout le site bug :S J'ai bien essayé d'écrire dans le header.php des trucs type:

Code : Tout sélectionner

<script type="text/javascript" src="js/jquery.touchSwipe.min.js"></script>

Mais sans succes, il me dit qu'il ne trouve pas le fichier (je sais pas trop le mettre d'ailleur...). J'ai tenté de suivre cette procédure: https://github.com/mattbryson/TouchSwipe-Jquery-Plugin Si quelqu'un a une idée je suis preneur :)

Merci :)

Forum AlphaDxD

modification jquery template wordpress

modification jquery template wordpress

Re: modification jquery template wordpress