Conception d'un module

snypi · 01/12/2011 14:12:43

Super_chemist a écrit :

@snypi : peux-tu refaire l'image de background, avec le texte blanc "diaporama" bien au centre de l'image, pour qu'en affichage centré, si le div est petit, on puisse lire le texte malgré tout?
Merci

comme ceci ??

Super_chemist · 01/12/2011 16:39:03

C'était ce à quoi je pensais, mais à la réflexion, je le trouve moins réussi que le précédent !

Donc finalement j'ai repris l'ancien, et j'ai ajouté du transparent au dessus, pour recaler le texte au milieu (et vu que je suis une buse en graphisme, c'est tout ce que je sais faire avec paint.NET ! ).
Voici http://dl.free.fr/fWYrMW5ee
C'est toujours la beta11, il y a juste le png qui a changé... Mais ça change tout !

En l'absence de bug découvert d'ici une semaine, on pourra considérer qu'il est en version finale !

snypi · 01/12/2011 16:43:25

pour de ce qui est graphisme c'est stefpei le graphiste officiel de ziteplus

snypi · 04/12/2011 11:18:02

petite question
comme ziteplus à jquery de base
pouvons nous intégrer ce script à zdiaporama ?
http://jonraasch.com/blog/a-simple-jquery-slideshow ou faut t'il dupliquer le module pour le faire ??
ou avec stefpei on utilise pas mal ce petit plugin jquery http://medienfreunde.com/lab/innerfade

Dernière modification par snypi (04/12/2011 12:09:40)

Super_chemist · 04/12/2011 15:56:06

Je ne connais pas du tout la bibliothèque jquery, aussi, si vous avez des réponses à mes questions, n'hésitez pas !

De ce que je vois, on ne peux pas juste modifier zdiaporama pour ajouter cette fonction, car les deux scripts que tu cites se basent sur des div qui contiennent une liste d'éléments, et ensuite le javascript décide quoi afficher et quoi masquer.
Zdiaporama se base lui sur une approche différente: on a une image (celle générée par php), et ensuite le javascript change le src de cette image.
On ne peux pas faire un fondu entre deux images si on en a qu'une seule de chargée ! Donc c'est pas compatible avec zdiaporama.

Dans le cas de tes scripts, il faut charger toutes les images dans le navigateur (je te laisse imaginer si ta rubrique fait 50 photos...), alors que zdiaporama les charges une par une, et le timeout ne débute que lorsque l'image est chargée, donc même sur une connexion faible, le chargement de la page ne sera pas trop ralenti. Je veux vraiment un script léger, et charger des images sur une connexion merdique <1méga, c'est très lourd ! Sans compter l'occupation CPU qui peux être problèmatique sur des netbooks et autres...

De plus, je te laisse tester en désactivant le javascript : pour zdiaporama, le visiteur verra une seule image, le design du site est respecté malgré l'absence de diaporama. Pour tes scripts, il les verra toutes (et au revoir la mise en page ! ).

En clair, à moins de modifier profondément zdiaporama, ce n'est pas possible, et je n'y suis pas favorable pour un tas de raisons.

En revanche, recréer un ?jdiaporama? à partir du code de zdiaporama ne doit pas être trop compliqué:
Intégrer le js dans le header de la page, intégrer le html au niveau de l'appel php, tout intégrer dans tinymce... Tout est en place! Mais je ne me lançerai pas là dedans, désolé, je n'ai VRAIMENT pas le temps !

A la limite, il est peut être possible de faire un fadeout/fadein sur fond blanc (ou transparent) dans zdiaporama, mais est-ce vraiment utile?

snypi · 04/12/2011 20:23:58

salut super_chemist
merci pour ta réponse !
effectivement cela n'est pas adaptable à zdiaporama du fait que les images soit charger et remplacé !!!
pour ce qui est du javascript désactiver cela ma permis d'aller vérifier si mon site du centre équestre fonctionnais correctement et j'ai du régler la div du slide de droite avec un overflow:hidden pour que l'on ne voit pas les images les une à la suite des autres !!! merki (il doit pas y en avoir beaucoup qui désactive le javascript gmail ect... marche avec !)

