Aller au contenu
Support de Zwii
Seb

Alternatives à Swiper (diaporamas/carrousels)

Messages recommandés

Hello !

C'est très sympa toute cette émulation, j'avoue avoir peu de temps pour Zwii, à fortiori pour vos projets, mais cela ne signifie pas que je m'en désintéresse.

Lorsque j'en aurai le temps, je testerai tous vos projets.

Pour répondre à la question voici le code utilisé pour le nettoyage de swipper :

			if (is_dir('core/vendor/swiper')) {
				$dir = getcwd();
				chdir('core/vendor/swiper');
				$files = glob('*');
				foreach($files as $file) unlink($file);
				chdir($dir);
				rmdir ('core/vendor/swiper/');
			}

1/ Sauver le dossier dossier en cours

2/ Changer le dossier courant

3/ le filtre stocké dans $file

4/ parcourir le tableau et effacer le fichier trouvé

5/ restaurer le dossier de départ (pour la fin de boucle)

6/ effacer le dossier

 

Le 4 devra être développé afin de fllter les extensions des fichiers images (à placer dans une constante en tête de code)

 

Partager ce message


Lien à poster
Partager sur d’autres sites

Merci @roger,

tu es expert en CSS

 

il y a 28 minutes, roger a dit :

Tu peux aussi créer directement le fichier css pour le #wrapper et juste indiquer son chemin dans le head à la place de devoir l'y copier sous sa forme actuelle;

 

Je préfère conserver la structure d'un module Zwii avec un seul fichier css : /view/index/index.css, son chargement est automatique à l'appel de la page /view/index/index.php !

Je ne copie absolument pas ce fichier css, Cétautomatix !

Partager ce message


Lien à poster
Partager sur d’autres sites
Il y a 12 heures, roger a dit :

Dans le fichier slider.php tu as commenté (par /* et */) des lignes depuis celle n° 215 à celle n° 275. Si elles ne servent plus à rien, tu peux les effacer...puisque ton script prend la main sur celui de la galerie dont tu t'es basé pour écrire ce fichier.

Bonjour @roger,

 

Ma recherche n'en est qu'au début, c'est pour ça que je préfère commenter plutôt qu'effacer.

Il y a 13 heures, roger a dit :

Sous la ligne n° 147 tu ajoutes ceci :

 padding-left: 0px;

J'ai fait la modification et validé cette amélioration, merci beaucoup, c'est très satisfaisant.

 

 

Il y a 13 heures, roger a dit :

et c'est Normalix vu que tu l'as insclus dans le head du common.php

 

Non, pas du tout. Le chargement de la page slider/view/index/index.css est réalisé automatiquement à l'ouverture (appel) de la page slider/view/index/index.php, c'est magix et très pratix. (par contre ça augmente le temps d'exécution car c'est rechargé à chaque fois).

 

C'est pour ça que j'essaye de respecter scrupuleusement la structure d'un module Zwii

Je ne fais aucune modification des fichiers existants,

Je n'écris rien de manière forcée dans le header,

Je ne place pas du css associé au slider dans custom.css,

Je place tout le javacript et jquery dans slider/vendor/js,

 

Bref, je n'écris ni ne modifie RIEN en dehors du dossier module/slider.

 

Bonne journée

 

Sylvain

 

 

 

 

Partager ce message


Lien à poster
Partager sur d’autres sites

Bonjour @Fred,

 

Il y a 20 heures, sylvainlelievre a dit :

L'idée est de partir sur le module Gallery et de le modifier pour en faire un module slider grâce auquel il suffira de pointer, en configuration du module, sur un dossier contenant des images pour créer un diaporama dans la page. Comme avec Gallery on pourra, avec tinymce placer du texte au dessus et/ou en dessous.

 

Il y a 17 heures, Fred a dit :

Pour répondre à la question voici le code utilisé pour le nettoyage de swipper :


			if (is_dir('core/vendor/swiper')) {
				$dir = getcwd();
				chdir('core/vendor/swiper');
				$files = glob('*');
				foreach($files as $file) unlink($file);
				chdir($dir);
				rmdir ('core/vendor/swiper/');
			}

1/ Sauver le dossier dossier en cours

2/ Changer le dossier courant

3/ le filtre stocké dans $file

4/ parcourir le tableau et effacer le fichier trouvé

5/ restaurer le dossier de départ (pour la fin de boucle)

6/ effacer le dossier

 

Le 4 devra être développé afin de fllter les extensions des fichiers images (à placer dans une constante en tête de code)

 

Je ne sais pas si ton post répondait au mien, placé au dessus, ou s'il était plus général.

