Piwigo.org

augras · 2020-12-28 18:06:52

Bonsoir,

Je ne sais pas si cela tient à Piwigo lui-même ou au thème utilisé mais je souhaite ajouter des boutons pour aller directement en bas de page et en haut de page quand je suis sur une page de vignettes d'albums ou de photos.
Peut-être qu'il y a déjà une case à cocher quelque part pour cela mais je ne l'ai pas trouvée. Si oui merci de m'indiquer où elle se trouve.
Il existe des solutions simples en javascript ou en jquery pour faire cela.
J'utilise le thème GreyDragon 1.3.3.
Il faudrait utiliser plutôt le javascript ou le jquery ? Intervenir au niveau du thème ou plutôt de piwigo ?

Merci pur vos retours,
Philippe

Version de Piwigo: 2.10.2
Version de PHP: 7.3.6
Version de MySQL: 10.3.27-MariaDB
URL Piwigo: https://augras.eu/piwigo

augras · 2020-12-28 19:16:20

Bonsoir,

Je me réponds dans l'éventualité où il n'existe pas une case à cocher j'ai appliqué une solution que j'avais déjà mise en place par ailleurs.

Je suis intervenu au niveau du thème GreyDragon.
En premier dans l'interface de gestion du thème dans le champ Custom css où j'ai mis le code suivant (bien enregistrer les modifications) :

Code:

/*---------------------------------------
   ajout bouton scroll-down/scroll-top
----------------------------------------*/
.scroll-page {
  font-size: 20px;
  background-color: #000000; /* Scroll bg color */
  border-radius: 3px;
  color: #ffffff;
  opacity: 1;
  position: fixed;
  right: 25px;
  bottom: 25px;
  z-index: 9999;
  display: none;
  cursor: pointer;
}

.scroll-page i {
  background: url('sprite.png'); /* PNG fallback */
  background-image: url('sprite.svg'); /* SVG image */
  background-repeat: no-repeat;
  color: inherit;
  display: block;
  width: 38px;
  height: 35px;
  padding: 15px;
}


.scroll-page .scroll-up {
  background-position: -26px 10px;
  padding-bottom: 5px;
        opacity: 0.6;
}

.scroll-page .scroll-down {
  background-position: 10px 5px;
  padding-top: 5px;
        opacity: 0.6;
}

.scroll-up:hover {
  opacity: 1;
}

.scroll-down:hover {
  opacity: 1;
}
.scroll-page:hover {
  opacity: 1;
}

.rtl .scroll-page {
  right: auto;
  left: 25px;
}

@media only screen and (max-width: 800px), only screen and (max-device-width: 800px) {
  .scroll-page {
    display: none !important;
  }
}

A noter les 2 lignes :

Code:

background: url('sprite.png'); /* PNG fallback */
  background-image: url('sprite.svg'); /* SVG image */

Il y a besoin de 2 fichiers pour les icônes des flèches up et down, sprite.png et sprite.svg : avec le code tel quel ces fichiers doivent se trouver au même endroit que le fichier custom.css créé soit /local/greydragon.

Ensuite j'ai modifié le fichier /themes/greydragon/template/header.tpl après la première ligne du body, ligne 118, en ajoutant le code suivant :

Code:

<!-- bouton scroll-up/scroll-down à la place de celui d'origine -->
<div class="scroll-page">
  <i class="scroll-up"></i>
  <i class="scroll-down"></i>
</div>

<script>

(function($) { // Avoid conflicts with other libraries

'use strict';

$(function() {
  var settings = {
      min: 150,
      scrollSpeed: 400
    },
    button = $('.scroll-page'),
    buttonHidden = true;

  $(window).scroll(function() {
    var pos = $(this).scrollTop();
    if (pos > settings.min && buttonHidden) {
      button.stop(true, true).fadeIn();
      buttonHidden = false;
    } else if(pos <= settings.min && !buttonHidden) {
      button.stop(true, true).fadeOut();
      buttonHidden = true;
    }
  });

  var scrollPage = function() {
    $('html, body').animate({
      scrollTop: ($(this).hasClass('scroll-up')) ? 0 : $(document).height()
    }, settings.scrollSpeed);
  };

  $('.scroll-page > i').bind('click touchstart', scrollPage);
});

})(jQuery);

</script>

Je ne trouve pas la possibilité de joindre un fichier.

Ce code n'est pas de moi : je l'ai trouvé sur internet il y a un certain temps parmi plein d'autres possibilités.

Philippe

Dernière modification par augras (2020-12-29 16:53:47)

augras · 2021-01-10 15:01:25

Pour ceux qui mettraient en pratique il y a dans le css le code

Code:

@media only screen and (max-width: 800px), only screen and (max-device-width: 800px) {
  .scroll-page {
    display: none !important;
  }

qui signifie que sur les écrans avec une résolution ou une fenêtre de moins de 800px les boutons de scroll ne seront pas affichés.
Franchement, même sur un petit smartphone ces boutons ne sont pas gênants : il suffit de commenter ce code ou tout simplement de le supprimer pour que les boutons soient toujours présents.

Guillaume C · 2021-01-10 19:17:11

Bonjour,
Plus simple : https://fr.piwigo.org/doc/doku.php?id=p … oll_to_top

dreamer · 2021-01-11 14:23:49

Guillaume C a écrit:
Bonjour,
Plus simple : https://fr.piwigo.org/doc/doku.php?id=p … oll_to_top

Bonjour

Je viens de l'essayer, mais ne fonctionne pas avec le Thème Darkroom ...

A+

Guillaume C · 2021-01-11 18:04:36

Bien sûr que si.
As-tu hébergé l'image de la flèche et indiqué le bon chemin ?

dreamer · 2021-01-11 20:58:58

Guillaume C a écrit:
Bien sûr que si.
As-tu hébergé l'image de la flèche et indiqué le bon chemin ?

Je fais mon mea culpa, une erreur dans le chemin (images en lieu et place d'img !!)

Merci pour ton aide !!

augras · 2021-01-16 12:06:37

Guillaume C a écrit:
Bonjour,
Plus simple : https://fr.piwigo.org/doc/doku.php?id=p … oll_to_top

Bonjour,
Merci beaucoup.
Il faut que j'adapte le code pour procéder de cette façon qui est vraiment très pratique et ne limite pas à un seul thème.
Je souhaite avoir la possibilité de scroll down.
Et avec l'ajout du code ci-dessous on peut en plus arrêter le scroll dans un sens ou dans l'autre comme on veut.

J'ai ajouté au code

Code:

<!-- STOP scroll-up/scroll-down dès que scroll de la page clic dans la page scroll avec molette de la souris appuie sur une touche du clavier -->
  $('html, body').bind('scroll mousedown DOMMouseScroll mousewheel keyup', function(){
    $('html, body').stop();
  });

Il faut le mettre juste après

Code:

$('.scroll-page > i').bind('click touchstart', scrollPage);

Apparemment impossible d'éditer mon premier message donc je ne peux pas le modifier pour cet ajout.

J'espère arriver à faire fonctionner ce scroll aussi simplement que celui indiqué par Guillaume C

augras · 2021-01-16 14:20:13

ça commence mal !
Il y a manifestement quelque chose que je ne fais pas correctement pour utiliser les plugins personnels : rien n'est pris en compte.
Dans le plugin localfileseditor je vais dans l'onglet Plugin personnel dont l'éditeur affiche déjà les balises php et je place le code entre ses balises puis j'enregistre : aucun effet.
Si je prends par exemple dans la page donné par Guillaume C le code pour ne pas afficher le compteur dans le fil d'ariane, il n'y a rien à modifier et l'effet devrait être immédiat, j'ai dans l'onglet :

Code:

<?php
/*
Plugin Name: Remove breadcrumb photocounter
Version: 1.0
Author: barbichou
*/
 
add_event_handler('loc_end_index', 'no_breadcrumb_counter');
function no_breadcrumb_counter()
{
  global $template;
  $titre = $template->get_template_vars('TITLE');
  $pos = strrpos($titre,"[");
  if ($pos !== false)
  {
    $template->assign('TITLE', substr($titre, 0, $pos));
  }
}

?>

J'en ai testé plusieurs y compris celui pour le scroll mais rien de rien !
Qu'est-ce que je rate ?
Merci,
Philippe

augras · 2021-01-16 14:51:39

C'est bon, je viens de trouver par hasard !
C'est vraiment bien fait en fait : on a carrément un nouveau plugin qui apparaît dans la liste des plugins et il faut l'activer comme tout plugin... encore faut-il le savoir.
Je me remets au boulot.

augras · 2021-01-16 18:35:55

Désolé mais ça dépasse mes capacités : le scroll top fonctionne mais pas le scroll down ni les arrêts du scroll.
Mais du coup j'ai découvert les templates et ainsi je ne modifie pas directement le fichier header.tpl.

Piwigo.org

Annonce

#1 2020-12-28 18:06:52

boutons bas de page/haut de page

#2 2020-12-28 19:16:20

Re: boutons bas de page/haut de page

Code:

Code:

Code:

#3 2021-01-10 15:01:25

Re: boutons bas de page/haut de page

Code:

#4 2021-01-10 19:17:11

Re: boutons bas de page/haut de page

#5 2021-01-11 14:23:49

Re: boutons bas de page/haut de page

Guillaume C a écrit:

#6 2021-01-11 18:04:36

Re: boutons bas de page/haut de page

#7 2021-01-11 20:58:58

Re: boutons bas de page/haut de page

Guillaume C a écrit:

#8 2021-01-16 12:06:37

Re: boutons bas de page/haut de page

Guillaume C a écrit:

Code:

Code:

#9 2021-01-16 14:20:13

Re: boutons bas de page/haut de page

Code:

#10 2021-01-16 14:51:39

Re: boutons bas de page/haut de page

#11 2021-01-16 18:35:55

Re: boutons bas de page/haut de page

Pied de page des forums