Super_chemist a écrit :

En revanche, recréer un ?jdiaporama? à partir du code de zdiaporama ne doit pas être trop compliqué:

effectivement le souci est la disponibilité !!!
je pense m'y aventurer un de c 4 en dupliquant le zdiaporama et en l'adaptant pour créer un fdiaporama

(je te laisse imaginer si ta rubrique fait 50 photos...)

il faudra que j'y pense
mais tous cela dès que j'aurais des dispo !!

et partir de zdiaporama sera une bonne base car il cartonne ce petit plugin ziteplus

Dernière modification par snypi (04/12/2011 20:26:10)

snypi · 15/12/2011 19:29:39

salut je cherche à écrire ceci dans le js mais cela plante mon module

           self::$cms->content['js'].='<script type="text/javascript">
    $(document).ready( function () {

    $("#'.$rub.'").innerfade({
      speed: 2000,
      timeout: 6000,
      type: 'random',
      containerheight: '180px'
    });
  });
</script>';

elle est ou la faute ?

Super_chemist · 15/12/2011 19:54:45

Le soucis, c'est l'imbrication des guillemets simples et doubles...
Tu as une suite de chaines de caractères php encadrées par des guillemets simples (et concaténées).
Dans ces chaines, tu ne peux pas mettre de guillemets simples, sinon php ne sait pas où s'arrête la chaine. Par contre, tu peux y mettre des guillemets doubles sans soucis. Donc tout le js ne doit comporter que des guillemets doubles.
(une autre solution consisterait à échapper les guillemets, avec un antislash je crois, mais bon...)

En clair, tu remplaces 'random' par "random" et '180px' par "180px".

Je te conseille de bien comprendre mon explication au dessus, c'est vachement important quand on imbrique des codes les uns dans les autres car c'est source de bugs très cons et très chiants à trouver (comme ici!).

snypi · 16/12/2011 00:27:47

merci pour ces explication claire
cela fonctionne merci
mais c'est que le début de la galère
@ bientôt

Super_chemist · 16/12/2011 13:30:49

J'ajouterai que quand on copie-colle un code quelconque, il faut toujours commencer par vérifier cette histoire de guillemets !
Chat échaudé crains l'eau froide !

snypi · 17/12/2011 17:42:55

salut à vous
suite à l'élaboration plutôt bien fichu de super chemist du zdiaporama j'essaye de nous pondre un petit module qui utilise un plugin jquery (innerfade)
voici une ébauche du plugin pour ziteplus avec deux option de transition d'image le fading ou slide
Attention à tester sur une version de ziteplus de test !!! et il peut y avoir un conflit avec zdiaporama
http://www.creation-site-internet-gard. … fdiapo.zip

PS LE DELAI SONT DES MILLISECONDE DONC METTRE exemple : 6000