Je pars de Gallery pour utiliser la sélection de dossier, l'ajout de légende et mon premier travail consiste à comprendre son fonctionnement interne pour ensuite l'adapter. Long chemin probablement !

 

Bonne journée

 

Sylvain

Partager ce message


Lien à poster
Partager sur d’autres sites

La taille du slider s'adapte maintenant à la fenêtre du client, c'était obligatoire pour les grands écrans sur lesquels le slider n'était pas centré et où la zone  de navigation "page suivante" s'étendait à droite de l'image. De plus ça améliore la lisibilité sur les petits écrans.

C'est le fichier slider/vendor/js/init.js qui est modifié et seulement lui.

 

ça fonctionne à l'ouverture de la page ou à sa réactualisation.

 

Nouvelle archive.

Résultat :

https://www.vivreenborddebaie.fr/dev9/?rslides

 

 

 

slider_v13.zip

Modifié par sylvainlelievre
Mise à jour de l'archive le 25/9/2019
  • J'aime 1

Partager ce message


Lien à poster
Partager sur d’autres sites

Bonjour @Gilux @augras @Seb, @Fred, @roger

 

Voici la version 2 du module Slider basé sur Gallery et sur responsiveslides

 

Pour créer un diaporama aucune saisie de code html n'est plus nécessaire, c'est automatique.

Il suffit de sélectionner un dossier en mode configuration du module, comme ce que vous avez l'habitude de faire et si vous le souhaitez de saisir des légendes pour les images.

 

1 - Charger vos photos avec rfm ou par ftp dans site/file/source/votre_dossier/votre_sousdossier_eventuel

2 - Installer par FTP le contenu de l'archive ci-jointe dans le dossier module (et non core/module)

3 - Nouvelle page, du texte au dessus (pour l'instant), configurer le module slider en sélectionnant le dossier et en ajoutant éventuellement des légendes.

 

Pour pouvoir saisir du texte au dessus et/ou en dessous du slider il faudra que ce module dispose de la même possibilité de choix que le module Gallery. Je crois que j'aurai besoin de @Fred .

 

Résultat visible sur mon site de dev mais c'est en l'installant que vous pourrez tester ses possibilités.

https://www.vivreenborddebaie.fr/dev9/

 

Bonne journée

 

Sylvain

 

 

 

slider_v13.zip

Modifié par sylvainlelievre
MAJ archive 25/9/2019
  • Merci 2

Partager ce message


Lien à poster
Partager sur d’autres sites

Bon boulot @sylvainlelievre, le slider fonctionne bien, quelques remarques cependant : comme il s'agit de la même interface que celle de la galerie "Configuration du module" on peut sélectionner autant de dossiers de photos que l'on veut, ce n'est peut-être pas utile, de toutes façon le slider n'affiche logiquement qu'un seul dossier, le dernier.

Ce serait bien de pouvoir définir une dimension, la taille par défaut peut ne pas convenir.

Partager ce message


Lien à poster
Partager sur d’autres sites

Bonjour @Gilux,

 

Bien vu, c'est le dernier dossier sélectionné qui est actif, on peut imaginer que la sélection multiple de dossiers peut servir à mémoriser les anciens diaporamas réalisés. Pour moi ça mange pas de pain... mais bien sûr je reste attentif à vos remarques.

 

il y a 10 minutes, Gilux a dit :

Ce serait bien de pouvoir définir une dimension, la taille par défaut peut ne pas convenir

Le paramétrage de la largeur maxi du diapo (visible sur de grands ou assez grands écrans) se fait dans vendor/init.js, pour la hauteur ça s'adapte automatiquement (16/9, 4/3, paysage, portrait). J'ai ajouté dans init.js une petite optimisation fonction de la fenêtre client.

C'est une des forces de responsiveslides, mais pour ma part je ne vais l'utiliser qu'avec un seul format d'images à la fois, par exemple 16/9 orientation paysage car sinon le rendu est pénible !

Chacun pourra choisir.

 

Bonne journée

 

Sylvain

Modifié par sylvainlelievre
  • J'aime 1

Partager ce message


Lien à poster
Partager sur d’autres sites
il y a 13 minutes, sylvainlelievre a dit :

pour ma part je ne vais l'utiliser qu'avec un seul format d'images à la fois, par exemple 16/9 orientation paysage car sinon le rendu est pénible !

 

Oui, comme pour beaucoup d'interfaces utilisant des images, il vaut mieux les préparer à l'avance, un diaporama est plus agréable à regarder si toutes les images ont la même taille et sont optimisées pour celle du slider

 

il y a 16 minutes, sylvainlelievre a dit :

Le paramétrage de la largeur maxi du diapo (visible sur de grands ou assez grands écrans) se fait dans vendor/init.js

 

Ok, j'ai vu, mais il y a 3 #slider, il faut donc afficher la source pour savoir lequel modifier :

<div class="rslides_container">
		<ul class="rslides" id="slider2">

 

  • Merci 1

Partager ce message


Lien à poster
Partager sur d’autres sites

Bien vu @Gilux c'est dans slider2 !

 

Je ne travaille qu'avec slider2, je modifie donc dans init.js sous :

// Slideshow 2 et

// Adaptation de la largeur du wrapper

 

Je n'ai pas testé les slider1 et slider3 qui sont apparemment supportés par les fichiers slider/vendor/js/...  et par le css placé (uniquement) dans slider/view/index/index.css

  • J'aime 1

Partager ce message


Lien à poster
Partager sur d’autres sites
Il y a 17 heures, roger a dit :

Par contre pour ma part je laisserais le choix de l'affichage des images sur le deux modes (bien qu'il est vrai lors de mon premier essai cela fait l'affichage d'une image au format portrait modifie visuellement l'affichage premier du diapo en hauteur ce qui peut obliger l'utilisateur à jouer du slider vertical dans son navigateur);