mon souchi est qu'a chaque fois que l'on met 2 diaporama dans une page est qu'il implémente 2x

           self::$cms->content['js'].='
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script> 
<script src="js/jquery.innerfade.js" type="text/javascript"></script> 
<script type="text/javascript">
$(document).ready( function () { // je voudrais qu'a chaque fois que je créer un diaporama le code s'insère ici
</script>

à testé et si quelqu'un à une piste
merki

Dernière modification par snypi (17/12/2011 17:47:13)

snypi · 17/12/2011 19:48:02

@ super chemist dans le zdiaporama.js
pourquoi tu met un espace dans la div créer ??

var space = ' ';
		var code = space+'<!--?php echo $this->page_module(

ceci me gène dans mon module mais il y à peut être une raison à cela !!

Dernière modification par snypi (17/12/2011 19:48:59)

Super_chemist · 17/12/2011 19:55:18

Si tu regarde dans mon zdiaporama.php, tu verra que dans la méthode function dojob() je déclare dés la 2e ligne une variable static $zdiapo.
Le principe d'une variable statique, c'est qu'elle est accessible par toutes les instances de l'objet en question d'une même page.
En clair, tu peux faire un test

		if (!isset($fdiapo)) 
		{
			//code à exécuter la première fois
		}else{
			$fdiapo = 1;
			//code à exécuter les fois suivantes
		}

Attention, pour ne pas qu'on se marche dessus, il faut que ta variable static n'ait pas le même nom que celles des autres modules (en particulier zdiaporama), donc met bien fdiapo !

Ensuite, tu peux t'inspirer de ce que j'ai fait, à savoir que ma $zdiapo est un array, ce qui m'a permis de gérer intelligement, en incrémentant, le cas de l'identificateur unique...

Sinon, rien à voir, mais dans la 092 il n'y a pas une histoire d'intégration automatique de jquery ? Faudrait voir avec jpg comment intégrer ça pour que ce soit propre...

Je télécharge ton module, pour voir un peu ce que tu as fait, et pour voir dans quelle mesure il y a conflit. Mais en gros, si toutes les variables sont bien préfixées, il devrait pas y avoir de soucis...

Super_chemist · 17/12/2011 19:58:36

Ah cet espace !!!

GROS GROS BUG dans tinymce si la div est vide (sachant que le <--?php... est considéré comme vide par tinymce) !!!
Si tu met du texte à la place, tu peux virer l'espace, mais si tu met rien, ça bug.

Dans le photoshow de jpg, il y avait pas de soucis car il y mettait le "titre de la galerie".

Tu n'imagine pas combien de cheveux je me suis arraché avant de comprendre d'où ca venait ! D'ailleurs, je crois que c'est l'origine d'un bug où tu ne comprenais pas pourquoi chez le plugin de jpg ça marchait, mais pas chez le tien...

Dernière modification par Super_chemist (17/12/2011 20:00:27)

snypi · 17/12/2011 20:10:24

merci pour ta première réponse
ps : testé il n'y à pas de conflit avec zdiaporama

deuxième réponse
satané bug qui ma rendu fou !! je comprend mieux

mais du coup cela me casse les pieds pour mon module fdiapo
je vais creuser la question
merci

Dernière modification par snypi (17/12/2011 20:12:52)

Super_chemist · 17/12/2011 20:21:00

petites infos trouvées dans le /zite/module/fdiapo.php :

-déjà penses à t'attribuer le mérite dans l'intro du fichier ! Celui là, c'est le tien !
- ensuite, tout à la fin dans le $out tu fait <div id="'.$rub.'" .... Souci, le id doit être unique sur la page. Imagine que tu ait deux fois le même diaporama sur la même page... Pour régler ce soucis, j'avais mon $zdiapo[$rub] qui était un nombre incrémenté à chaque fois que j'insérais le même diaporama...
Je te suggère pour éviter ça de faire un id="fdiapo_'.$rub.$fad_diapo[$rub].'" ..., par exemple, pour obtenir un id="fdiapo_marubrique1"

Je n'ai pas trouvé de source de conflit dans ce fichier, mais je n'ai pas testé encore...

Super_chemist · 17/12/2011 20:23:07

Penses à modifier les messages du /zite/module/fdiapo.ini !

Super_chemist · 17/12/2011 20:43:15

Question : pourquoi dans le /tinymce/plugisn/fdiapo/js/fdiapo.js, tu as mis la ligne 87 en commentaire ? Moi je considérais que float:none, c'était pour centrer le diaporama, d'où le fait que je mettait des margin:auto. Pour un "vrai" float:none, l'utilisateur laisse la liste déroulante vide, ce qui n'insère rien...
Tu as changé ce comportement ?

Et dans ce même fichier, je viens de regarder pour le 'space'. C'est quoi ton souci ? Si on regarde dans le html obtenu, j'ai l'impression que cet espace est mangé par tinymce lors de l'enregistrement, donc il ne se retrouve pas dans le html final...
Qu'est ce que tu veux obtenir et qui coince?

snypi · 17/12/2011 23:56:20

merci pour ton soutien
j'ai apporté les modifs conseillé et pour le souci du space
une image est plus claire

je pense que cela vient que pour fonctionné j'ai besoins d'avoir une div avec une id (souci tinymce la div à une id mce_temps)
donc mon module php imbrique une seconde div avec l'id de la rubrique

Super_chemist a écrit :

Sinon, rien à voir, mais dans la 092 il n'y a pas une histoire d'intégration automatique de jquery ? Faudrait voir avec jpg comment intégrer ça pour que ce soit propre...

pour que cela fonctionne tu place ton jquery dans le js puis renseigne dans configurer l'adresse de ton js
exemple : js/jquery-1.4.4.min.js
et tu choisis automatique le script est charger si besoin

je pense qu'il est préférable d'utiliser les api de google car beaucoup de site l'utilise et donc cela évite de les recharger à chaque fois car il est dans le cache des navigateurs de nos visiteurs !!
maintenant si tu travaille sans connexion internet c'est la galère

Dernière modification par snypi (18/12/2011 00:07:41)

Super_chemist · 18/12/2011 00:16:37

Dans fdiapo.js, les lignes 102 à 109 (le else) concernent l'ajout de la div.

Tu peux remplacer le <div id="__mce_tmp" par quelque chose comme <div id="'+nl.ng.value.replace(/([^a-zA-Z0-9])/g,"")+'_fdiapo" dans le execCommand.
Puis tu remplace tous les '__mce_tmp' qui suivent dans le else par nl.ng.value.replace(/([^a-zA-Z0-9])/g,"")+'_fdiapo'.
Tu vires le ed.dom.setAttrib('__mce_tmp', 'id', ''); ligne 108
Et enfin tu ajoutes un ed.dom.setAttrib(node, 'id', nl.ng.value.replace(/([^a-zA-Z0-9])/g,"")+'_fdiapo'); après la ligne 100 juste à la fin du if.

Ca devrai marcher, et tu pourrait ainsi virer la div côté php.
Bien sur, tu peux adapter la regex du ng.value, en particulier pour tout ce qui est rubrique avec des caractères à la con... Là j'ai paramétré pour virer tout ce qui n'est pas strictement une lettre ou un chiffre non accentué dans le nom de la rubrique.

Par contre je vois pas trop comment incrémenter si tu met deux fois le même diapo...

Super_chemist · 18/12/2011 00:30:02

En effet, pour l'espace, je le retrouve aussi dans mon html (la boulette, j'avais pas la bonne version de zdiaporama sur mon site de dev!).
Une solution pourrait être de le mettre dans un <p> (car je viens de réaliser que du texte dans un div, c'est pas valide ! Il faut <div><p>&nbsp</p></div>) et d'appliquer par css un font-size:0; sur ce <p>... Ou un display:none ?

snypi · 18/12/2011 00:45:17

ho oui pour avoir du texte pour que tinymce nous casse pas les pieds!!
<p style="display:none;" class="texte_none;"> texte tinymce</p>
et donc juste rajouter pour content.css de tinymce .texte_none{diplay:none;}
comme cela on devrais avoir un joli résultat dans l'éditeur ainsi que sur le site
je le test de suite et te tien au jus

edit : sur mon plugin c'est pris comme un effet et donc on voit le texte

Dernière modification par snypi (18/12/2011 00:54:56)

snypi · 18/12/2011 02:13:54

dit donc j'ai virer le code de l'espace et pour mon cas dans ie tous passe correctement !!
mon code n'est pas effacé lors de la modification de la page
ni lors de la mise à jours du code
l'espace n'est pas nécéssaire ni pour ie ni pour firefox ni pour chrome !!!
si c'est pas une bonne nouvelle (ton code est super bien fait réessaye sans espace cela vient peut être d'un problème de cache sous ie lors du développement)

super_chemist a écrit :

Ca devrai marcher, et tu pourrait ainsi virer la div côté php.

j'ai changer je ne passe plus par l'id mais par la classe souci résolue (mais une seule rubrique par page en même temps je vois pas pourquoi on mettrait 2x le même diaporama)
merci pour la piste
reste plus qu'a implémenté correctement le javascript dans le header voir post #136
j'ai pas bien compris le fonctionnement de ce que tu ma dis !!

soit voici la dernière version avant d'aller au lit
http://www.creation-site-internet-gard. … fdiapo.zip
demo ici http://www.creation-site-internet-gard.com/demo/
effacer vos anciens fdiapo n'est pas compatible avec la version précédente
activer le jquery via le menu configurer
jquery_link : Lien vers la bibliothèque jquery : js/jquery-1.4.4.min.js
et en dessous automatique

bonne nuit

Dernière modification par snypi (18/12/2011 12:05:33)

snypi · 18/12/2011 13:03:04

snypi a écrit :

dit donc j'ai virer le code de l'espace et pour mon cas dans ie tous passe correctement !!
mon code n'est pas effacé lors de la modification de la page
ni lors de la mise à jours du code
l'espace n'est pas nécéssaire ni pour ie ni pour firefox ni pour chrome !!!

heu en fait quand on créer le diaporama sous firefox cela bug
il faut modifier le diaporama pour que cela fonctione

Dernière modification par snypi (18/12/2011 13:03:37)

Super_chemist · 18/12/2011 13:08:01

Bon, je teste sur une 092, mes commentaires en live :

- A l'activation du module, on a les messages pour zdiaporama... Penses à modifier le fdiapo.ini du dossier module, il y a tous les messages dedans. Et tant que tu y es, ajoutes-y la procédure pour activer jquery dans ziteplus.
- Dans le dialog, pour les cases animation et type, tu ne pourrait pas mettre par défaut directement fade et séquence? Inutile à mon sens de laisser la possibilité d'avoir une case vide dans ce cas. Et avec du texte un peu plus explicatif sur ce que ça signifie fade, random, etc.
- Toujours dans le dialog, mais c'est cosmétique et c'est à toi de décider bien entendu ;-) , j'aurai regroupé animation, type et transition dans une seule "case" (comme pour largeur et hauteur, ou les espacements...) pour alléger le tableau.

- Je regrette, mais l'espace est bel et bien indispensable !!!
Methode pour reproduire le bug :
Ajoutes un fdiapo dans ta page. Sauvegarde.
On est d'accord, tu as bien le div et le php dedans.
Edite ta page en ajoutant une ligne de texte avant ou après. Sauvegarde.
Va voir le source, tu as toujours la div, mais le php a disparu !
Bug reproduit à l'instant sous Chrome et IE, de mémoire Firefox bug aussi, c'est un souci dans tinymce, il lui faut du texte !

- J'ai un bug avec tous les paramètres blancs sauf la rubrique : Unexpected token ILLEGAL dans le code javascript inséré par php. Je te laisse débugger tout ça, mais je pense que ça viens d'une virgule que tu a laissé trainer à la fin de la liste de paramètres...

C'est tout pour le moment.

Bon courage !

Forum ZitePLUS

#126 01/12/2011 14:12:43

Re : Conception d'un module

#127 01/12/2011 16:39:03

Re : Conception d'un module

#128 01/12/2011 16:43:25

Re : Conception d'un module

#129 04/12/2011 11:18:02

Re : Conception d'un module

#130 04/12/2011 15:56:06

Re : Conception d'un module

#131 04/12/2011 20:23:58

Re : Conception d'un module