Bonjour @roger,

C'est tout à fait le cas : on a le choix mixer des orientations ou pas, mixer des formats ou pas... je n'ai pas changé la "philosophie" de Responsiveslides.com

Il y a 17 heures, roger a dit :

Juste pour mon info, c'est possible avec cet modif là de créer plusieurs diapos différents (et donc les données html écrites qui vont avec) et donc les données afférentes écrites dans  leurs fichiers respectifs ou les fameuses données pour un diapo sont elles écrite dans un unique fichier pour ton module?

Il n'y a pas de fichier à proprement parlé. la page index.php au niveau du serveur renvoie du code html (+ le js + le css) qui affiche le diaporama. Les légendes sont saisies au moment du choix du dossier (comme pour gallery) elles ne sont pas mises dans un fichier.

Il y a un seul diaporama par page c'est pour ça que des solutions comme la tienne où l'on écrit directement du code html dans tinymce restent intéressantes.

 

Mais ici j'ai essayé de développer quelque chose d'autre : un vrai module Zwii, respectant au maximum la structuration des modules Zwii et qui facilite au maximum la tâche d'intégration d'un diaporama : aucun code html à saisir.

 

Mon idée maintenant est d'avoir suffisamment de validation de "mon" module pour ensuite le proposer en téléchargement.

 

On pourrait par la suite donner des variantes au niveau de la forme du slider,  exemple : boutons et texte visibles sur la diapo...

Enfin il reste du boulot !

 

Bonne journée

 

Sylvain

Modifié par sylvainlelievre
  • Merci 1

Partager ce message


Lien à poster
Partager sur d’autres sites
il y a une heure, roger a dit :

Et je t'avoue qu'il me tarde que ton module soit 100% validé pour soit remplacer le module original "gallery" du zwii ou être incorporé dans le zwii comme module complémentaire à celui de la galerie d'origine; je serais le premier à l'utiliser avec un immense plaisir.

PAS DU TOUT @roger,

 