#132 15/12/2011 19:29:39

Re : Conception d'un module

#133 15/12/2011 19:54:45

Re : Conception d'un module

#134 16/12/2011 00:27:47

Re : Conception d'un module

#135 16/12/2011 13:30:49

Re : Conception d'un module

#136 17/12/2011 17:42:55

Re : Conception d'un module

#137 17/12/2011 19:48:02

Re : Conception d'un module

#138 17/12/2011 19:55:18

Re : Conception d'un module

#139 17/12/2011 19:58:36

Re : Conception d'un module

#140 17/12/2011 20:10:24

Re : Conception d'un module

#141 17/12/2011 20:21:00

Re : Conception d'un module

#142 17/12/2011 20:23:07

Re : Conception d'un module

#143 17/12/2011 20:43:15

Re : Conception d'un module

#144 17/12/2011 23:56:20

Re : Conception d'un module

#145 18/12/2011 00:16:37

Re : Conception d'un module

#146 18/12/2011 00:30:02

Re : Conception d'un module

#147 18/12/2011 00:45:17

Re : Conception d'un module

#148 18/12/2011 02:13:54

Re : Conception d'un module

#149 18/12/2011 13:03:04

Re : Conception d'un module

#150 18/12/2011 13:08:01

Re : Conception d'un module

Pied de page des forums