C'est un nouveau module slider ou diaporama qui n'a rien à voir avec un module Gallery (même s'il est construit sur cette base).

il y a une heure, roger a dit :

te donner aussi le résultat de tout mes essais à ce niveau là pour que tu puisses les proposer en "bonus" de ton module

TOUT A FAIT @roger,

tu y serais totalement associé car tu as beaucoup plus d'expérience en css que moi. Ce serait une collaboration "les bonus de @roger

  • J'aime 1

Partager ce message


Lien à poster
Partager sur d’autres sites

Super boulot,

Juste quelques remarques :

- dans firefox esr 60.3.0 les flèches de déplacement gauches et droites ne s'affichent pas au survol : lorsque je déplace le curseur sur leur emplacement supposé le curseur devient une main et au clic ça répond ;

- idem que ci-dessus dans le coin en haut à droite : je suppose qu'il y a par défaut la petite flèche de lecture que je peux passer en pause mais rien ; quand je mets le curseur à cet endroit il devient une main mais le clic ne donne rien car ça continue de défiler ;

- lorsque l'on passe sur la diapo 3 la ligne de puces sous l'image descend d'une ligne de plus par rapport aux autres photos.

C'était ma petite pause de cet après-midi au boulot !

Il a tout ce qu'il faut pour plaire ! Merci.

Philippe

Modifié par augras
  • Merci 1

Partager ce message


Lien à poster
Partager sur d’autres sites

Bonjour @augras,

et merci.

 

Le 23/09/2019 à 15:38, augras a dit :

dans firefox esr 60.3.0 les flèches de déplacement gauches et droites ne s'affichent pas au survol : lorsque je déplace le curseur sur leur emplacement supposé le curseur devient une main et au clic ça répond

C'est normal j'ai choisi la version "boutons transparents", en fait il n'y en a pas ! ce sont les zones droite et gauche de l'image qui permettent la navigation, le survol de la zone centrale fait apparaître le texte.

 

Le 23/09/2019 à 15:38, augras a dit :

idem que ci-dessus dans le coin en haut à droite : je suppose qu'il y a par défaut la petite flèche de lecture que je peux passer en pause mais rien ; quand je mets le curseur à cet endroit il devient une main mais le clic ne donne rien car ça continue de défiler

Non, pas dans cette version de responsiveslides. Le survol de l'image stop la navigation c'est tout.

Le 23/09/2019 à 15:38, augras a dit :

lorsque l'on passe sur la diapo 3 la ligne de puces sous l'image descend d'une ligne de plus par rapport aux autres photos.

C'était ma petite pause de cet après-midi au boulot !

Bien vu ! c'est corrigé sur mon site de dev. c'était dû à l'absence de légende.

 

Si tu peux faire l'essai je pourrai ensuite proposer le module en téléchargement.

Le 22/09/2019 à 08:24, sylvainlelievre a dit :

1 - Charger vos photos avec rfm ou par ftp dans site/file/source/votre_dossier/votre_sousdossier_eventuel

2 - Installer par FTP le contenu de l'archive ci-jointe dans le dossier module (et non core/module)

3 - Nouvelle page, du texte au dessus (pour l'instant), configurer le module slider en sélectionnant le dossier et en ajoutant éventuellement des légendes.

 

 

slider_v13.zip

Modifié par sylvainlelievre
MAJ archive 25/9/2019
  • Merci 1

Partager ce message


Lien à poster
Partager sur d’autres sites

Bonjour @roger

 

Il y a 10 heures, roger a dit :

fameux boutons qui manqueraient à certains

J'ai mis également sur mon site de dev une version en boutons.

https://www.vivreenborddebaie.fr/dev9/?rslides-en-boutons

 

J'ai pris au départ la version "boutons transparents" de responsiveslides parce que je ne voulais pas surcharger l'image ni par des boutons ni par du texte. Cette surcharge est très gênante sur des petits écrans. C'est grâce à tes essais que j'ai pu établir  mon cahier des charges.

 

Bonne journée

 

Sylvain

 

Partager ce message


Lien à poster
Partager sur d’autres sites

Bonjour @Fred,

 

J'ai réalisé un module slider (voir mes posts précédents).

Je souhaite disposer de la possibilité d'un placement libre du module comme pour Form et Gallery.

 

La solution la plus simple serait une modification des lignes 47 et 229 de core/module/page/view/edit/edit.js.php en ajoutant la condition sur "slider".

 

Est-ce envisageable pour la prochaine version de Zwii ?

 

Sinon que me conseilles-tu ? car je ne veux pas que les utilisateurs de ce module slider soient obligés d'intervenir sur le core !

Et d'un autre côté proposer ce module en téléchargement sans avoir cette possibilité de placement libre serait bien dommage.

Merci de tes réponses.

 

Sylvain

	/**
	* Masquer et affiche le contenu pour les modules form et gallery
	*/
	if($("#pageEditModuleId").val() === "form" ||
  	$("#pageEditModuleId").val() === "gallery" || $("#pageEditModuleId").val() === "slider") {
    	$("#configModulePositionWrapper").addClass("disabled");
			$("#configModulePositionWrapper").slideDown();	
	} else {
	    $("#configModulePositionWrapper").removeClass("disabled");
			$("#configModulePositionWrapper").slideUp();				
	}
	/**
    
    et
    
    /**
 * Masquer et affiche le contenu pour les modules form et gallery
 */
var pageEditModuleIdDOM = $("#pageEditModuleId");
pageEditModuleIdDOM.on("change", function() {
	if($(this).val() === "form" ||
	   $(this).val() === "gallery" || $(this).val() === "slider") {
		$("#configModulePositionWrapper").addClass("disabled");
		$("#configModulePositionWrapper").slideDown();	
	}
	else {
		$("#configModulePositionWrapper").removeClass("disabled");
 		$("#configModulePositionWrapper").slideUp();			
	}
});

 

 

slider_v13.zip

Modifié par sylvainlelievre
MAJ archive 25/9/2019

Partager ce message


Lien à poster
Partager sur d’autres sites

Bonjour @sylvainlelievre,

 

La détection du placement  s'effectue dans core.php à la ligne 1389.

Si la position stockée est "free", on recherche la chaîne [] pour placer le module.

Il n'est donc pas nécessaire de le modifier.

 

En revanche, tu devrais pouvoir activer l'option au niveau du fichier core/module/page/view/edit/edit.js.php  le truc c'est que si d'autres modules sont créés, le problème se  posera et on se retrouvera avec un liste interminable. L'idéal est donc de trouver une autre solution :

Soit livrer un edit.js.php

Soit ajouter le code jquery dans l'un des fichiers include de main.

Soit une autre solution, comme généraliser la positionnement aux autres modules, je teste le code en ce moment (sauf pour redirection évidemment), des news bientôt.

 

 

 

  • Merci 1

Partager ce message


Lien à poster
Partager sur d’autres sites

re-

Ci-joint un nouvel edit.js.php qui autorise la position du module dans la page quelque soit sa nature, pdfview testé hier, les modules de slide et autres.

Je n'ai pas le temps de le tester avec vos modules, mais si cela convient, je l'incorporerai dans une prochaine update mineure.

Les modifications sont visibles ici.

edit.js.php

  • J'aime 1

Partager ce message


Lien à poster
Partager sur d’autres sites
Le 23/09/2019 à 17:33, sylvainlelievre a dit :
Le 23/09/2019 à 15:38, augras a dit :

lorsque l'on passe sur la diapo 3 la ligne de puces sous l'image descend d'une ligne de plus par rapport aux autres photos.

C'était ma petite pause de cet après-midi au boulot !

Bien vu ! c'est corrigé sur mon site de dev. c'était dû à l'absence de légende.

 

Bonjour @sylvainlelievre

Je trouve qu'après cette correction la ligne des points de défilements est trop basse sous l'image, et que la légende est difficilement lisible, j'ai modifié le css pour que la légende s'affiche à la base de l'image :

/* Ajout pour afficher le texte au survol de la partie centrale de l'image (50%)*/

.rslides span {
  display: none;
  font-size : 1.2em;
  line-height : 2;
  background-color: rgba(255,255,255,0.7);
  color: #000;
  text-align: center;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}

.rslides img:hover + span {
  display: block;
}

/* Fin d'ajout*/

Ce qui donne ceci :

 

legende.thumb.jpg.49650c833eb7f8cde33e584d6c918fcf.jpg

 

 

 

Modifié par Gilux
  • Merci 1

Partager ce message


Lien à poster
Partager sur d’autres sites
Il y a 17 heures, sylvainlelievre a dit :

J'ai pris au départ la version "boutons transparents" de responsiveslides parce que je ne voulais pas surcharger l'image ni par des boutons ni par du texte. Cette surcharge est très gênante sur des petits écrans.

 

Personnellement je trouve la version "boutons transparents" plus agréable à regarder que celles avec des gros boutons moches de part et d'autre de l'image, tout le monde connait ce système de défilement des images en avant et en arrière en cliquant à droite ou à gauche de l'image, c'est le même partout, ajouter un bouton n'est à mon sens pas justifié

  • J'aime 1

Partager ce message


Lien à poster
Partager sur d’autres sites

Bonjour @Gilux

 

Un grand merci !

Il y a 7 heures, Gilux a dit :

Je trouve qu'après cette correction la ligne des points de défilements est trop basse sous l'image, et que la légende est difficilement lisible, j'ai modifié le css pour que la légende s'affiche à la base de l'image

 

Comme toi je n'étais pas satisfait du texte et de la position du pager. Au départ mon cahier des charges était de ne pas surcharger l'image par des boutons ou par des textes, mais ta solution semble à l'heure actuelle la meilleure (j'ai également fait une variante avec texte dans une balise title (à l'ancienne) c'était un peu mieux)...

 

Je vais donc l'adopter !

Encore merci.

 

Sylvain

Modifié par sylvainlelievre
  • J'aime 2

Partager ce message


Lien à poster
Partager sur d’autres sites
Il y a 7 heures, Gilux a dit :

Personnellement je trouve la version "boutons transparents" plus agréable à regarder que celles avec des gros boutons moches de part et d'autre de l'image

Je suis bien d'accord !

  • J'aime 1

Partager ce message


Lien à poster
Partager sur d’autres sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Invité
Répondre à ce sujet…

×   Collé en tant que texte enrichi.   Coller en tant que texte brut à la place

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   Vous ne pouvez pas directement coller des images. Envoyez-les depuis votre ordinateur ou insérez-les depuis une URL.


×
×
  • Créer...